Data Tables

Data Tables are used to display static data in a tabular format.

Variations

Default

Here is where we want an accurate description about the data displayed and/or the table's intent
Index	Value	Change
DJIA	20,975.78	−36.50
Morningstar Small Cap	8,850.42	−16.75
Morningstar Small Cap	6,016.39	−5.70
Morningstar Wide Moat Focus	7,752.66	15.49
—	—	—
NASDAQ	6,120.59	17.93

White Light Dark Black

<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&#39;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 false mds-data-table__header-cell--right"> Value </div>
            </th>
            <th class="mds-data-table__header-cell" width="30%" scope="col">
                <div class="mds-data-table__header-cell-inner false mds-data-table__header-cell--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 false mds-data-table__cell--right"> 20,975.78 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &minus;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 false mds-data-table__cell--right"> 8,850.42 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &minus;16.75 </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 false mds-data-table__cell--right"> 6,016.39 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &minus;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 false mds-data-table__cell--right"> 7,752.66 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 15.49 </td>
        </tr>
        <tr class="mds-data-table__row">
            <td class="mds-data-table__cell" scope="row"> &mdash; </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &mdash; </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &mdash; </td>
        </tr>
        <tr class="mds-data-table__row">
            <td class="mds-data-table__cell" scope="row"> NASDAQ </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 6,120.59 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 17.93 </td>
        </tr>
    </tbody>
</table>

Tree Table

Use up to three levels of tree-style grouping for data that requires a visual hierarchy.

Tree

Here is where we want an accurate description about the data displayed and/or the table's intent
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

White Light Dark Black

<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&#39;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 false mds-data-table__header-cell--right"> Value </div>
            </th>
            <th class="mds-data-table__header-cell" width="30%" scope="col">
                <div class="mds-data-table__header-cell-inner false mds-data-table__header-cell--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 false mds-data-table__cell--right"> &minus;5.70 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> &minus;16.75 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> 15.49 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> &minus;2.46 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> &minus;36.50 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 6,120.59 </td>
        </tr>
    </tbody>
</table>

To display more than three levels, coordinate with a System team member to extend the table's display capabilities.

Sortable

Default

Here is where we want an accurate description about the data displayed and/or the table's intent
Index	Value	Change
DJIA	20,975.78	−36.50
Morningstar Small Cap	8,850.42	−16.75
Morningstar Small Cap	6,016.39	−5.70
Morningstar Wide Moat Focus	7,752.66	15.49
—	—	—
NASDAQ	6,120.59	17.93

White Light Dark Black

<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&#39;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--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--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"> DJIA </td>
            <td role="gridcell" class="mds-data-table__cell false mds-data-table__cell--right"> 20,975.78 </td>
            <td role="gridcell" class="mds-data-table__cell false mds-data-table__cell--right"> &minus;36.50 </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 false mds-data-table__cell--right"> 8,850.42 </td>
            <td role="gridcell" class="mds-data-table__cell false mds-data-table__cell--right"> &minus;16.75 </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 false mds-data-table__cell--right"> 6,016.39 </td>
            <td role="gridcell" class="mds-data-table__cell false mds-data-table__cell--right"> &minus;5.70 </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 false mds-data-table__cell--right"> 7,752.66 </td>
            <td role="gridcell" class="mds-data-table__cell false 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"> &mdash; </td>
            <td role="gridcell" class="mds-data-table__cell false mds-data-table__cell--right"> &mdash; </td>
            <td role="gridcell" class="mds-data-table__cell false mds-data-table__cell--right"> &mdash; </td>
        </tr>
        <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 false mds-data-table__cell--right"> 6,120.59 </td>
            <td role="gridcell" class="mds-data-table__cell false mds-data-table__cell--right"> 17.93 </td>
        </tr>
    </tbody>
</table>

Tree

Here is where we want an accurate description about the data displayed and/or the table's intent
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

White Light Dark Black

<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&#39;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--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--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 false mds-data-table__cell--right"> &minus;5.70 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> &minus;16.75 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> 15.49 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> &minus;2.46 </td>
            <td class="mds-data-table__cell false 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 false mds-data-table__cell--right"> &minus;36.50 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 6,120.59 </td>
        </tr>
    </tbody>
</table>

Highlight the selected/sorted column with a caret and rule by adding a .mds-data-table__header-cell-inner--selected-ascending or .mds-data-table__header-cell-inner--selected-descending class.

Sizing

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).

Small

