Skip to main content

Tables

Purpose

Users need to see structured data in a manner that makes the data readable, scannable, and comparable.

Description

Tables provide customizable views of tabular data with features including sorting and managing columns. Tables are useful when a collection of data requires vertical alignment through columns for quick scanning and discovery of information, as well as for data that with many attributes that requires sorting, grouping, and a user customizable display.

Basic functionality

Tables list a collection of items in rows that have similar attributes, usually with headers to label each attribute.

The following functionality can be provided by tables:

  • Sorting by columns
  • Resizing columns
  • Showing and hiding columns
  • Reordering columns
  • Row selection
  • Performing actions on a row
  • Grouping by attributes
  • Expanding rows

A table’s complexity and needs can vary greatly. This pattern provides many different features a table may have. Features can be mixed and matched based on your needs. Don’t include features unless they’re actually needed.

Styles

Standard

A standard table has subtle row borders.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Table-->
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Striped

A striped table adds an alternating row background color, increasing usability for wider tables.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Striped table-->
<table class="table table-striped">
  <thead>
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Bordered

A bordered table adds column and row borders, increasing usability for content-dense tables.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Bordered table-->
<table class="table table-bordered">
  <thead class="thead-light">
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Borderless

A borderless table removes all borders, decreasing clutter for simple tables.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Borderless table-->
<table class="table table-borderless">
  <thead>
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Row hover

Rows can have a hover effect to indicate click interactions.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Row hover table-->
<table class="table table-borderless table-hover">
  <thead class="thead-light">
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Condensed

Use the condensed style, which reduces cell padding, for very large amounts of data.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Condensed table-->
<table class="table table-bordered table-sm">
  <thead class="thead-light">
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Table shading

Similar to other components, the available styles are .table-{primary, success, info, warning, danger}.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Colored headers table-->
<table class="table table-striped table-info">
  <thead class="thead-dark">
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Headers

Normal

A normal header scrolls with the data.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Normal header-->
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Fixed

A fixed header remains visible as the table body is scrolled. This is useful for larger amounts of data.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Fixed header-->
<table aria-hidden="true" class="table" style="margin: 0">
  <thead>
    <tr>
      <th style="width: 25%">Project name</th>
      <th style="width: 50%">Description</th>
      <th style="width: 25%">Price</th>
    </tr>
  </thead>
</table>
<div style="overflow: auto; max-height: 200px; border-top: none">
  <table class="table table-striped" style="border: none; margin-bottom: 0; border-top: none">
    <thead style="border: none; height: 0; overflow: hidden">
      <tr>
        <th style="width: 25%; height: 0; line-height: 0; font-size: 0; padding: 0; border: 0">Project name</th>
        <th style="width: 50%; height: 0; line-height: 0; font-size: 0; padding: 0; border: 0">Description</th>
        <th style="width: 25%; height: 0; line-height: 0; font-size: 0; padding: 0; border: 0">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="border-top: none">Invoice</td>
        <td style="border-top: none">
          <span>Add invoice confirmation</span>
        </td>
        <td style="border-top: none">
          <span>$4,500</span>
        </td>
      </tr>
      <tr>
        <td>Templates</td>
        <td>
          <span>Refactor templates to use the new templating library</span>
        </td>
        <td>
          <span>$9,000</span>
        </td>
      </tr>
      <tr>
        <td>Payments</td>
        <td>
          <span>Process payments using third party api</span>
        </td>
        <td>
          <span>$5,400</span>
        </td>
      </tr>
      <tr>
        <td>Account Management</td>
        <td>
          <span>Improve account management workflow</span>
        </td>
        <td>
          <span>$6,000</span>
        </td>
      </tr>
      <tr>
        <td>Invoice</td>
        <td>
          <span>Add invoice confirmation</span>
        </td>
        <td>
          <span>$4,500</span>
        </td>
      </tr>
      <tr>
        <td>Templates</td>
        <td>
          <span>Refactor templates to use the new templating library</span>
        </td>
        <td>
          <span>$9,000</span>
        </td>
      </tr>
      <tr>
        <td>Payments</td>
        <td>
          <span>Process payments using third party api</span>
        </td>
        <td>
          <span>$5,400</span>
        </td>
      </tr>
      <tr>
        <td>Account Management</td>
        <td>
          <span>Improve account management workflow</span>
        </td>
        <td>
          <span>$6,000</span>
        </td>
      </tr>
      <tr>
        <td>Invoice</td>
        <td>
          <span>Add invoice confirmation</span>
        </td>
        <td>
          <span>$4,500</span>
        </td>
      </tr>
      <tr>
        <td>Templates</td>
        <td>
          <span>Refactor templates to use the new templating library</span>
        </td>
        <td>
          <span>$9,000</span>
        </td>
      </tr>
      <tr>
        <td>Payments</td>
        <td>
          <span>Process payments using third party api</span>
        </td>
        <td>
          <span>$5,400</span>
        </td>
      </tr>
      <tr>
        <td>Account Management</td>
        <td>
          <span>Improve account management workflow</span>
        </td>
        <td>
          <span>$6,000</span>
        </td>
      </tr>
      <tr>
        <td>Invoice</td>
        <td>
          <span>Add invoice confirmation</span>
        </td>
        <td>
          <span>$4,500</span>
        </td>
      </tr>
      <tr>
        <td>Templates</td>
        <td>
          <span>Refactor templates to use the new templating library</span>
        </td>
        <td>
          <span>$9,000</span>
        </td>
      </tr>
      <tr>
        <td>Payments</td>
        <td>
          <span>Process payments using third party api</span>
        </td>
        <td>
          <span>$5,400</span>
        </td>
      </tr>
      <tr>
        <td>Account Management</td>
        <td>
          <span>Improve account management workflow</span>
        </td>
        <td>
          <span>$6,000</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Headerless

