Tables

Tables display data in rows and columns. They order information so that people can easily scan and analyse data.

Code

Built with DataTables

Relies on the third-party libraryDataTablesfor its features and functionality.View all resources

Default

HTML
React

Ask a dev lead for more documentation on this component.

<table id="myTable" class="data-table" width="100%" data-archive="" data-source="">
  <thead>
    <tr>
      <th data-prop="columnHeader" class="" data-type="">columnHeader</th>
      …
    </tr>
  </thead>
</table>

<script>
  System.import('tables').then(function () {

    $('#myTable').tablify({
      …
    });

  });
</script>

Cell typeAlignmentPropertyTD classCopy

string
left
data-type=“string”
string-cell
link
left
data-type=“link”
link-cell
date
left
data-type=“date”
datetime-cell
number
right
data-type=“number”
number-cell
percent
right
data-type=“percent”
percent-cell
fraction
right
data-type=“fraction”
fraction-cell
decimal
right
data-type=“decimal
decimal-cell
proper fraction
right
data-type=“properFraction”
properFraction-cell
boolean
center
data-type=“boolean”
bool-cell
(outputs check icon if true)
string array
left
data-type=“stringArray”
stringArray-cell
blank
left
escaped-cell

Ask a dev lead for more documentation on this component.

import {
  DataTable,
  Row,
  ORDER_DIRECTION_ASCENDING,
  ORDER_DIRECTION_DESCENDING
} from 'react-p21';

function () {
  return (
    <>
      <DataTable
        ref={this.table}
        columns={this.columns}
        extraFilters={this.getFilterBar}
        groupBy={['groupName']}
        groupHeader={groupHeader}
        initialOrder={[
          { id: 'dataset', direction: ORDER_DIRECTION_ASCENDING },
          { id: 'rule', direction: ORDER_DIRECTION_ASCENDING },
          { id: 'affected', direction: ORDER_DIRECTION_DESCENDING },
          { id: 'change', direction: ORDER_DIRECTION_DESCENDING }
        ]}
        onLoad={this.onTableLoad}
        downloadFileName={toFileName('myTableFile')}
      />
    </>
  );
}

Study	Project	Licenses	Actions
ABC-123	ABC	2	Edit
ABC-456	ABC	10	Edit
DEF-123	DEF	102	Edit

Study	Project	Licenses	Actions
ABC-123	ABC	2	Edit
ABC-456	ABC	10	Edit
DEF-123	DEF	102	Edit

HTML

<table class="table">
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
      <th class="text-right">…</th>
      <th class="text-center">…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
      <text-right">…</td>
      <text-center">…</td>
    </tr>
  </tbody>
</table>

NameCodeCopy

Bordered
<table class=“table table-bordered”>
Align text left (default)
no class needed
Align text right (add to td or th)
<td class=“text-right”>
Align text center (add to td or th)
<td class=“text-center”>

In Practice

Tables should:

Show values across multiple categories and measures.
Allow for filtering and ordering when comparison is not a priority.
Help users visualize and scan many values from an entire data set.
Help user find other values in the data hierarchy through links.
Use only relevant text or data so that it’s easy to understand.
Wrap instead of truncate content. This is because if row titles start with the same word, they’ll all appear the same when truncated.

Alignment

Column content types are built into the component props so the following alignment rules are followed:
- Numerical = right aligned
- Textual data = left aligned
- Icons = center align
- Align headers with their related data

Actions column

Use links when there are one or two actions.
Use an overflow menu, trigger by an ellipse icon (), when there are more than two actions.
Place the column all the way to the right.

Content guidelines

Headers should:

Be informative and descriptive
Be concise and scannable
Include units of measurement so they aren’t repeated throughout the columns
Use sentence case (first word capitalized, rest lowercase)

Column content should:

Be concise and scannable
Not include units of measurement (put those in the headers)
Use sentence case (first word capitalized, rest lowercase)

Decimals

Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others.

Accessibility

Structure

Native HTML tables provide a large amount of structural information to screen reader users. Users who rely on screen readers can navigate tables and identify relationships between data cells td and headers th using keys specific to their screen reader.
Sortable tables use the aria-sort attribute to convey which columns are sortable (and in what direction). They also use aria-label on sorting buttons to convey what activating the button will do.

Keyboard support

Sorting controls for tables are implemented with native HTML buttons.

Give buttons keyboard focus with the tab key (or shift + tab when tabbing backwards)
Activate buttons with the enter/return and space keys

Design resources

When designing tables in Certara’s Design Library, use plugin Table Creator . Follow the plugin’s instructions by importing the tables component from Certara’s Design Library. Learn more about the plugin .

View component in Figma