DataTable

A basic data table component that supports sorting and selections.

Data tables are used to organize lists of high density data. It uses react-table to manage internal state.

Import#

import { DataTable } from '@saas-ui/react'

Usage#

Basic DataTable#

<Box overflowX="auto">
<DataTable columns={dataTable.columns} data={dataTable.data} />
</Box>

Sortable#

<Box overflowX="auto">
<DataTable columns={dataTable.columns} data={dataTable.data} isSortable />
</Box>

Selectable#

<Box overflowX="auto">
<DataTable
columns={dataTable.columns}
data={dataTable.data}
isSelectable
onSelectedRowsChange={(selected) => console.log(selected)}
/>
</Box>

Access internal state#

You can access the react-table TableInstance by passing a ref to DataTable. Check out the react-table documentation for all properties.

function TableState() {
const tableRef = useRef(null)
return (
<Box overflowX="auto">
<Button
onClick={() =>
tableRef.current.toggleAllRowsSelected(
!tableRef.current.isAllRowsSelected
)
}
label="Select all rows"
/>
<DataTable
ref={tableRef}
columns={dataTable.columns}
data={dataTable.data}
isSelectable
/>
</Box>
)
}

Typescript#

If you run into type errors, you might need to add react-table-config.d.ts to your src. To use the default DataTable config you can simply re-export the config from @saas-ui/data-table.

// Copy to: src/types/react-table-config.d.ts
export * from '@saas-ui/data-table/src/react-table-config.d'
interface ExampleData {
id: string
name: string
email: string
}
const columns: Column<ExampleData>[] = [
{
accessor: 'id',
Header: 'Id',
},
{
accessor: 'name',
Header: 'Name',
},
{
accessor: 'email',
Header: 'Email',
},
]
const data: ExampleData[] = [{
{
id: 1,
name: 'TaShya Charles',
email: 'urna.nec.luctus@icloud.couk'
},
{
id: 2,
name: 'Donovan Mosley',
email: 'lacinia.mattis.integer@icloud.couk',
},
}]
<DataTable<ExampleData> columns={columns} data={data} />

Props#

DataTable Props#

columnsrequired

Type
readonly Column<Data>[]

datarequired

Type
readonly Data[]

autoResetHiddenColumns

Type
boolean

defaultColumn

Type
Partial<Column<Data>>

getRowId

Type
((originalRow: Data, relativeIndex: number, parent?: Row<Data>) => string)

getSubRows

Type
((originalRow: Data, relativeIndex: number) => Data[])

initialState

Type
Partial<TableState<Data>>

isSelectable

Description

Enable row selection

Type
boolean

isSortable

Description

Enable sorting on all columns

Type
boolean

onSelectedRowsChange

Description

Triggers whenever the row selection changes. @params rows The selected row id's

Type
((rows: IdType<Data>[]) => void)

onSortChange

Description

Triggers when sort changed. Use incombination with manualSortBy to enable remote sorting.

Type
((columns: SortingRule<Data>[]) => void)

ref

Type
ForwardedRef<TableInstance<Data>>

stateReducer

Type
((newState: TableState<Data>, action: ActionType, previousState: TableState<Data>, instance?: TableInstance<Data>) => TableState<...>)

useControlledState

Type
((state: TableState<Data>, meta: MetaBase<Data>) => TableState<Data>)

Was this helpful?