If the content of the table is self-explanatory for your users, it may not need a header. Provide an alternative for sorting, if necessary (e.g., a toolbar with a dropdown).

CSS is 20 years old today!
13 points and 4 comments - 2 days ago 		keyboard_arrow_up 3.4%
Motion Experiments
31 points and 7 comments - 11 hours ago 		keyboard_arrow_up 2.5%
Is everyone a designer?
15 points and 3 comments - 3 days ago 		keyboard_arrow_right 0.0%
Introducing GIFV
24 points and 9 comments - 5 days ago 		keyboard_arrow_down 0.1%
Example HTML usage: 
<!--Headerless header-->
<table class="table table-valign table-bordered table-striped">
  <tbody>
    <tr>
      <td>
        <strong>CSS is 20 years old today!</strong><br />
        <span>13 points and 4 comments - 2 days ago</span>
      </td>
      <td class="align-middle text-center" style="width: 100px">
        <span class="text-success">
          <i class="align-middle material-icons">keyboard_arrow_up</i>
          3.4%</span
        >
      </td>
    </tr>
    <tr>
      <td>
        <strong>Motion Experiments</strong><br />
        <span>31 points and 7 comments - 11 hours ago</span>
      </td>
      <td class="align-middle text-center" style="width: 10">
        <span class="text-success">
          <i class="align-middle material-icons">keyboard_arrow_up</i>
          2.5%</span
        >
      </td>
    </tr>
    <tr>
      <td>
        <strong>Is everyone a designer? </strong><br />
        <span>15 points and 3 comments - 3 days ago</span>
      </td>
      <td class="align-middle text-center" style="width: 10">
        <span class="text-primary">
          <i class="align-middle material-icons">keyboard_arrow_right</i>
          0.0%</span
        >
      </td>
    </tr>
    <tr>
      <td>
        <strong>Introducing GIFV</strong><br />
        <span>24 points and 9 comments - 5 days ago</span>
      </td>
      <td class="align-middle text-center" style="width: 10">
        <span class="text-danger">
          <i class="align-middle material-icons">keyboard_arrow_down</i>
          0.1%</span
        >
      </td>
    </tr>
  </tbody>
</table>

Sorting

Single sorting

Clicking a header cell sets that column as the currently sorted column. The first click should sort descending, the second click should sort ascending.

Project name height Description north Price height
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Single sorting -->
<table role="grid" class="table table-sortable table-bordered">
  <thead class="thead-light">
    <tr role="row">
      <th scope="col" role="columnheader" aria-sort="ascending" class="sortable active">
        Project name <i class="align-middle material-icons">height</i>
      </th>
      <th scope="col" role="columnheader" aria-sort="none" class="sortable">
        Description <i class="align-middle material-icons">north</i>
      </th>
      <th scope="col" role="columnheader" aria-sort="none">Price <i class="align-middle material-icons">height</i></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Multi sorting

When a table is sorted by multiple columns, the sort order is indicated by the superscript numbers.

Performing a shift+click on a header cell should add that column to the sorted list. A second shift+click on the same header cell should toggle the sort direction. A third shift+click on the same header cell should remove that column from the sort list. A left click should clear the sort list and then behave as a single sort.

