Table

Display tabular data.

Overview

The Table component is used to display tabular data. Each row is presented in the same format. It makes information eas ier to compare and scan.

FIRST COLUMNRow 1 Cell 1SECOND COLUMNTHIRD COLUMNRow 1 Cell 2Row 1 Cell 3Row 2 Cell 3Row 3 Cell 3Row 4 Cell 3Row 5 Cell 3Row 6 Cell 3Row 7 Cell 3Row 2 Cell 1Row 2 Cell 2Row 3 Cell 1Row 3 Cell 2Row 4 Cell 1Row 4 Cell 2Row 5 Cell 1Row 5 Cell 2Row 6 Cell 1Row 6 Cell 2Row 7 Cell 1Row 7 Cell 2The Table Component.

Usage

The Table component is best used to compare information in rows and columns. It organises data, making it easier for users to interpret by looking for patterns and insights. By default, the Table simply renders data passed to it, however it can be enhanced to include features such as Column Sorting.

Anatomy

ContainerTable HeaderTable Column12Column Sorting (Optional)43FIRST COLUMNRow 1 Cell 1SECOND COLUMNTHIRD COLUMNRow 1 Cell 2Row 1 Cell 3Row 2 Cell 3Row 3 Cell 3Row 2 Cell 1Row 2 Cell 2Row 3 Cell 1Row 3 Cell 2The Table Anatomy.
  1. Table Container. Wraps the entire Table component. By default it has no border styles, ensuring it sits flush with its immediate parent.
  2. Table Header. Contains the column titles.
  3. Table Column. Each Table Column contains data for each Table Row.
  4. Column Sorting (Optional). The Table Column can optionally have sorting applied to it, giving the user the ability to reorder the columns.

Sizing & Spacing

The Table component adapts to the data and content placed inside of it. By default, the Table will extend the full width of its parent.

Hierarchy & Placement

Whilst there is no restriction on the number of Table instances that can be used per page, it's always worth exploring if there is a more informative or interactive way of displaying this data to the user.

Basic Usage

const data = [
  {
    id: 'a',
    first: 'a1',
    second: 'a2',
    third: 'a3',
  },
  {
    id: 'b',
    first: 'b1',
    second: 'b2',
    third: 'b3',
  },
  {
    id: 'c',
    first: 'c1',
    second: 'c2',
    third: 'c3',
  },
]

<Table data={data}>
  <Column field="first" sortable>First</Column>
  <Column field="second">Second</Column>
  <Column field="third">Third</Column>
</Table>

Basic Usage with Aribtrary Cell Content

const data = [
  {
    id: 'a',
    first: 'a1',
    second: <Badge color="success">Online</Badge>,
  },
  {
    id: 'b',
    first: 'b1',
    second: <Badge color="danger">Offline</Badge>,
  },
]

<Table data={data}>
  <Column field="first">First</Column>
  <Column field="second">Second</Column>
  <Column field="third">Third</Column>
</Table>

Table Properties

NameTypeRequiredDefaultDescription
data{ id: string }[]Truen/aAn array of objects for presenting as rows. Each object has fields which can either be a string or an arbitrary component such as a Badge.
childrenReact.ReactElement<ColumnProps>[]Truen/aAn array of columns for header cells and presenting cells.

Column Properties

NameTypeRequiredDefaultDescription
childrenstringTruen/aText to be presented in the column header cell.
fieldstringTruen/aName of the field to be presented in the cell.
onSortClick(field: string) => voidFalsen/aCalled when the column sort is clicked.
isSortablebooleanFalsen/aIf specified then the column will be sortable.
sortOrderstringFalsen/aOrder the column will be sorted in `asc` or `desc`