readonly Column<Data>[]
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"><DataTablecolumns={dataTable.columns}data={dataTable.data}isSelectableonSelectedRowsChange={(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"><ButtononClick={() =>tableRef.current.toggleAllRowsSelected(!tableRef.current.isAllRowsSelected)}label="Select all rows"/><DataTableref={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 yoursrc
. 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.tsexport * from '@saas-ui/data-table/src/react-table-config.d'
interface ExampleData {id: stringname: stringemail: 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#
columns
required
columns
required
Type
data
required
data
required
Type
readonly Data[]
autoResetHiddenColumns
autoResetHiddenColumns
Type
boolean
defaultColumn
defaultColumn
Type
Partial<Column<Data>>
getRowId
getRowId
Type
((originalRow: Data, relativeIndex: number, parent?: Row<Data>) => string)
getSubRows
getSubRows
Type
((originalRow: Data, relativeIndex: number) => Data[])
initialState
initialState
Type
Partial<TableState<Data>>
isSelectable
isSelectable
Description
Enable row selection
Type
boolean
isSortable
isSortable
Description
Enable sorting on all columns
Type
boolean
onSelectedRowsChange
onSelectedRowsChange
Description
Triggers whenever the row selection changes. @params rows The selected row id's
Type
((rows: IdType<Data>[]) => void)
onSortChange
onSortChange
Description
Triggers when sort changed.
Use incombination with manualSortBy
to enable remote sorting.
Type
((columns: SortingRule<Data>[]) => void)
ref
ref
Type
ForwardedRef<TableInstance<Data>>
stateReducer
stateReducer
Type
((newState: TableState<Data>, action: ActionType, previousState: TableState<Data>, instance?: TableInstance<Data>) => TableState<...>)
useControlledState
useControlledState
Type
((state: TableState<Data>, meta: MetaBase<Data>) => TableState<Data>)
Was this helpful?