2.28.0
Data Tables are used to display static data in a tabular format.
Index
|
Value
|
Change
|
---|---|---|
DJIA | 20,975.78 | −36.50 |
Morningstar Small Cap | 6,016.39 | −5.70 |
Morningstar Wide Moat Focus | 7,752.66 | 15.49 |
— | — | — |
NASDAQ | 6,120.59 | 17.93 |
<table class="mds-data-table ">
<caption class="mds-data-table__caption">Here is where we want an accurate description about the data displayed and/or the table's intent</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="40%" scope="col">
<div class="mds-data-table__header-cell-inner ">
Index
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--right">
Value
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--right">
Change
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
DJIA
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
20,975.78
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−36.50
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Morningstar Small Cap
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
6,016.39
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−5.70
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Morningstar Wide Moat Focus
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
7,752.66
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
15.49
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
—
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
—
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
—
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
NASDAQ
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
6,120.59
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
17.93
</td>
</tr>
</tbody>
</table>
Use up to three levels of tree-style grouping for data that requires a visual hierarchy.
Index
|
Value
|
Change
|
---|---|---|
Parent | −5.70 | 8,850.42 |
Parent | −16.75 | 7,752.66 |
Parent | 15.49 | 2,396.92 |
Child | −2.46 | 20,975.78 |
Grand Child | −36.50 | 6,120.59 |
<table class="mds-data-table ">
<caption class="mds-data-table__caption">Here is where we want an accurate description about the data displayed and/or the table's intent</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="40%" scope="col">
<div class="mds-data-table__header-cell-inner ">
Index
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--right">
Value
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--right">
Change
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Parent
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−5.70
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
8,850.42
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Parent
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−16.75
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
7,752.66
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Parent
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
15.49
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
2,396.92
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell mds-data-table__cell--child" scope="row">
Child
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−2.46
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
20,975.78
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell mds-data-table__cell--sub-child" scope="row">
Grand Child
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−36.50
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
6,120.59
</td>
</tr>
</tbody>
</table>
aria-label
attributes on the <th>
elements to describe the parent/child relationship for screen readers, for example:<tr>
<th aria-label="Orange, has one nested child, tangerine" class="mds-data-table__cell" scope="row">Orange</th>
<td>...</td>
<td>...</td>
</tr>
<tr>
<th aria-label="Tangerine, child of orange" class="mds-data-table__cell mds-data-table__cell--child" scope="row">Tangerine</th>
<td>...</td>
<td>...</td>
</tr>
Index
|
Value
|
Change
|
---|---|---|
NASDAQ | 6,120.59 | 17.93 |
Morningstar Wide Moat Focus | 7,752.66 | 15.49 |
Morningstar Small Cap | 6,016.39 | −5.70 |
DJIA | 20,975.78 | −36.50 |
— | — | — |
<table class="mds-data-table " role="grid">
<caption class="mds-data-table__caption">Here is where we want an accurate description about the data displayed and/or the table's intent</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="40%" scope="col" aria-sort="descending">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-descending" tabindex="1" role="button">
Index
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col" aria-sort="none">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-none mds-data-table__header-cell-inner--right" tabindex="1" role="button">
Value
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col" aria-sort="none">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-none mds-data-table__header-cell-inner--right" tabindex="1" role="button">
Change
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row" role="row">
<td role="gridcell" class="mds-data-table__cell " scope="row">
NASDAQ
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
6,120.59
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
17.93
</td>
</tr>
<tr class="mds-data-table__row" role="row">
<td role="gridcell" class="mds-data-table__cell " scope="row">
Morningstar Wide Moat Focus
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
7,752.66
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
15.49
</td>
</tr>
<tr class="mds-data-table__row" role="row">
<td role="gridcell" class="mds-data-table__cell " scope="row">
Morningstar Small Cap
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
6,016.39
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
−5.70
</td>
</tr>
<tr class="mds-data-table__row" role="row">
<td role="gridcell" class="mds-data-table__cell " scope="row">
DJIA
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
20,975.78
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
−36.50
</td>
</tr>
<tr class="mds-data-table__row" role="row">
<td role="gridcell" class="mds-data-table__cell " scope="row">
—
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
—
</td>
<td role="gridcell" class="mds-data-table__cell mds-data-table__cell--right">
—
</td>
</tr>
</tbody>
</table>
Index
|
Value
|
Change
|
---|---|---|
Parent | −5.70 | 8,850.42 |
Parent | −16.75 | 7,752.66 |
Parent | 15.49 | 2,396.92 |
Child | −2.46 | 20,975.78 |
Grand Child | −36.50 | 6,120.59 |
<table class="mds-data-table ">
<caption class="mds-data-table__caption">Here is where we want an accurate description about the data displayed and/or the table's intent</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="40%" scope="col" aria-sort="descending">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-descending" tabindex="1" role="button">
Index
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col" aria-sort="none">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-none mds-data-table__header-cell-inner--right" tabindex="1" role="button">
Value
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col" aria-sort="none">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-none mds-data-table__header-cell-inner--right" tabindex="1" role="button">
Change
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Parent
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−5.70
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
8,850.42
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Parent
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−16.75
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
7,752.66
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Parent
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
15.49
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
2,396.92
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell mds-data-table__cell--child" scope="row">
Child
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−2.46
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
20,975.78
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell mds-data-table__cell--sub-child" scope="row">
Grand Child
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−36.50
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
6,120.59
</td>
</tr>
</tbody>
</table>
mds-data-table__header-cell-inner--selected-ascending
or mds-data-table__header-cell-inner--selected-descending
class.Sizing affects text size and internal padding. The default size is medium, and you can use modifier classes to make the data table smaller (mds-data-table--small
) or larger (mds-data-table--large
).
Index
|
Value
|
Change
|
---|---|---|
DJIA | 20,975.78 | −36.50 |
Morningstar Small Cap | 6,016.39 | −5.70 |
Morningstar Wide Moat Focus | 7,752.66 | 15.49 |
— | — | — |
NASDAQ | 6,120.59 | 17.93 |
Index
|
Value
|
Change
|
---|---|---|
DJIA | 20,975.78 | −36.50 |
Morningstar Small Cap | 6,016.39 | −5.70 |
Morningstar Wide Moat Focus | 7,752.66 | 15.49 |
— | — | — |
NASDAQ | 6,120.59 | 17.93 |
Index
|
Value
|
Change
|
---|---|---|
DJIA | 20,975.78 | −36.50 |
Morningstar Small Cap | 6,016.39 | −5.70 |
Morningstar Wide Moat Focus | 7,752.66 | 15.49 |
— | — | — |
NASDAQ | 6,120.59 | 17.93 |
<table class="mds-data-table mds-data-table--small">
<caption class="mds-data-table__caption">Here is where we want an accurate description about the data displayed and/or the table's intent</caption>
<thead class="mds-data-table__header">
<tr class="mds-data-table__row">
<th class="mds-data-table__header-cell" width="40%" scope="col">
<div class="mds-data-table__header-cell-inner ">
Index
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--right">
Value
</div>
</th>
<th class="mds-data-table__header-cell" width="30%" scope="col">
<div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--right">
Change
</div>
</th>
</tr>
</thead>
<tbody class="mds-data-table__body">
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
DJIA
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
20,975.78
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−36.50
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Morningstar Small Cap
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
6,016.39
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
−5.70
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
Morningstar Wide Moat Focus
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
7,752.66
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
15.49
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
—
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
—
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
—
</td>
</tr>
<tr class="mds-data-table__row">
<td class="mds-data-table__cell " scope="row">
NASDAQ
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
6,120.59
</td>
<td class="mds-data-table__cell mds-data-table__cell--right">
17.93
</td>
</tr>
</tbody>
</table>
<caption>
to describe table contents.<caption>
as the first DOM node after the <table>
element. By default, our .mds-data-table__caption
element is hidden. The purpose of the <caption>
element is to enable a better experience for people using screen readers.<th>
tags for cells containing header labels.<table>
set to clearly define separation between data sets.grid
, row
, gridcell
) if Data Table contains interactive actions such as buttons.role="button"
to identify column header as a clickable action for sorting. Include tabindex="1"
to allow keyboard tabbing.aria-sort
(ascending
, descending
, none
are possible values).aria-readonly="false"
if table is editable otherwise set true
.
Class
|
Applies to
|
Outcome
|
---|---|---|
|
|
Applies base layout and text treatments across a |
|
|
Adjusts styling to render a small data table. |
|
|
Adjusts styling to render a large data table. |
|
|
Visually indicates that a column’s contents have been sorted in ascending order. |
|
|
Visually indicates that a column’s contents have been sorted in descending order. |
|
|
Applies right-aligned text within a cell. Also handles the right alignment of the selected/sorted column indicator. |
|
|
Stretches horizontal padding in a cell by |
|
|
Stretches horizontal padding in a cell by |