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.

Note: Resize window to view components at various breakpoints.

Tables should be organized in a way that makes them easy to read, accessible and user-friendly. Make them responsive by wrapping your table in an element with the class table-responsive. <div class="table-responsive">…</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]