DataTable

A basic data table component that supports sorting and selections.

Data tables are used to organize lists of high density data.

Import#

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

Usage#

DataTable uses @tanstack/react-table v8 internally and supports all TableOptions which allows you to extend the DataTable with pagination, column resizing, filtering and more, see the TanStack table documentation for more information.

Check out the full example on the bottom of this page to see how to format columns and your data.

Basic#

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

export default function Basic() {
  return (
    <Box overflowX="auto">
      <DataTable columns={dataTable.columns} data={dataTable.data} />
    </Box>
  )
}

Table sizing#

The table component is available in 3 sizes: sm, md, lg. The default size is md.

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

export default function Basic() {
  return (
    <Box overflowX="auto">
      <DataTable columns={dataTable.columns} data={dataTable.data} size="sm" />
    </Box>
  )
}

Sortable#

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

export default function Sortable() {
  return (
    <Box overflowX="auto">
      <DataTable columns={dataTable.columns} data={dataTable.data} isSortable />
    </Box>
  )
}

Selectable#

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

export default function Selectable() {
  return (
    <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.

import { Box, Button, ButtonGroup } from '@chakra-ui/react'
import { DataTable } from '@saas-ui/react'

export default function TableState() {
  const tableRef = useRef(null)

  return (
    <Box overflowX="auto">
      <ButtonGroup mb="4">
        <Button
          onClick={() =>
            tableRef.current.toggleAllRowsSelected(
              !tableRef.current.getIsAllRowsSelected()
            )
          }
        >
          Select all rows
        </Button>
      </ButtonGroup>
      <DataTable
        instanceRef={tableRef}
        columns={dataTable.columns}
        data={dataTable.data}
        isSelectable
      />
    </Box>
  )
}

Full example#

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

interface ExampleData {
  id: string
  name: string
  email: string
}

const columns: ColumnDef<ExampleData>[] = [
  {
    accessorKey: 'id',
    header: 'Id',
  },
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: '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',
  },
]

export default function TypeScript() {
  return <DataTable<ExampleData> columns={columns} data={data} />
}

Was this helpful?