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?