ColumnDef<Data, any>[]
DataGrid
Data grids are used to organize lists of high density data.
A advanced data grid component that supports sorting, selections, filters and pagination.
- Beta
Get Pro
Import#
import { DataGrid, DataGridPagination } 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',size: 200,},{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></>),size: 100,},]}, [])return (<Page title="Customers" height="400px"><DataGridcolumns={columns}data={dataTable.data}isSortableisSelectableisHoverable><DataGridPagination /></DataGrid></Page>)}
With BulkActions#
function ListPage() {const [selections, setSelections] = React.useState([])const columns = React.useMemo(() => {return [{accessorKey: 'name',header: 'Name',size: 200,},{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></>),size: 100,},]}, [])return (<Pagetitle="Customers"height="400px"position="relative"overflow="hidden"><BulkActionsselections={selections}actions={<><Button colorScheme="white" variant="subtle">Delete</Button></>}></BulkActions><DataGridcolumns={columns}data={dataTable.data}isSortableisSelectableisHoverableonSelectedRowsChange={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',size: 200,meta: {href: ({ id }) => `#customers/${id}`,},},{accessorKey: 'email',header: 'Email',},{accessorKey: 'company',header: 'Company',},{accessorKey: 'country',header: 'Country',},{accessorKey: 'employees',header: 'Employees',meta: {isNumeric: true,},},{id: 'action',disableSortBy: true,disableGlobaFilter: true,header: '',cell: () => (<><Button size="xs">Edit</Button></>),size: 200,},]}, [])return (<Pagetitle="Customers"height="400px"position="relative"overflow="hidden"sx={{'& tbody tr:hover': {cursor: 'pointer',},}}><BulkActionsselections={selections}actions={<><Button colorScheme="white" variant="subtle">Delete</Button></>}></BulkActions><DataGridcolumns={columns}data={dataTable.data}isSortableisSelectableisHoverableonSelectedRowsChange={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',size: 200,meta: {href: ({ id }) => `#customers/${id}`,},},{accessorKey: 'email',header: 'Email',},{accessorKey: 'company',header: 'Company',},{accessorKey: 'country',header: 'Country',},{accessorKey: 'employees',header: 'Employees',meta: {isNumeric: true,},},{id: 'action',disableSortBy: true,disableGlobaFilter: true,header: '',cell: () => (<><Button size="xs">Edit</Button></>),width: '100px',},]}, [])return (<Pagetitle="Customers"height="400px"position="relative"overflow="hidden"sx={{'& tbody tr:hover': {cursor: 'pointer',},}}><BulkActionsselections={selections}actions={<><Button colorScheme="white" variant="subtle">Delete</Button></>}/><DataGridcolumns={columns}data={dataTable.data}isSortableisSelectableisHoverableonSelectedRowsChange={setSelections}onRowClick={(row, e) => {// Find the first A and trigger a click.const link = e.currentTarget.querySelector('td a')link && link.click()}}manualSortByonSortchange={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 (<Pagetitle="Customers"height="400px"toolbar={<Toolbar><ToolbarButtononClick={() => {gridRef.current.toggleAllRowsSelected()}}label="Select all rows"variant="primary"/></Toolbar>}><DataGridinstanceRef={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 yoursrc
. 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.tsexport * from '@saas-ui/pro/src/data-grid/react-table-config.d'
interface ExampleData {id: stringname: stringemail: 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#
Accepts all Box
properties.
columns
required
columns
required
data
required
data
required
Data[]
aggregationFns
aggregationFns
Record<string, AggregationFn<any>>
autoResetAll
autoResetAll
boolean
autoResetExpanded
autoResetExpanded
boolean
autoResetPageIndex
autoResetPageIndex
boolean
children
children
DataGrid children
ReactNode
className
className
The table class name attribute
string
columnResizeMode
columnResizeMode
ColumnResizeMode
debugAll
debugAll
boolean
debugColumns
debugColumns
boolean
debugHeaders
debugHeaders
boolean
debugRows
debugRows
boolean
debugTable
debugTable
boolean
defaultColumn
defaultColumn
Partial<ColumnDef<Data, unknown>>
enableColumnFilters
enableColumnFilters
boolean
enableColumnResizing
enableColumnResizing
boolean
enableExpanding
enableExpanding
boolean
enableFilters
enableFilters
boolean
enableGlobalFilter
enableGlobalFilter
boolean
enableGrouping
enableGrouping
boolean
enableHiding
enableHiding
boolean
enableMultiRemove
enableMultiRemove
boolean
enableMultiRowSelection
enableMultiRowSelection
boolean | ((row: Row<Data>) => boolean)
enableMultiSort
enableMultiSort
boolean
enablePinning
enablePinning
boolean
enableRowSelection
enableRowSelection
boolean | ((row: Row<Data>) => boolean)
enableSorting
enableSorting
boolean
enableSortingRemoval
enableSortingRemoval
boolean
enableSubRowSelection
enableSubRowSelection
boolean | ((row: Row<Data>) => boolean)
filterFns
filterFns
Record<string, FilterFn<any>>
filterFromLeafRows
filterFromLeafRows
boolean
getColumnCanGlobalFilter
getColumnCanGlobalFilter
((column: Column<Data, unknown>) => boolean)
getExpandedRowModel
getExpandedRowModel
((table: Table<any>) => () => RowModel<any>)
getFacetedMinMaxValues
getFacetedMinMaxValues
((table: Table<Data>, columnId: string) => () => [number, number])
getFacetedRowModel
getFacetedRowModel
((table: Table<Data>, columnId: string) => () => RowModel<Data>)
getFacetedUniqueValues
getFacetedUniqueValues
((table: Table<Data>, columnId: string) => () => Map<any, number>)
getFilteredRowModel
getFilteredRowModel
((table: Table<any>) => () => RowModel<any>)
getGroupedRowModel
getGroupedRowModel
((table: Table<any>) => () => RowModel<any>)
getIsRowExpanded
getIsRowExpanded
((row: Row<Data>) => boolean)
getPaginationRowModel
getPaginationRowModel
((table: Table<any>) => () => RowModel<any>)
getRowCanExpand
getRowCanExpand
((row: Row<Data>) => boolean)
getRowId
getRowId
((originalRow: Data, index: number, parent?: Row<Data>) => string)
getSortedRowModel
getSortedRowModel
((table: Table<any>) => () => RowModel<any>)
getSubRows
getSubRows
((originalRow: Data, index: number) => Data[])
globalFilterFn
globalFilterFn
FilterFnOption<Data>
groupedColumnMode
groupedColumnMode
false | "reorder" | "remove"
initialState
initialState
Partial<VisibilityTableState & ColumnOrderTableState & ColumnPinningTableState & FiltersTableState & ... 5 more ... & RowSelectionTableState>
instanceRef
instanceRef
The React Table instance reference
Ref<Table<Data>>
isHoverable
isHoverable
Enable row hover styles
boolean
isMultiSortEvent
isMultiSortEvent
((e: unknown) => boolean)
isSelectable
isSelectable
Enable row selection
boolean
isSortable
isSortable
Enable sorting on all columns
boolean
manualExpanding
manualExpanding
boolean
manualFiltering
manualFiltering
boolean
manualGrouping
manualGrouping
boolean
manualPagination
manualPagination
boolean
manualSorting
manualSorting
boolean
maxMultiSortColCount
maxMultiSortColCount
number
mergeOptions
mergeOptions
((defaultOptions: TableOptions<Data>, options: Partial<TableOptions<Data>>) => TableOptions<Data>)
meta
meta
TableMeta<Data>
noResults
noResults
No results component
FC<any>
onColumnFiltersChange
onColumnFiltersChange
OnChangeFn<ColumnFiltersState>
onColumnOrderChange
onColumnOrderChange
OnChangeFn<ColumnOrderState>
onColumnPinningChange
onColumnPinningChange
OnChangeFn<ColumnPinningState>
onColumnSizingChange
onColumnSizingChange
OnChangeFn<ColumnSizingState>
onColumnSizingInfoChange
onColumnSizingInfoChange
OnChangeFn<ColumnSizingInfoState>
onColumnVisibilityChange
onColumnVisibilityChange
OnChangeFn<VisibilityState>
onExpandedChange
onExpandedChange
OnChangeFn<ExpandedState>
onGlobalFilterChange
onGlobalFilterChange
OnChangeFn<any>
onGroupingChange
onGroupingChange
OnChangeFn<GroupingState>
onPaginationChange
onPaginationChange
OnChangeFn<PaginationState>
onResetFilters
onResetFilters
Callback fired when clear filters is clicked.
(() => void)
onRowClick
onRowClick
Callback fired when a row is clicked.
((row: Row<Data>, e: MouseEvent<Element, MouseEvent>, meta?: any) => void)
onRowSelectionChange
onRowSelectionChange
OnChangeFn<RowSelectionState>
onSelectedRowsChange
onSelectedRowsChange
Triggers whenever the row selection changes. @params rows The selected row id'
((rows: string[]) => void)
onSortChange
onSortChange
Triggers when sort changed.
Use incombination with manualSortBy
to enable remote sorting.
((columns: ColumnSort[]) => void)
onSortingChange
onSortingChange
OnChangeFn<SortingState>
onStateChange
onStateChange
((updater: Updater<TableState>) => void)
pageCount
pageCount
Use this for controlled pagination.
number
paginateExpandedRows
paginateExpandedRows
boolean
ref
ref
ForwardedRef<HTMLTableElement>
renderFallbackValue
renderFallbackValue
any
sortDescFirst
sortDescFirst
boolean
sortingFns
sortingFns
Record<string, SortingFn<any>>
state
state
Partial<TableState>
DataGridPagination Props#
Accepts Box
properties.
onChange
onChange
((props: { pageIndex: number; pageSize: number; }) => void)
Was this helpful?