Here is where we want an accurate description about the data displayed and/or the table's intent
Index	Value	Change
DJIA	20,975.78	−36.50
Morningstar Small Cap	8,850.42	−16.75
Morningstar Small Cap	6,016.39	−5.70
Morningstar Wide Moat Focus	7,752.66	15.49
—	—	—
NASDAQ	6,120.59	17.93

Medium

Here is where we want an accurate description about the data displayed and/or the table's intent
Index	Value	Change
DJIA	20,975.78	−36.50
Morningstar Small Cap	8,850.42	−16.75
Morningstar Small Cap	6,016.39	−5.70
Morningstar Wide Moat Focus	7,752.66	15.49
—	—	—
NASDAQ	6,120.59	17.93

Large

Here is where we want an accurate description about the data displayed and/or the table's intent
Index	Value	Change
DJIA	20,975.78	−36.50
Morningstar Small Cap	8,850.42	−16.75
Morningstar Small Cap	6,016.39	−5.70
Morningstar Wide Moat Focus	7,752.66	15.49
—	—	—
NASDAQ	6,120.59	17.93

White Light Dark Black

<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&#39;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 false mds-data-table__header-cell--right"> Value </div>
            </th>
            <th class="mds-data-table__header-cell" width="30%" scope="col">
                <div class="mds-data-table__header-cell-inner false mds-data-table__header-cell--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 false mds-data-table__cell--right"> 20,975.78 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &minus;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 false mds-data-table__cell--right"> 8,850.42 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &minus;16.75 </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 false mds-data-table__cell--right"> 6,016.39 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &minus;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 false mds-data-table__cell--right"> 7,752.66 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 15.49 </td>
        </tr>
        <tr class="mds-data-table__row">
            <td class="mds-data-table__cell" scope="row"> &mdash; </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &mdash; </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> &mdash; </td>
        </tr>
        <tr class="mds-data-table__row">
            <td class="mds-data-table__cell" scope="row"> NASDAQ </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 6,120.59 </td>
            <td class="mds-data-table__cell false mds-data-table__cell--right"> 17.93 </td>
        </tr>
    </tbody>
</table>

Guidelines

Use When

Displaying data in a tabular format.
Displaying one or more columns of data.

Visual Language

Always left align alphabetic columns.
Always right align numeric columns.
Place the primary identifying column, often “Name”, leftmost in the table.

Do use an em-dash (—) in null data cells.

Don‘t use any other dash, like hyphen, en-dash, or minus.

Do use the minus sign (−) to represent negative values.

Don‘t use any other dash, like hyphen or em-dash.

Editorial

Try for clear, short column headers.
Preferably one line, but two is OK.
Never spell out numbers.
Put currency and other symbols inside parentheses when technically possible, i.e., “USD ($)”.

Accessibility

Always use a <caption> to describe table contents.
Always place the <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.
Always include table header labels.
Always use <th> tags for cells containing header labels.
Refrain from setting fixed pixel widths on tables. Instead, let the browser size the table.
Avoid setting heights on table cells. They need to be able to expand to fit the contents within them.
Never put a pixel width on a cell. Instead, use a percentage.
If you have multiple tables in succession, do not combine all the data into the same table. Start a new <table> set to clearly define separation between data sets.
Never use tables for layout purposes.
Use ARIA roles (grid, row, gridcell) if Data Table contains interactive actions such as buttons.
Always add role="button" to identify column header as a clickable action for sorting. Include tabindex="1" to allow keyboard tabbing.
Add aria-sort (ascending, descending, none are possible values).
Add aria-readonly="false" if table is editable otherwise set true.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-data-table`	`<table>`	Applies base layout and text treatments across a `<table>`.
`.mds-data-table--small`	`.mds-data-table`	Adjusts styling to render a small data table.
`.mds-data-table--large`	`.mds-data-table`	Adjusts styling to render a large data table.
`.mds-data-table__header-cell-inner--selected-ascending`	`.mds-data-table__header-cell-inner`	Visually indicates that a column’s contents have been sorted in ascending order.
`.mds-data-table__header-cell-inner--selected-descending`	`.mds-data-table__header-cell-inner`	Visually indicates that a column’s contents have been sorted in descending order.
`.mds-data-table__header-cell--right, .mds-data-table__cell--right`	`.mds-data-table__header-cell, .mds-data-table__cell`	Applies right-aligned text within a cell. Also handles the right alignment of the selected/sorted column indicator on `.mds-data-table__header-cell-inner`.
`.mds-data-table__cell--child`	`.mds-data-table__cell`	Stretches horizontal padding in a cell by `25px`.
`.mds-data-table__cell--sub-child`	`.mds-data-table__cell`	Stretches horizontal padding in a cell by `40px`.

Additional Resources

Link Template