DataGrid

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

A advanced data grid component that supports sorting, selections, filters and pagination.

Import#

import { DataGrid } from '@saas-ui/pro'

Usage#

DataGrid uses @tanstack/react-table v8 internally, and supports all useTable props, you can find the docs here.

Basic DataGrid#

function ListPage() {
const columns = React.useMemo(() => {
return [
{
accessorKey: 'name',
header: 'Name',
width: '200px',
},
{
accessorKey: 'email',
header: 'Email',
},
{
accessorKey: 'company',
header: 'Company',
},
{
accessorKey: 'country',
header: 'Country',
},
{
accessorKey: 'employees',
header: 'Employees',
isNumeric: true,
},
{
id: 'action',
disableSortBy: true,
disableGlobaFilter: true,
header: '',
cell: () => (
<>
<Button size="xs">Edit</Button>
</>
),
width: '100px',
},
]
}, [])
return (
<Page title="Customers" height="400px">
<DataGrid
columns={columns}
data={dataTable.data}
isSortable
isSelectable
isHoverable
>
<DataGridPagination />
</DataGrid>
</Page>
)
}

With BulkActions#

function ListPage() {
const [selections, setSelections] = React.useState([])
const columns = React.useMemo(() => {
return [
{
accessorKey: 'name',
header: 'Name',
width: '200px',
},
{
accessorKey: 'email',
header: 'Email',
},
{
accessorKey: 'company',
header: 'Company',
},
{
accessorKey: 'country',
header: 'Country',
},
{
accessorKey: 'employees',
header: 'Employees',
isNumeric: true,
},
{
id: 'action',
disableSortBy: true,
disableGlobaFilter: true,
header: '',
cell: () => (
<>
<Button size="xs">Edit</Button>
</>
),
width: '100px',
},
]
}, [])
return (
<Page
title="Customers"
height="400px"
position="relative"
overflow="hidden"
>
<BulkActions
selections={selections}
actions={
<>
<Button colorScheme="white" variant="subtle">
Delete
</Button>
</>
}
></BulkActions>
<DataGrid
columns={columns}
data={dataTable.data}
isSortable
isSelectable
isHoverable
onSelectedRowsChange={setSelections}
>
<DataGridPagination />
</DataGrid>
</Page>
)
}

Clickable rows#

Cells with a href property will render the cell value in an a. Using the DataGrid onRowClick handler you can trigger a click event on the link whenever the row is clicked.

function ListPage() {
const [selections, setSelections] = React.useState([])
const columns = React.useMemo(() => {
return [
{
accessorKey: 'name',
header: 'Name',
width: '200px',
href: ({ id }) => `#customers/${id}`,
},
{
accessorKey: 'email',
header: 'Email',
},
{
accessorKey: 'company',
header: 'Company',
},
{
accessorKey: 'country',
header: 'Country',
},
{
accessorKey: 'employees',
header: 'Employees',
isNumeric: true,
},
{
id: 'action',
disableSortBy: true,
disableGlobaFilter: true,
header: '',
cell: () => (
<>
<Button size="xs">Edit</Button>
</>
),
width: '100px',
},
]
}, [])
return (
<Page
title="Customers"
height="400px"
position="relative"
overflow="hidden"
sx={{
'& tbody tr:hover': {
cursor: 'pointer',
},
}}
>
<BulkActions
selections={selections}
actions={
<>
<Button colorScheme="white" variant="subtle">
Delete
</Button>
</>
}
></BulkActions>
<DataGrid
columns={columns}
data={dataTable.data}
isSortable
isSelectable
isHoverable
onSelectedRowsChange={setSelections}
onRowClick={(row, e) => {
// Find the first A and trigger a click.
const link = e.currentTarget.querySelector('td a')
link && link.click()
}}
>
<DataGridPagination />
</DataGrid>
</Page>
)
}

Remote data#

By default all sorting, filtering and pagination is handled locally by react-table to work with remote data use this example as a reference.

function ListPage() {
const [selections, setSelections] = React.useState([])
const [sort, setSort] = React.useState<SortingRule<ExampleData>[]>([])
const [page, setPage] = React.useState(0)
const { data } = useQuery(['customers', sort, page], () => {
// fetch...
})
const columns = React.useMemo(() => {
return [
{
accessorKey: 'name',
header: 'Name',
width: '200px',
href: ({ id }) => `#customers/${id}`,
},
{
accessorKey: 'email',
header: 'Email',
},
{
accessorKey: 'company',
header: 'Company',
},
{
accessorKey: 'country',
header: 'Country',
},
{
accessorKey: 'employees',
header: 'Employees',
isNumeric: true,
},
{
id: 'action',
disableSortBy: true,
disableGlobaFilter: true,
header: '',
cell: () => (
<>
<Button size="xs">Edit</Button>
</>
),
width: '100px',
},
]
}, [])
return (
<Page
title="Customers"
height="400px"
position="relative"
overflow="hidden"
sx={{
'& tbody tr:hover': {
cursor: 'pointer',
},
}}
>
<BulkActions
selections={selections}
actions={
<>
<Button colorScheme="white" variant="subtle">
Delete
</Button>
</>
}
/>
<DataGrid
columns={columns}
data={dataTable.data}
isSortable
isSelectable
isHoverable
onSelectedRowsChange={setSelections}
onRowClick={(row, e) => {
// Find the first A and trigger a click.
const link = e.currentTarget.querySelector('td a')
link && link.click()
}}
manualSortBy
onSortchange={setSort}
pageCount={data.total}
initialState={{
pageSize: 1,
}}
>
<DataGridPagination onChange={({ pageIndex }) => setPage(pageIndex)} />
</DataGrid>
</Page>
)
}

Access internal state#

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

function InternalState() {
const gridRef = useRef(null)
return (
<Page
title="Customers"
height="400px"
toolbar={
<Toolbar>
<ToolbarButton
onClick={() => {
gridRef.current.toggleAllRowsSelected()
}}
label="Select all rows"
variant="primary"
/>
</Toolbar>
}
>
<DataGrid
instanceRef={gridRef}
columns={dataGrid.columns.concat()}
data={dataGrid.data.concat()}
isSelectable
/>
</Page>
)
}

Typescript#

To add typesafety for the meta properties, you need to add react-table-config.d.ts to your src. To use the default DataGrid config you can simply re-export the config from @saas-ui/pro.

// Copy to: src/types/react-table-config.d.ts
export * from '@saas-ui/pro/src/data-grid/react-table-config.d'
interface ExampleData {
id: string
name: string
email: string
}
const columns: Column<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',
},
}]
<DataGrid<ExampleData> columns={columns} data={data} />

Props#

DataGrid Props#

Was this helpful?