Tables

Tables display related data in a series of columns and rows to allow users to compare, analyze or edit large sets of information.

Default Table

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321


When to Use

  • Use tables to display large sets of primarily text-based data that are best viewed in a single display for the purposes of comparison and/or understanding relationships between different aspects of the data.

Variations

Usage

  • Tables may appear inside of panels but are not required to be placed there. Placement inside of a panel is not recommended when tables span the full width of a screen. However, smaller tables and/or sets of multiple tables on a screen may be placed inside panels to create a more balanced layout.
  • Actions related to the data set can appear in a toolbar in the upper right. Actions related to a single row may appear as icons or buttons in the far right column of the row. Small buttons appear in the default style table and extra small buttons appear in condensed tables. (See buttons for details.)

Variations

Default Table With Editable Fields

Table Title

Icon Flight No. Departure Time Arrival Time Actions


Default Table With Editable Rows

Table Title

Flight No. Departs Arrives


Condensed Table

A condensed table is recommended when the user requires access to large amounts of data in a single view for comparison, analysis or editing

Table Title

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321


Condensed Table With Editable Fields

Table Title

Icon Flight No. Departure Time Arrival Time Actions


Spreadsheet Table

A spreadsheet table behaves more like a traditional spreadsheet and can be navigated and edited using the keyboard.

Table Title

Flight No. Departs Arrives Meal Served Actions


Messaging

Table Title

Icon Flight No. Departure Time Arrival Time Actions
Flight invalid
Time Subject To Change


Table Title

Icon Flight No. Departure Time Arrival Time Actions
Update confirmed.
Time Subject To Change


Table Title

Flight No.
Locations Departs Arrives
Meal Served Actions
Flight is invalid. Flight is oversold. Flight is confirmed.
Flight is pending.


Disabled Rows, Columns and Cells

Table Title

Flight No. Departs Arrives


Table Title

Flight No. Departs Arrives


Resizable Columns

Table Title

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321


Table Title

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321


Expand/Collapse Rows

Table Title

Price Description Details Other Actions

$289

 Row Title

Lorem ipsum Aliqua cupidatat cillum eu eu tempor consequat voluptate Ut nostrud tempor ut dolore mollit dolor eiusmod dolore.

Lorem ipsum Dolor aute dolore ex Excepteur dolore laborum ut consequat mollit quis in aute cupidatat officia sunt laborum enim cillum voluptate aliqua proident exercitation quis aute ad aliqua non dolor ullamco ut ex adipisicing cupidatat.

Consectetur elit aute magna dolor tempor mollit sint qui proident aute voluptate eu ullamco tempor in Ut sed exercitation adipisicing eu incididunt sunt ullamco.

Est proident occaecat esse nostrud quis anim id laboris eiusmod laborum aute pariatur sit occaecat eiusmod proident amet elit nisi officia Ut sed adipisicing et.

Exercitation nulla nisi enim mollit in nulla ex voluptate ad in qui ullamco fugiat veniam.

Lorem ipsum Occaecat est amet sit dolor quis consectetur veniam eu in. Lorem ipsum Duis in ut consequat.


Additional Functionality

Sorting Tabular Data

  • If column sorting is enabled, sort the most important data by default, and display an arrow in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon.
  • Column headings are sortable based on data type. Numbers (value: low/high), Text (alphabetical: ascending/descending), and Time (chronological: most recent/least recent).
  • Non-sortable columns such as actions or contextual icons will not feature the sortable arrow on hover.

Developer Notes

Default Table

Default Table

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321 
<section class="spark-table col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Default Table
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__checkbox spark-table__select-all">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            DL0431
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            AA1321
          </td>
          <td>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.spark-table').sparkTable();

Developer Notes

A table component is constructed using the .spark-table class. An optional table header can be added using the .spark-table__header class. This allows for a title and navigation buttons to be placed above the table itself. These are created using the .spark-table__title and .spark-table__nav classes, respectively.

The table element should be wrapped in a container with the class .spark-table__scroll. This allows for content which is too wide for a display to become scrollable. If this container is omitted, the table cells may wrap in unexpected ways.

