Mantine Datatable Filter

a lightweight hook which help to handle mantine datatable filtering, column sorting and pagination.

Installation

npm install mantine-datatable-filter

Dependencies

• @mantine/core
• @mantine/hooks
• mantine-datatable

Example

1. Import libraries.

1import { DataTable } from 'mantine-datatable'
2import useMantineDataTableFilter from 'mantine-datatable-filter'

2. Create handler hook.

1const dtFilter = useMantineDataTableFilter({
2    sort: {
3        columnAccessor: 'id',
4        direction: 'desc',
5    },
6    pagination: {
7        totalRecords: totalRecords ?? 0,
8        sizes: [10, 15, 20],
9    },
10    columns: [
11      {
12          accessor: 'id',
13          type: 'number',
14          inputProps: {
15              label: 'ID',
16              placeholder: 'Search by ID',
17          }
18      },
19      {
20          accessor: 'name',
21          type: 'text',
22          inputProps: {
23              label: 'Name',
24              placeholder: 'Search by name',
25          }
26      }
27    ],
28    onChange: (values, cleanedValues) => {
29        // handle change
30    },
31    debounced: 200
32})

3. Add props to datatable.

1return <DataTable
2           // Add handler props here.
3           {...dtFilter.props}
4           columns={[
5               {
6                 accessor: 'id',
7                 title: 'ID',
8                 sortable: true,
9                 // Add filter props for each of columns.
10                 ...dtFilter.getFilterProps('id')
11               },
12               {
13                 accessor: 'name',
14                 title: 'Name',
15                 sortable: true,
16                 ...dtFilter.getFilterProps('name')
17               }
18           ]}
19       />

APIs

HandlerOptions

columns

Property	Type	Default Value	Description
accessor	string		Primary key for each column.
type	"text" | "number" | "date" | "datetime" | "select"		Column type.
post?	(value: "text" | "number" | "date" | "datetime" | "select") => "text" | "number" | "date" | "datetime" | "select"	() => {}	Post process function for a column. Note this will affect only for cleaned value.
inputProps?	InputProps	{}	Props for filter input. Please refer to mantine documentations for input props.
resetLabel?	string	"Reset"	Date type only.

sorts?

Property	Type	Default Value	Description
columnAccessor	string		Default sorting key.
direction	"asc" | "desc"		Direction of sorting.

pagination

Property	Type	Default Value	Description
initialPage	number	1	Initial page.
totalRecords	number		Total records.
sizes?	number | number[]	10	Total records per page.

onChange(values, cleanedValues) => void

Property	Type	Default Value	Description
values	HandlerValues		Raw values.
cleanedValues	HandlerCleanedValues		Cleaned, with post data process and removed blank filters' values.

Property	Type	Default Value	Description
debounced?	number	0	Debounced state for onChange when user input on filters.
deps?	DependencyList | any[]	[]	Dependencies for triggering onChange. This is useful for adding extra features to the handler.

HandlerReturn

Property	Type	Description
values	HandlerValues	Handler values.
getFilterProps	(accessor: string) => FilterProps	Getter for generating filter option props for a column.
refetch	() => void	Function for triggering onChange.
props	DatatableProps	Sorting and pagination props for datatable.

HandlerValues

Property	Type	Description
sort	DataTableSortStatus | null	Column for sorting.
filters	all of { key: FilterType }	Column filters values.
pagination	{ page: number; size: number }	Column pagination values.

FilterType

Property	Type	Description
accessor	string	Primary key for each column.
type	"text" | "number" | "date" | "datetime" | "select"	Column type.
value	(depends on type, refer to mantine documentation)	Column value.