TableCard

This is an accessible, sortable, and scrollable table for displaying tabular data (like revenue and other analytics data). It accepts headers for column headers, and rows for the table content. rowHeader can be used to define the index of the row header (or false if no header).

TableCard serves as Card wrapper & contains a card header, <Table />, <TableSummary />, and <Pagination />. This includes filtering and comparison functionality for report pages.

Usage

const headers = [
	{ key: 'month', label: 'Month' },
	{ key: 'orders', label: 'Orders' },
	{ key: 'revenue', label: 'Revenue' },
];
const rows = [
	[
		{ display: 'January', value: 1 },
		{ display: 10, value: 10 },
		{ display: '$530.00', value: 530 },
	],
	[
		{ display: 'February', value: 2 },
		{ display: 13, value: 13 },
		{ display: '$675.00', value: 675 },
	],
	[
		{ display: 'March', value: 3 },
		{ display: 9, value: 9 },
		{ display: '$460.00', value: 460 },
	],
];
const summary = [
	{ label: 'Gross Income', value: '$830.00' },
	{ label: 'Taxes', value: '$96.32' },
	{ label: 'Shipping', value: '$50.00' },
];

const [ showNotice, setShowNotice ] = useState( true );

<TableCard
	title="Revenue last week"
	rows={ rows }
	headers={ headers }
	query={ { page: 2 } }
	rowsPerPage={ 7 }
	totalRows={ 10 }
	summary={ summary }
	tablePreface={
    showNotice && (
      <Notice
        status="info"
        isDismissible={ true }
        onRemove={ () => setShowNotice( false ) }
      >
        This is an informative notice about the table.
      </Notice>
				)
  }
/>

Props

labels structure

Table header action labels object with properties:

• compareButton: String - Compare button label
• downloadButton: String - Download button label
• helpText: String -
• placeholder: String -

summary structure

Array of summary items objects with properties:

• label: ReactNode
• value: One of type: string, number

EmptyTable

EmptyTable displays a blank space with an optional message passed as a children node with the purpose of replacing a table with no rows. It mimics the same height a table would have according to the numberOfRows prop.

Usage

<EmptyTable>
	There are no entries.
</EmptyTable>

Props

TablePlaceholder

TablePlaceholder behaves like Table but displays placeholder boxes instead of data. This can be used while loading.

Usage

const headers = [
	{ key: 'month', label: 'Month' },
	{ key: 'orders', label: 'Orders' },
	{ key: 'revenue', label: 'Revenue' },
];

<TablePlaceholder
	caption="Revenue last week"
	headers={ headers }
/>

Props

TableSummary

A component to display summarized table data - the list of data passed in on a single line.

Usage

const summary = [
	{ label: 'Gross Income', value: '$830.00' },
	{ label: 'Taxes', value: '$96.32' },
	{ label: 'Shipping', value: '$50.00' },
];

<TableSummary data={ summary } />

Props

TableSummaryPlaceholder

A component to display a placeholder box for TableSummary. There is no prop for this component.

Usage

<TableSummaryPlaceholder />

Table

A table component, without the Card wrapper. This is a basic table display, sortable, but no default filtering.

Row data should be passed to the component as a list of arrays, where each array is a row in the table. Headers are passed in separately as an array of objects with column-related properties. For example, this data would render the following table.

const headers = [ { label: 'Month' }, { label: 'Orders' }, { label: 'Revenue' } ];
const rows = [
	[
		{ display: 'January', value: 1 },
		{ display: 10, value: 10 },
		{ display: '$530.00', value: 530 },
	],
	[
		{ display: 'February', value: 2 },
		{ display: 13, value: 13 },
		{ display: '$675.00', value: 675 },
	],
	[
		{ display: 'March', value: 3 },
		{ display: 9, value: 9 },
		{ display: '$460.00', value: 460 },
	],
]

Usage

<Table
	caption="Revenue last week"
	rows={ rows }
	headers={ headers }
	rowKey={ row => row.display }
/>

Props

headers structure

Array of column header objects with properties:

• defaultSort: Boolean - Boolean, true if this column is the default for sorting. Only one column should have this set.
• defaultOrder: String - String, asc|desc if this column is the default for sorting. Only one column should have this set.
• isLeftAligned: Boolean - Boolean, true if this column should be aligned to the left. If not set, it will fallback to this value ! isNumeric, i.e. text fields are left-aligned and numeric fields are right-aligned.
• isNumeric: Boolean - Boolean, true if this column is a number value.
• isSortable: Boolean - Boolean, true if this column is sortable.
• key: String - The API parameter name for this column, passed to orderby when sorting via API.
• label: ReactNode - The display label for this column.
• required: Boolean - Boolean, true if this column should always display in the table (not shown in toggle-able list).
• screenReaderLabel: String - The label used for screen readers for this column.

rows structure

Array of arrays representing rows and columns. Column object properties:

• display: ReactNode - Display value, used for rendering - strings or elements are best here.
• value: One of type: string, number, bool