SDC Pattern Library

Table

Rationale

  • We use the table element to present tabular data in two dimensions.

  • Users may need to sort the rows of data based on values in a particular column.

Research

  • Any research undertaken related to this item - documented outcomes

Usage

  • Where and how to use the table element.

Example 1:

Screenshot of a data table
A table containing a list of secure messages

This is a work in progress. The subject as a link isn’t part of the pattern.

<!-- Basic table -->
<table class="table">
    <thead class="table--head">
        <th scope="col" class="table--header--cell">Column A</th>
        <th scope="col" class="table--header--cell">Column B</th>
    </thead>
    <tbody>
        <tr class="table--row">
            <td class="table--cell">Cell A1</td>
            <td class="table--cell">Cell B1</td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Cell A2</td>
            <td class="table--cell">Cell B2</td>
        </tr>
    </tbody>
</table>


<!-- Compact table for data heavy applications. -->
<table class="table table__dense">
    <caption class="table--caption">Use this table variant for for data heavy applications</caption>
    <thead class="table--head">
        <th scope="col" class="table--header--cell">Column A</th>
        <th scope="col" class="table--header--cell">Column B</th>

        <th scope="col" class="table--header--cell">Column C</th>
        <th scope="col" class="table--header--cell">Column D</th>
        <th scope="col" class="table--header--cell">Column E</th>
    </thead>
    <tbody>
        <tr class="table--row">
            <td class="table--cell">Cell A1</td>
            <td class="table--cell">Cell B1</td>

            <td class="table--cell">Cell C1</td>
            <td class="table--cell">Cell D1</td>
            <td class="table--cell">Cell E1</td>
        </tr>
        <tr class="table--row">
            <td class="table--cell">Cell A2</td>
            <td class="table--cell">Cell B2</td>

            <td class="table--cell">Cell C2</td>
            <td class="table--cell">Cell D2</td>
            <td class="table--cell">Cell E2</td>
        </tr>
    </tbody>
</table>


/* Basic table: No context defined */


/* Compact table for data heavy applications. */
{
  "table-class": " table__dense",
  "caption": "Use this table variant for for data heavy applications",
  "datadense": "true"
}