The JavaScript component can be instantiated using new Spark.Table(el). This handles selecting individual rows and the “select all” functionality. If you cannot or choose not to use the JavaScript component, simply adding the .active class to a <tr> will give it the active styling.

Default Table With Editable Fields

Table Title

Icon Flight No. Departure Time Arrival Time Actions 
<section class="spark-table col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            <input type="text" value="DL0431" name="flight[]">
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Developer Notes

To create a table with editable fields, use input and select fields inside the appropriate td elements.

Use buttons with a class of .spark-btn--sm when displaying buttons in a default-style table.

Default Table With Editable Rows

Table Title

Flight No. Departs Arrives 
<section class="spark-table spark-table--edit-rows col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
     Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departs
          </th>
          <th data-sort class="spark-table__no-border">
            Arrives
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="DL0431" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]">
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="ATL" name="departs[]">
          </td>
          <td>
            <input type="text" value="SFO" name="arrives[]">
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="CDG" name="departs[]">
          </td>
          <td>
            <input type="text" value="BER" name="arrives[]">
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]">
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el, {
  confirmDeleteCallback: function(row, done) {},
  onRowSave: function(index, row) {},
  onRowDelete: function(index, row) {}
});

// jQuery
$('.table).sparkTable({
  confirmDeleteCallback: function(row, done) {},
  onRowSave: function(index, row) {},
  onRowDelete: function(index, row) {}
});

Developer Notes

To create a table with editable rows, add the .spark-table--edit-rows class to your table and create buttons to toggle the edit and delete actions.

A td with the .spark-table__actions--icons class should contain buttons with the .spark-table__edit-row and spark-table__delete-row classes. These buttons will initiate editing or deletion of a row. The component can be passed confirmDeleteCallback, onRowSave and/or onRowDelete functions to be run when the delete button is clicked, the save button is clicked, and the row deletion has been confirmed.

Editing is confirmed or canceled by two additional buttons. They should be housed in a container with a class of .spark-table__edit-actions. They should have classes of spark-table__edit-row-cancel and spark-table__edit-row-save.

Condensed Table

A condensed table is used only in high-density data displays.

Table Title

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321 
<section class="spark-table spark-table--condensed col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane"></i>
          </td>
          <td>
            DL0431
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane"></i>
          </td>
          <td>
            AA1321
          </td>
          <td>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.spark-table').sparkTable();

Developer Notes

To create a condensed table, simply add the .spark-table--condensed class to your element.

Condensed Table With Editable Fields

Table Title

Icon Flight No. Departure Time Arrival Time Actions 
<section class="spark-table spark-table--condensed col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane"></i>
          </td>
          <td>
            <input type="text" value="DL0431" name="flight[]">
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane"></i>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Developer Notes

To create a table with editable fields, use input and select fields inside the appropriate td elements.

Use .spark-btn--xs when displaying buttons in a condensed table.

Spreadsheet Table

A spreadsheet table behaves more like a traditional spreadsheet and can be navigated and edited using the keyboard.

Table Title

Flight No. Departs Arrives Meal Served Actions 
<section class="spark-table spark-table--spreadsheet col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departs
          </th>
          <th data-sort>
            Arrives
          </th>
          <th data-sort>
            Meal Served
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="DL0431" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]">
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="ATL" name="departs[]">
          </td>
          <td>
            <input type="text" value="SFO" name="arrives[]">
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no" selected>No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="CDG" name="departs[]">
          </td>
          <td>
            <input type="text" value="BER" name="arrives[]">
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]">
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Developer Notes

To create a spreadsheet table, add the .spark-table--spreadsheet class to your element. Spreadsheet tables are inherently editable. td elements should contain input and select elements that hold their values.

Messaging

Table Title

