Table

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