title: DataTable storybookPath: data-display-data-table isExperimentalPackage: true

The DataTable component presents a list of data in table form.

It uses @tanstack/react-table as a dependency to implement data selection and filtering capabilities. As such, certain table options are available as DataTable props. For example, the items and columns prop are required options.

Currently supported features from @tanstack/react-table are the following:

1. Row selection
2. Multi-row selection
3. Row expansion
4. Column visibility

However, certain defaults have been set for the component:

1. enableHiding is enabled by default;
2. enableMultiRowSelection is disabled by default, meaning row selection defaults to single-row;
3. enableRowSelection is automatically enabled when a callback value is passed in onRowSelectionChange.
4. The data property in React Table options is renamed to items to align with the rest of Spark Web's usage of data as a data attribute.

Example

<DataTable
  items={[
    {
      id: 1,
      name: 'Ken Adams',
      category: 'Solar System',
      amount: 3500,
    },
  ]}
  columns={[
    {
      id: 'id',
      accessorKey: 'id',
      header: 'ID',
      cell: info => <Text size="small">{info.renderValue()}</Text>,
    },
    {
      id: 'name',
      accessorKey: 'name',
      header: 'Name',
      cell: info => <Text size="small">{info.renderValue()}</Text>,
    },
    {
      id: 'category',
      accessorKey: 'category',
      header: 'Category',
      cell: info => <Text size="small">{info.renderValue()}</Text>,
    },
    {
      id: 'amount',
      accessorKey: 'amount',
      header: 'Amount',
      cell: info => <Text size="small">{info.renderValue()}</Text>,
    },
  ]}
/>

Props

DataTable