Event 1 south Date 2 north Module height
user.create 10/21/14 Users
user.create 10/19/14 Users
user.register 10/21/14 Users
user.register 10/18/14 Users
Example HTML usage: 
<!--Multi sorting -->
<table role="grid" class="table table-sortable table-bordered">
  <thead class="thead-light">
    <tr role="row">
      <th scope="col" role="columnheader" aria-sort="other" class="sortable active">
        Event <sup>1</sup> <i class="align-middle material-icons">south</i>
      </th>
      <th scope="col" role="columnheader" aria-sort="none" class="sortable active">
        Date <sup>2</sup> <i class="align-middle material-icons">north</i>
      </th>
      <th>Module <i class="align-middle material-icons">height</i></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>user.create</td>
      <td>
        <span>10/21/14</span>
      </td>
      <td>
        <span>Users</span>
      </td>
    </tr>
    <tr>
      <td>user.create</td>
      <td>
        <span>10/19/14</span>
      </td>
      <td>
        <span>Users</span>
      </td>
    </tr>
    <tr>
      <td>user.register</td>
      <td>
        <span>10/21/14</span>
      </td>
      <td>
        <span>Users</span>
      </td>
    </tr>
    <tr>
      <td>user.register</td>
      <td>
        <span>10/18/14</span>
      </td>
      <td>
        <span>Users</span>
      </td>
    </tr>
  </tbody>
</table>

Selection

Checkboxes are generally the best way to facilitate multi-row selection, especially if clicking a row already has a different action (e.g., opening an email).

  • Checking a checkbox should highlight the corresponding row.
  • If there’s a control for selecting all/none, it should represent the current state of the row selection, including an indeterminate state.
  • shift+click should select all items between the previoulsy clicked checkbox and the currently clicked checkbox.

Selection

Project name Description Price
Payments Process payments using third party api $5,400
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Selection -->

<table class="table table-outline">
  <thead>
    <tr>
      <th style="width: 28px">
        <input indeterminate="" type="checkbox" disabled="" />
      </th>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" disabled="" /></td>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td>
        <span>$5,400</span>
      </td>
    </tr>
    <tr class="table-active">
      <td><input type="checkbox" disabled="" checked="" /></td>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td>
        <span>$4,500</span>
      </td>
    </tr>
    <tr class="table-active">
      <td><input type="checkbox" disabled="" checked="" /></td>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td>
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" disabled="" /></td>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td>
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Note: checkboxes are disabled for demo purposes.

Row action buttons

Buttons with the btn-hover and btn-icon-only classes.

Selection

IMG_234.jpg
2 days ago
IMG_235.jpg
2 days ago
IMG_236.jpg
2 days ago
IMG_237.jpg
2 days ago
Example HTML usage: 
<!--Row action buttons -->
<table class="table table-outline table-striped">
  <tbody>
    <tr>
      <td>
        <strong>IMG_234.jpg</strong><br />
        <span>2 days ago</span>
      </td>
      <td class="text-right">
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="Delete">
          <i class="material-icons">close</i>
          <span class="sr-only">Delete</span>
        </button>
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="More options">
          <i class="material-icons">more_vert</i>
          <span class="sr-only">More</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <strong>IMG_235.jpg</strong><br />
        <span>2 days ago</span>
      </td>
      <td class="text-right">
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="Delete">
          <i class="material-icons">close</i>
          <span class="sr-only">Delete</span>
        </button>
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="More options">
          <i class="material-icons">more_vert</i>
          <span class="sr-only">More</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <strong>IMG_236.jpg</strong><br />
        <span>2 days ago</span>
      </td>
      <td class="text-right">
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="Delete">
          <i class="material-icons">close</i>
          <span class="sr-only">Delete</span>
        </button>
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="More options">
          <i class="material-icons">more_vert</i>
          <span class="sr-only">More</span>
        </button>
      </td>
    </tr>
    <tr>
      <td>
        <strong>IMG_237.jpg</strong><br />
        <span>2 days ago</span>
      </td>
      <td class="text-right">
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="Delete">
          <i class="material-icons">close</i>
          <span class="sr-only">Delete</span>
        </button>
        <button class="btn btn-sm btn-icon-only" title="" data-toggle="tooltip" data-original-title="More options">
          <i class="material-icons">more_vert</i>
          <span class="sr-only">More</span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Column customization

