Tables
beta

A table is a way to organize tabular data. The Design Language provides tables which can be displayed as a simple table — rows of columns — and also a table with hidden, nested rows to display on a user click or tap.
If your data can be defined as key:value pairs, see Definition Lists as a preferred alternative to tables.

Tables should be organized in a way that makes them easy to read, accessible and user-friendly. There are two options available for responsiveness:

  1. Allow overflow horizontal scrolling by wrapping your table in an element with the class table-responsive. <div class="table-responsive"><table class="table">…</table></div>.

  2. Make the table stack in mobile, like a definition list, by adding the class table-rows-stacked to the table itself. <table class="table table-rows-stacked">…</div>.

There are two table variations: normal and condensed. <table class="table">…</table> <table class="table table-condensed">…</table> Each variation can also have a hover state, where rows will respond to hover by changing color. <table class="table table-hover">…</table> <table class="table table-condensed table-hover">…</table>

Table cell alignment is based on the data. Numeric values should be right aligned, along with the header for that column. All non-numeric data, including dates, should be left aligned, along with the header for that column.

Normal

Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%
Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
[More rows]

Condensed

Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%
Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
[More rows]

Normal with Hover State

Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%
Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
[More rows]

Condensed with Hover State

Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%
Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
[More rows]

There are many use cases, such as Portfolios, where all the data should not be displayed on load, but only once the user requests it. The Design Language provides a table with hidden rows two-levels deep, to accomodate this. The first level has the class nested-single. <tr class="nested-single">…</tr>. The second level has the class nested-double. <tr class="nested-double">…</tr>. The nested rows can be more than one to a group; the last one in nested-double must also have the class nested-end. <tr class="nested-double">…</tr> <tr class="nested-double nested-end">…</tr>. Although the table below functions for demonstration purposes, the Design Language does not provide the JavaScript for functionality.

Normal with Hover State

+
Symbol
Last Price $ Change $ Change % Qty # Price Paid $ Day's Gain $ Total Gain $ Total Gain % Value $ Actions
keyboard_arrow_right ABRX 38.79 0.50 1.31% 100 32.25 1,700.00 16,750.00 3.07% 12,170.00
07/23/2017 217.06 -0.50 0.03% 1,000 201.00 1,569.02 28,367.72 7.45% 201,250.00
07/23/2017 217.06 -0.50 0.03% 1,000 201.00 1,569.02 28,367.72 7.45% 201,250.00
keyboard_arrow_right LOP 101.908 0.00 0.00% 1,000 10.00 0.00* 919.08 919.08% 1,019.08
keyboard_arrow_right 11/29/2016 101.908 0.00 0.00% 1,000 10.00 0.00 919.08 919.08% 1,019.08
May 10, ’17
$125 Straddle
245.97 1.68 0.85% 600 224.88 451.09 2,987.05 32.65% 173,284.26
May 10, ’17
$125 Straddle
245.97 1.68 0.85% 600 224.88 451.09 2,987.05 32.65% 173,284.26
May 10, ’17
$125 Straddle
245.97 1.68 0.85% 600 224.88 451.09 2,987.05 32.65% 173,284.26
keyboard_arrow_right UVIO 40.00 0.01 0.03% 1 0.00 0.01 40.00 0.00% 40.00
11/29/2016 40.00 0.01 0.03% 1 0.00 0.01 40.00 0.00% 40.00
+
Symbol
Last Price $ [More header cells] Value $ Actions
keyboard_arrow_right IBM 101.908 [More data cells] 1,019.08
keyboard_arrow_right 11/29/2016 101.908 [More data cells] 1,019.08
May 10, ’17
$125 Straddle
245.97 [More data cells] 173,284.26
May 10, ’17
$125 Straddle
245.97 [More data cells] 173,284.26
May 10, ’17
$125 Straddle
245.97 [More data cells] 173,284.26
[More rows]

Adding the class table-rows-stacked to a table will make it stack (like a definition list) in mobile. Each header will be repeated to the left of each cell in each row. Resize your browser to see the effect in the example below.

For tables that include a checkbox column, you can make the checkbox float left of the other stacked columns by adding class row-has-checkbox to each applicable row, and cell-has-checkbox to each cell which contains a ceckbox.

The React component library automatically maps each header to each cell. For other frameworks, see the jQuery example below for reference.

Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%
Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%
JavaScript snippet provided for reference only.
          // get corresponding header for each cell, and add an attribute `data-header` with it's text
// then, we render it with CSS content:attr()
$(function() {
  // each tr
  $(".table-rows-stacked tr").each(function() {
    // each td
    $(this)
      .find("td")
      .each(function() {
        var $td = $(this);
        // get corresponding header
        var $th = $td
          .closest("table")
          .find("th")
          .eq($td.index());
        // get text
        var headerText = $th.text();
        // apply attr
        if(headerText){
          $(this).attr("data-header", headerText);
        }
      });
  });
});

        

For tables that include a checkbox column, you can make the checkbox float left of the other stacked columns.

Just add class cell-has-checkbox to each cell containing a checkbox, and row-has-checkbox to each row containing a cell with a checkbox.

Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%
Symbol Fund Name Last Price 3 Yr. Return
GHI Grand Heights Industries $155.67 22.30%
DDI Data Driven InterOps $66.11 9.46%
SAF Safety Standards S&P 500 Equal Weight ETF $63.76 19.98%