Icon Flight No. Departure Time Arrival Time Actions
Flight invalid
Time Subject To Change 
<section class="spark-table col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <div>
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td data-error>
            <span class="spark-table__status-wrapper">
              <span class="spark-table__status-icon"></span>
              <input type="text" value="DL0431" name="flight[]">
              <span class="spark-table__status-message">Flight invalid</span>
            </span>
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td data-warning>
            <a class="spark-table__status-icon spark-tooltip">
              <span class="spark-tooltip__content--bottom" role="tooltip">
                Time Subject To Change
              </span>
            </a>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Table Title

Icon Flight No. Departure Time Arrival Time Actions
Update confirmed.
Time Subject To Change 
<section class="spark-table spark-table--condensed col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td data-success>
            <span class="spark-table__status-wrapper">
              <span class="spark-table__status-icon"></span>
              <input type="text" value="DL0431" name="flight[]">
              <span class="spark-table__status-message">Update confirmed.</span>
            </span>
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td data-warning>
            <a class="spark-table__status-icon spark-tooltip">
              <span class="spark-tooltip__content--bottom" role="tooltip">
                Time Subject To Change
              </span>
            </a>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Table Title

Flight No.
Locations Departs Arrives
Meal Served Actions
Flight is invalid. Flight is oversold. Flight is confirmed.
Flight is pending. 
<section class="spark-table spark-table--spreadsheet col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th colspan="2" class="spark-table-heading">
            <div class="spark-table-heading__group">
              <span class="spark-table-heading__full">Locations</span>
              <span class="spark-table-heading__piece" data-sort>Departs</span>
              <span class="spark-table-heading__piece" data-sort>Arrives</span>
            </div>
          </th>
          <th data-sort>
            Meal Served
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="DL0431" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]">
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td data-error>
            <span class="spark-table__status-wrapper">
              <span class="spark-table__status-icon"></span>
              <input type="text" value="AA1321" name="flight[]">
              <span class="spark-table__status-message">Flight is invalid.</span>
            </span>
          </td>
          <td data-warning>
            <span class="spark-table__status-wrapper">
              <span class="spark-table__status-icon"></span>
              <input type="text" value="ATL" name="departs[]">
              <span class="spark-table__status-message">Flight is oversold.</span>
            </span>
          </td>
          <td data-success>
            <span class="spark-table__status-wrapper">
              <span class="spark-table__status-icon"></span>
              <input type="text" value="SFO" name="arrives[]">
              <span class="spark-table__status-message">Flight is confirmed.</span>
            </span>
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no" selected>No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td data-info>
            <span class="spark-table__status-wrapper">
              <span class="spark-table__status-icon"></span>
              <input type="text" value="CDG" name="departs[]">
              <span class="spark-table__status-message">Flight is pending.</span>
            </span>
          </td>
          <td>
            <input type="text" value="BER" name="arrives[]">
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]">
          </td>
          <td>
            <select name="meal[]">
              <option value="yes">Yes</option>
              <option value="no">No</option>
            </select>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Edit Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Developer Notes

Messaging on a table cell is accomplished by setting a data-error, data-warning, data-success or data-info attribute on a td. This is a similar methodology to how Text Inputshandle their messaging. In addition to the attribute, a container with a class of .spark-table__message should be inside the td with the message content.

While the iconography is always visible, the message is only shown when the associated input element receives focus.

Disabled Rows, Columns and Cells

Table Title

Flight No. Departs Arrives 
<section class="spark-table spark-table--edit-rows col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departs
          </th>
          <th data-sort class="spark-table__no-border">
            Arrives
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="DL0431" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]">
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="ATL" name="departs[]">
          </td>
          <td>
            <input type="text" value="SFO" name="arrives[]">
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
        <tr class="spark-table__disabled-row">
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="CDG" name="departs[]">
          </td>
          <td>
            <input type="text" value="BER" name="arrives[]">
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]" disabled>
          </td>
          <td class="spark-table__actions--icons">
            <button class="spark-icon-pencil spark-icon spark-btn--icon spark-icon--md spark-table__edit-row" title="Edit"></button>
            <button class="spark-icon-trash spark-icon spark-btn--icon spark-icon--md spark-table__delete-row" title="Delete"></button>
            <div class="spark-table__edit-actions">
              <button class="spark-btn spark-btn--secondary spark-btn--xs spark-table__edit-row-cancel">Cancel</button>
              <button class="spark-btn spark-btn--xs spark-table__edit-row-save">Save</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Table Title

