Tables Layouts & Structure

Table Layouts

This template use the default bootstrap table markup. You can read more about it here: http://getbootstrap.com/css/#tables.

Striped table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped">
  <!-- TABLE CONTENT -->
</table>

Bordered table

Use .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered">
  <!-- TABLE CONTENT -->
</table>

Hover rows

Use .table-hover to enable a hover state on table.

<table class="table table-hover">
  <!-- TABLE CONTENT -->
</table>

Contextual classes

Use contextual classes to color table rows or individual cells.

<table class="table">
  <thead>
    <tr>...</tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>1</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">...</tr>
    <tr>...</tr>
    <tr class="danger">...</tr>
  </tbody>
</table>

Dynamic Table: sort, search & pagination

To make your table dynamic with sort, search & pagination feature, add the class table-dynamic. That's it!

<table class="table table-dynamic">
  <thead>
    <tr>...
    </tr>
  </thead>
  <tbody>
    <tr>...
    </tr>
    <tr>...
    <tr>
  </tbody>
</table>

Dynamic Table: hide filtering or pagination

To hide header or footer pagination, just add the class no-header or /and no-footer to your table.

<table class="table table-dynamic no-footer no-header">
  <thead>
    <tr>...
    </tr>
  </thead>
  <tbody>
    <tr>...
    </tr>
    <tr>...
    <tr>
  </tbody>
</table>

Table Tools: export your data to Excel, PDF, CSV or Print

This plugin provides you with extra buttons : CSV export, Excel export, PDF export and a print function. You can also define more buttons or modify existing ones.

<table class="table table-dynamic table-tools">
  <thead>
    <tr>...
    </tr>
  </thead>
  <tbody>
    <tr>...
    </tr>
    <tr>...
    <tr>
  </tbody>
</table>

Datatables: sorting, filtering

DataTables is a jquery plugin that add a lot of functionnalities to your tables, such as sorting and filtering data.

You can find more info about this plugin here: Datatables website.