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
open-new Copy to Clipboard Press Ctrl + C to copy 
<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%">
                <div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-descending">Index</div>
            </th>
            <th class="mds-data-table__header-cell mds-data-table__header-cell--right" width="30%">
                <div class="mds-data-table__header-cell-inner">Value</div>
            </th>
            <th class="mds-data-table__header-cell mds-data-table__header-cell--right" width="30%">
                <div class="mds-data-table__header-cell-inner ">Change</div>
            </th>
        </tr>
    </thead>
    <tbody class="mds-data-table__body">
        <tr class="mds-data-table__row">
            <td class="mds-data-table__cell">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">Morningstar Small Cap</td>
            <td class="mds-data-table__cell mds-data-table__cell--right">8,850.42</td>
            <td class="mds-data-table__cell mds-data-table__cell--right">-16.75</td>
        </tr>
        <tr class="mds-data-table__row">
            <td class="mds-data-table__cell">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">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">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>

Tree Table

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

Here is where we want an accurate description about the data displayed and/or the table's intent
Index
Change
Value
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
open-new Copy to Clipboard Press Ctrl + C to copy 
<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%">
                <div class="mds-data-table__header-cell-inner mds-data-table__header-cell-inner--selected-descending">Index</div>
            </th>
            <th class="mds-data-table__header-cell mds-data-table__header-cell--right" width="30%">
                <div class="mds-data-table__header-cell-inner ">Change</div>
            </th>
            <th class="mds-data-table__header-cell mds-data-table__header-cell--right" width="30%">
                <div class="mds-data-table__header-cell-inner">Value</div>
            </th>
        </tr>
    </thead>
    <tbody class="mds-data-table__body">
        <tr class="mds-data-table__row">
            <td class="mds-data-table__cell">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">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">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">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">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>
  • To display more than three levels, coordinate with a System team member to extend the table's display capabilities.

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.

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

dont use any other dash, like hyphen, en-dash, or minus.

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

Behaviors

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

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.

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__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

©2017 Morningstar, Inc. All rights reserved. Terms of Use