Flight No. Departs Arrives 
<section class="spark-table spark-table--spreadsheet col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort class="spark-table__disabled-column">
            Departs
          </th>
          <th data-sort>
            Arrives
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="DL0431" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]" disabled>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="ATL" name="departs[]">
          </td>
          <td>
            <input type="text" value="SFO" name="arrives[]">
          </td>
        </tr>
        <tr class="spark-table__disabled-row">
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="CDG" name="departs[]">
          </td>
          <td>
            <input type="text" value="BER" name="arrives[]">
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td>
            <input type="text" value="AA1321" name="flight[]">
          </td>
          <td>
            <input type="text" value="DFW" name="departs[]">
          </td>
          <td>
            <input type="text" value="DTW" name="arrives[]" disabled>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Developer Notes

Rows on a table can be disabled by adding the .spark-table__disabled-row class to the appropriate tr element. Fields can be disabled by adding the disabled attribute to an input or select element. Columns can be disabled by adding the .spark-table__disabled-column to the appropriate th in the thead element.

Resizable Columns

Table Title

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321 
<section class="spark-table spark-table--resizable col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            DL0431
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane spark-icon--lg"></i>
          </td>
          <td>
            AA1321
          </td>
          <td>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Table Title

Icon Flight No. Departure Time Arrival Time Actions
DL0431
AA1321 
<section class="spark-table spark-table--condensed spark-table--resizable col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__select-all spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th class="spark-text-center">
            Icon
          </th>
          <th data-sort="asc">
            Flight No.
          </th>
          <th data-sort>
            Departure <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th data-sort>
            Arrival <span class="spark-hidden--lte-md">Time</span>
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane"></i>
          </td>
          <td>
            DL0431
          </td>
          <td>
            <time datetime="2015-12-07T13:51:54.195Z">December 7, 2015 at 1:51 PM</time>
          </td>
          <td>
            <time datetime="2015-12-08T02:10:51.195Z">December 8, 2015 at 2:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
        <tr>
          <td class="spark-table__checkbox">
            <label class="spark-checkbox spark-checkbox--sm">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <i class="spark-icon-airplane"></i>
          </td>
          <td>
            AA1321
          </td>
          <td>
            <time datetime="2015-12-06T09:23:54.195Z">December 6, 2015 at 9:23 AM</time>
          </td>
          <td>
            <time datetime="2015-12-06T11:10:51.195Z">December 6, 2015 at 11:10 AM</time>
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--xs">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Developer Notes

Add a class of .spark-table--resizable to make columns resizable on a table. Checkbox columns will not be resizable.

Expand/Collapse Rows

Table Title

Price Description Details Other Actions

$289

 Row Title

Lorem ipsum Aliqua cupidatat cillum eu eu tempor consequat voluptate Ut nostrud tempor ut dolore mollit dolor eiusmod dolore.

Lorem ipsum Dolor aute dolore ex Excepteur dolore laborum ut consequat mollit quis in aute cupidatat officia sunt laborum enim cillum voluptate aliqua proident exercitation quis aute ad aliqua non dolor ullamco ut ex adipisicing cupidatat.

Consectetur elit aute magna dolor tempor mollit sint qui proident aute voluptate eu ullamco tempor in Ut sed exercitation adipisicing eu incididunt sunt ullamco.

Est proident occaecat esse nostrud quis anim id laboris eiusmod laborum aute pariatur sit occaecat eiusmod proident amet elit nisi officia Ut sed adipisicing et.

Exercitation nulla nisi enim mollit in nulla ex voluptate ad in qui ullamco fugiat veniam.