To provide column customization, add an icon to the top right corner of the table. Clicking on the icon will show the Show and hide columns dialog.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Example HTML usage: 
<!--Column customization -->
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Project name</th>
      <th>Description</th>
      <th>Price</th>
      <th class="table-config-column">
        <button
          type="button"
          data-container="body"
          title=""
          data-toggle="tooltip"
          data-original-title="Show and hide columns"
          class="btn btn-icon-only p-0"
        >
          <i class="material-icons">more_horiz</i>
        </button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Invoice</td>
      <td>
        <span>Add invoice confirmation</span>
      </td>
      <td colspan="2">
        <span>$4,500</span>
      </td>
    </tr>
    <tr>
      <td>Templates</td>
      <td>
        <span>Refactor templates to use the new templating library</span>
      </td>
      <td colspan="2">
        <span>$9,000</span>
      </td>
    </tr>
    <tr>
      <td>Payments</td>
      <td>
        <span>Process payments using third party api</span>
      </td>
      <td colspan="2">
        <span>$5,400</span>
      </td>
    </tr>
    <tr>
      <td>Account Management</td>
      <td>
        <span>Improve account management workflow</span>
      </td>
      <td colspan="2">
        <span>$6,000</span>
      </td>
    </tr>
  </tbody>
</table>

Show and hide columns dialog

This dialog provides the ability to show/hide columns as desired.

Example HTML usage: 
<!--Show and hide columns dialog -->
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">Show and hide columns</h1>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                indeterminate
                name="optionsCheckboxes"
                id="optionsCheckboxes0"
                value="option0"
                checked
              />
              <label class="custom-control-label" for="optionsCheckboxes0">Select all</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes1"
                value="option1"
              />
              <label class="custom-control-label" for="optionsCheckboxes1">Thumbnail</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes2"
                value="option2"
              />
              <label class="custom-control-label" for="optionsCheckboxes2">Word mark</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes3"
                value="option3"
                checked
              />
              <label class="custom-control-label" for="optionsCheckboxes3">Review source</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes4"
                value="option4"
              />
              <label class="custom-control-label" for="optionsCheckboxes4">Review type</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes5"
                value="option5"
                checked
              />
              <label class="custom-control-label" for="optionsCheckboxes5">Review revision</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes6"
                value="option6"
              />
              <label class="custom-control-label" for="optionsCheckboxes6">Mentor</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes7"
                value="option7"
                checked
              />
              <label class="custom-control-label" for="optionsCheckboxes7">Class</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input
                type="checkbox"
                class="custom-control-input"
                disabled
                name="optionsCheckboxes"
                id="optionsCheckboxes8"
                value="option8"
                checked
              />
              <label class="custom-control-label" for="optionsCheckboxes8">Owner</label>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-primary">Done</button>
      </div>
    </div>
  </div>
</div>

Grouping

Row grouping allows users to show and hide sets of rows that share a similar attribute.

Module 1 height Event 2 height Date 3 height
keyboard_arrow_down Module: User (2)
keyboard_arrow_down Event: Create (2)
Users Create 10/21/14
Users Create 10/21/14
keyboard_arrow_right Event: Register (2)

Expandable rows

Expandable rows provide additional information about a row on demand.

Project name Description Price
keyboard_arrow_right  Invoice Add invoice confirmation $4,500
Examiner
IP, Sikyin / 69776 / 1742
SPE (multiple)
John Olaskey
Applicants
Roman Amirpur
Inventors
Disney Dale
Law firm
Clayton & Clayton Associates
keyboard_arrow_down  Payments Process payments using third party api $5,400
Examiner
IP, Sikyin / 69776 / 1742
SPE (multiple)
John Olaskey
Applicants
Roman Amirpur
Inventors
Disney Dale
Law firm
Clayton & Clayton Associates

Add new row

Add new row functionality provide link or button to add one or more rows into a table.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000

DataTables.net theming (optional)

DataTables.net is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Usage

The Javascript shown below is used to initialise the datatable:

    
  $(document).ready(function() {
    $('#example').DataTable();
  });

In addition to the above code, the following Javascript library files are loaded for use in this example:

Note: There is no need to include any additional DataTable.net CSS files.

Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sydney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sydney 37 2011/06/02 $95,400
Suki Burks Developer London 53 2009/10/22 $114,500
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Timothy Mooney Office Manager London 37 2008/12/11 $136,200
Jackson Bradshaw Director New York 65 2008/09/26 $645,750
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Hermione Butler Regional Director London 47 2011/03/21 $356,250
Lael Greer Systems Administrator London 21 2009/02/27 $103,500
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000
Donna Snider Customer Support New York 27 2011/01/25 $112,000

Example uses https://datatables.net/examples/styling/bootstrap4.html for demo purposes.