logo
Digital Design System
git icon

Tables

Below you will find the different definitions and options to tables.

Table of contents

Overview

Global Definition

Tables are used to display tabular data for users. We recommend using third party libraries/frameworks when utalizing our tables, as we have not built tables to be functional in our design system. Instead we use our own markup and make use of the following libraries, when you would like to add functionality like pagination, search, sort etc.

case number
subject
status
shared case
link
last mts update
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM

Sizes

Tables are setup to support 3 differnt sizes (Based on padding). Our default tables are large, followed by medium and small tables.

Large

To utalize large tables, use the components default class msds-table.

case number
subject
status
shared case
link
last mts update
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
Medium

To utalize medium tables, add an additional modifier class to the components wrapper tag msds-table msds-table--medium.

case number
subject
status
shared case
last mts update
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
Small

To utalize small tables, add an additional modifier class to the components wrapper tag msds-table msds-table--small.

case number
subject
status
shared case
last mts update
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM

Default Table

To utalize tables from the design system, copy the markup below.

case number
subject
status
shared case
link
last mts update
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM 
<div class="container">
  <div class="row">
    <div class="col-12">
      <table class="msds-table">
        <thead class="msds-table__head">
          <tr class="msds-table__head-row">
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                case number
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                subject
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                status
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                shared case
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                link
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                last mts update
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody class="msds-table__body">
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">MSC374780</td>
            <td class="msds-table__body-row-data">“Test 11”</td>
            <td class="msds-table__body-row-data">Awaiting MTS</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data"><a href="#">Link</a></td>
            <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
          </tr>
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">MSC103913</td>
            <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
            <td class="msds-table__body-row-data">Closed</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data"><a href="#">Link</a></td>
            <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
          </tr>
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">MSC374780</td>
            <td class="msds-table__body-row-data">“Test 11”</td>
            <td class="msds-table__body-row-data">Awaiting MTS</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data"><a href="#">Link</a></td>
            <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
          </tr>
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">MSC103913</td>
            <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
            <td class="msds-table__body-row-data">Closed</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data"><a href="#">Link</a></td>
            <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
          </tr>
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">MSC374780</td>
            <td class="msds-table__body-row-data">“Test 11”</td>
            <td class="msds-table__body-row-data">Awaiting MTS</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data"><a href="#">Link</a></td>
            <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
          </tr>
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">MSC103913</td>
            <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
            <td class="msds-table__body-row-data">Closed</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data"><a href="#">Link</a></td>
            <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Default Table With Dark Headers

The light themed tables have an additional theme, where the headers of the table are blue instead of grey. To make use of this table, add an additional modifier class to the components wrapper tag msds-table msds-table--dark.

case number
subject
status
shared case
last mts update
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM

Tables Expandable Rows

Tables can have rows that are grouped together, that are hidden until the user expands the rows.

case number
subject
status
shared case
last mts update
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC65463 “Test 13” Comfirmed MTS Yes 9/10/2019 10:32:01 AM
MSC546421 “Test 22" Pending MTS No 12/12/2020 5:12:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC65463 “Test 13” Comfirmed MTS Yes 9/10/2019 10:32:01 AM 
<div class="container">
  <div class="row">
    <div class="col-12">
      <table class="msds-table">
        <thead class="msds-table__head">
          <tr class="msds-table__head-row">
            <th class="msds-table__header"></th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                case number
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                subject
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                status
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                shared case
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
            <th class="msds-table__header">
              <div class="msds-table__header-headline">
                last mts update
                <span class="msds-table__header-order-icon">
                  <svg class="msds-table__header-descending-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                  <svg class="msds-table__header-acesnding-order-icon">
                    <use href="../../msds-spritemap.svg#right-arrow" />
                  </svg>
                </span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody class="msds-table__body">
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">
              <svg class="msds-table__body-row-data-expandable-icon" data-expandable-parent="1">
                <use href="../../msds-spritemap.svg#right-arrow" />
              </svg>
            </td>
            <td class="msds-table__body-row-data">MSC374780</td>
            <td class="msds-table__body-row-data">“Test 11”</td>
            <td class="msds-table__body-row-data">Awaiting MTS</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data">8/1/2019 11:18:01 AM</td>
          </tr>
          <tr class="msds-table__body-row msds-table__body-row-expandable" data-expandable-child="1">
            <td class="msds-table__body-row-data"></td>
            <td class="msds-table__body-row-data">MSC65463</td>
            <td class="msds-table__body-row-data">“Test 13”</td>
            <td class="msds-table__body-row-data">Comfirmed MTS</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data">9/10/2019 10:32:01 AM</td>
          </tr>
          <tr class="msds-table__body-row msds-table__body-row-expandable" data-expandable-child="1">
            <td class="msds-table__body-row-data"></td>
            <td class="msds-table__body-row-data">MSC546421</td>
            <td class="msds-table__body-row-data">“Test 22"</td>
            <td class="msds-table__body-row-data">Pending MTS</td>
            <td class="msds-table__body-row-data">No</td>
            <td class="msds-table__body-row-data">12/12/2020 5:12:01 AM</td>
          </tr>
          <tr class="msds-table__body-row">
            <td class="msds-table__body-row-data">
              <svg class="msds-table__body-row-data-expandable-icon msds-table--body-row-data-expandable-icon-active" data-expandable-parent="2">
                <use href="../../msds-spritemap.svg#right-arrow" />
              </svg>
            </td>
            <td class="msds-table__body-row-data">MSC103913</td>
            <td class="msds-table__body-row-data">Test 4ward2SF - 1 email address</td>
            <td class="msds-table__body-row-data">Closed</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data">1/1/0001 12:00:00 AM</td>
          </tr>
          <tr class="msds-table__body-row msds-table__body-row-expandable msds-table--body-row-expandable-visible" data-expandable-child="2">
            <td class="msds-table__body-row-data"></td>
            <td class="msds-table__body-row-data">MSC65463</td>
            <td class="msds-table__body-row-data">“Test 13”</td>
            <td class="msds-table__body-row-data">Comfirmed MTS</td>
            <td class="msds-table__body-row-data">Yes</td>
            <td class="msds-table__body-row-data">9/10/2019 10:32:01 AM</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Tables Dark Themed

Tables come in a second layout theme called a dark theme. To make use of the dark theme, add an additional modifier class to the components wrapper tag msds-table msds-table--dark-theme.

case number
subject
status
shared case
link
last mts update
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM
MSC374780 “Test 11” Awaiting MTS Yes Link 8/1/2019 11:18:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes Link 1/1/0001 12:00:00 AM

Tables Dark Themed Expandable Rows

Dark themed tables can also make use of the expandable tables styling in a dark theme. To make use of dark themed expading rows, add an additional modifier class to the components wrapper tag msds-table msds-table--dark-theme.

case number
subject
status
shared case
last mts update
MSC374780 “Test 11” Awaiting MTS Yes 8/1/2019 11:18:01 AM
MSC65463 “Test 13” Comfirmed MTS Yes 9/10/2019 10:32:01 AM
MSC546421 “Test 22" Pending MTS No 12/12/2020 5:12:01 AM
MSC103913 Test 4ward2SF - 1 email address Closed Yes 1/1/0001 12:00:00 AM
MSC65463 “Test 13” Comfirmed MTS Yes 9/10/2019 10:32:01 AM