@spark-web/data-table

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

``jsx live
items={[
{
id: 1,
name: 'Ken Adams',
category: 'Solar System',
amount: 3500,
},
]}
columns={[
{
id: 'id',
accessorKey: 'id',
header: 'ID',
cell: info => {info.renderValue()},
},
{
id: 'name',
accessorKey: 'name',
header: 'Name',
cell: info => {info.renderValue()},
},
{
id: 'category',
accessorKey: 'category',
header: 'Category',
cell: info => {info.renderValue()},
},
{
id: 'amount',
accessorKey: 'amount',
header: 'Amount',
cell: info => {info.renderValue()},
},
]}
/>
``

Props

$3