Lorem ipsum Occaecat est amet sit dolor quis consectetur veniam eu in. Lorem ipsum Duis in ut consequat. 
<section class="spark-table col-xs-12">
  <header class="spark-table__header">
    <h4 class="spark-table__title">
      Table Title
    </h4>
    <nav class="spark-table__nav">
      <div class="spark-toolbar spark-toolbar--icon" tabindex="1">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item spark-tooltip" label="Print" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Print</span>
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Save Results</li>
                <li>Export to Excel</li>
                <li>Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Filter" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Filter</span>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item spark-tooltip" label="Delete" tabindex="-1">
            <span class="spark-tooltip__content--bottom" role="tooltip">Delete</span>
            <div class="spark-icon-trash spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </nav>
  </header>
  <div class="spark-table__scroll">
    <table role="grid">
      <thead>
        <tr>
          <th class="spark-table__checkbox spark-table__select-all">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </th>
          <th data-sort class="spark-text-center">
            Price
          </th>
          <th data-sort="asc">
            Description
          </th>
          <th data-sort>
            Details
          </th>
          <th data-sort>
            Other
          </th>
          <th class="spark-text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="spark-table__row--align-top">
          <td class="spark-table__checkbox">
            <label class="spark-checkbox">
              <input type="checkbox" class="spark-checkbox__input">
              <span class="spark-checkbox__box"></span>
            </label>
          </td>
          <td class="spark-text-center">
            <h2 class="spark-info">$289</h2>
          </td>
          <td class="spark-table-expand">
            <span class="spark-epsilon">Row Title</span>
            <p class="spark-margin-bottom--sm">
              Lorem ipsum Aliqua cupidatat cillum eu eu tempor consequat voluptate Ut nostrud tempor ut dolore mollit dolor eiusmod dolore.
            </p>
            <div class="spark-expand__content spark-margin-top">
              <p>
                Lorem ipsum Dolor aute dolore ex Excepteur dolore laborum ut consequat mollit quis in aute cupidatat officia sunt laborum enim cillum voluptate aliqua proident exercitation quis aute ad aliqua non dolor ullamco ut ex adipisicing cupidatat.
              </p>
              <p>
                Consectetur elit aute magna dolor tempor mollit sint qui proident aute voluptate eu ullamco tempor in Ut sed exercitation adipisicing eu incididunt sunt ullamco.
              </p>
              <p>
                Est proident occaecat esse nostrud quis anim id laboris eiusmod laborum aute pariatur sit occaecat eiusmod proident amet elit nisi officia Ut sed adipisicing et.
              </p>
              <p>
                Exercitation nulla nisi enim mollit in nulla ex voluptate ad in qui ullamco fugiat veniam.
              </p>
            </div>
            <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__hide--expanded spark-margin-top">View Details<span class="spark-expand__toggle-caret"></span></button>
            <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__show--expanded spark-margin-top">Hide Details<span class="spark-expand__toggle-caret"></span></button>
          </td>
          <td>
            Lorem ipsum Occaecat est amet sit dolor quis consectetur veniam eu in.
          </td>
          <td>
            Lorem ipsum Duis in ut consequat.
          </td>
          <td class="spark-table__actions spark-text-center">
            <button class="spark-btn spark-btn--sm">Book Flight</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
// Vanilla JS
var el = document.querySelector('.spark-table');
var tableInstance = new Spark.Table(el);

// jQuery
$('.table).sparkTable();

Developer Notes

Add a class of .spark-table-expand to a td to make it expandable. This will create a new instance of the Expand/Collapse component. Content to show/hide should have a class of spark-expand__content, and the buttons to toggle expanding and collapsing should have a class of spark-expand__toggle.

Additional Functionality

Sorting Tabular Data

  • If column sorting is enabled, sort the most important data by default, and display an arrow in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon.
  • Column headings are sortable based on data type. Numbers (value: low/high), Text (alphabetical: ascending/descending), and Time (chronological: most recent/least recent).
  • Non-sortable columns such as actions or contextual icons will not feature the sortable arrow on hover.

Developer Notes

Sorting styling is enabled, but the JavaScript component does not have any built-in sorting functionality. This may change in future releases of Spark.