Filter[]
Filters
Intuitive data filtering components.
- Beta
Get Pro
Import#
FiltersProvider
: Context provider that manages active filters.FiltersAddButton
: Menu with available filters.ActiveFilter
: Active filter component.ActiveFiltersList
: A list of active filters.NoFilteredResults
: EmptyState used incombination with DataGrid.useDataGridFilter
: Hook to enable DataGrid filtering.
import {FilterMenu,ActiveFilter,ActiveFilters,FiltersProvider,} from '@saas-ui/pro'
Usage#
The FiltersProvider can be used together with DataGrid
to create intuitive data heavy list pages.
Basic#
function ListPage() {const filters = React.useMemo(() => [{id: 'status',label: 'Status',icon: <FiCircle />,type: 'enum',items: [{id: 'new',label: 'New',icon: <StatusBadge bg="blue.400" />,},{id: 'active',label: 'Active',icon: <StatusBadge bg="green.400" />,},],},],[])return (<FiltersProvider filters={filters}><Pagetitle="Contacts"toolbar={<Toolbar variant="outline"><FiltersAddButton /><Spacer /></Toolbar>}><ActiveFiltersList /><PageBody fullWidth></PageBody></Page></FiltersProvider>)}
Usage with DataGrid#
function ListPage() {const gridRef = useRef()const filters = React.useMemo(() => [{id: 'status',label: 'Status',icon: <FiCircle />,type: 'enum',items: [{id: 'new',label: 'New',icon: <StatusBadge bg="blue.400" />,},{id: 'active',label: 'Active',icon: <StatusBadge bg="green.400" />,},],},{id: 'isLead',label: 'Is lead',type: 'boolean',icon: <FiUser />,value: true,},],[])const columns = React.useMemo(() => {return [{accessorKey: 'name',header: 'Name',size: 200,meta: {href: ({ id }) => `#customers/${id}`,},filterFn: useDataGridFilter('string'),},{accessorKey: 'email',header: 'Email',filterFn: useDataGridFilter('string'),},{accessorKey: 'company',header: 'Company',filterFn: useDataGridFilter('string'),},{accessorKey: 'status',header: 'Status',cell: (cell) => {const value = cell.getValue()return (<Tag colorScheme={value === 'new' ? 'orange' : 'green'} size="sm">{value}</Tag>)},filterFn: useDataGridFilter('string'),},{accessorKey: 'isLead',header: 'Lead',hidden: true,filterFn: useDataGridFilter('boolean'),},{accessorKey: 'employees',header: 'Employees',meta: {isNumeric: true,},},{id: 'action',disableSortBy: true,disableGlobaFilter: true,header: '',cell: () => (<><Button size="xs">Edit</Button></>),size: 100,},]}, [])const onFilter = React.useCallback((filters) => {gridRef.current.setColumnFilters(filters.map((filter) => {return {id: filter.id,value: {value: filter.value,operator: filter.operator || 'is',},}}))}, [])const data = React.useMemo(() =>dataTable.data.map((item) => {return {...item,status: 'new',isLead: true,}}),[])return (<FiltersProvider filters={filters} onChange={onFilter}><Pagetitle="Contacts"height="400px"toolbar={<Toolbar variant="outline"><FiltersAddButton /><Spacer /></Toolbar>}><ActiveFiltersList /><PageBody fullWidth><DataGridinstanceRef={gridRef}columns={columns}data={data}noResults={NoFilteredResults}initialState={{columnVisibility: {isLead: false,},}}/></PageBody></Page></FiltersProvider>)}
DataGrid with default filters#
function ListPage() {const gridRef = useRef()const filters = React.useMemo(() => [{id: 'status',label: 'Status',icon: <FiCircle />,type: 'enum',items: [{id: 'new',label: 'New',icon: <StatusBadge bg="blue.400" />,},{id: 'active',label: 'Active',icon: <StatusBadge bg="green.400" />,},],},{id: 'isLead',label: 'Is lead',type: 'boolean',icon: <FiUser />,value: true,},],[])const columns = React.useMemo(() => {return [{accessorKey: 'name',header: 'Name',size: 200,meta: {href: ({ id }) => `#customers/${id}`,},filterFn: useDataGridFilter('string'),},{accessorKey: 'email',header: 'Email',filterFn: useDataGridFilter('string'),},{accessorKey: 'company',header: 'Company',filterFn: useDataGridFilter('string'),},{accessorKey: 'status',header: 'Status',cell: (cell) => {const value = cell.getValue()return (<Tag colorScheme={value === 'new' ? 'orange' : 'green'} size="sm">{value}</Tag>)},filterFn: useDataGridFilter('string'),},{accessorKey: 'isLead',header: 'Lead',hidden: true,filterFn: useDataGridFilter('boolean'),},{accessorKey: 'employees',header: 'Employees',meta: {isNumeric: true,},},{id: 'action',disableSortBy: true,disableGlobaFilter: true,header: '',cell: () => (<><Button size="xs">Edit</Button></>),size: 100,},]}, [])const onFilter = React.useCallback((filters) => {gridRef.current.setColumnFilters(filters.map((filter) => {return {id: filter.id,value: {value: filter.value,operator: filter.operator || 'is',},}}))}, [])const data = React.useMemo(() =>dataTable.data.map((item) => {return {...item,status: 'new',isLead: true,}}),[])const defaultFilters = [{ id: 'status', operator: 'isNot', value: 'new' }]return (<FiltersProviderfilters={filters}onChange={onFilter}defaultFilters={defaultFilters}><Pagetitle="Contacts"height="400px"toolbar={<Toolbar variant="outline"><FiltersAddButton /><Spacer /></Toolbar>}><ActiveFiltersList /><PageBody fullWidth><DataGridinstanceRef={gridRef}columns={columns}data={data}noResults={NoFilteredResults}initialState={{columnVisibility: {isLead: false,},filters: defaultFilters.map(({ id, value, operator }) => ({id,value: {value,operator,},})),}}/></PageBody></Page></FiltersProvider>)}
Props#
FiltersProvider Props#
defaultFilters
defaultFilters
Type
filters
filters
Type
FilterItem[]
onBeforeEnableFilter
onBeforeEnableFilter
Type
((filter: Filter, filterItem?: FilterItem) => Promise<Filter>)
onChange
onChange
Type
((activeFilters: Filter[]) => void)
operators
operators
Type
FilterOperators
FiltersAddButton Props#
buttonProps
buttonProps
Type
ButtonProps
command
command
Type
string
icon
icon
Type
ReactNode
label
label
Type
ReactNode
onSelect
onSelect
Type
((item: FilterItem) => void)
placeholder
placeholder
Type
string
ActiveFilter Props#
id
required
id
required
Type
string
defaultOperator
defaultOperator
Type
string
defaultValue
defaultValue
Type
FilterValue
formatLabel
formatLabel
Type
((label?: string) => string)
formatValue
formatValue
Type
((value: FilterValue) => string)
icon
icon
Type
ReactNode
items
items
Type
FilterItem[]
label
label
Type
string
onChange
onChange
Type
((filter: Filter) => void)
onOperatorChange
onOperatorChange
Type
((id: string) => void)
onRemove
onRemove
Type
(() => void)
onValueChange
onValueChange
Type
((value: FilterValue) => void)
operator
operator
Type
string
operators
operators
Type
FilterItem[]
value
value
Type
FilterValue
ActiveFiltersList Props#
formatValue
formatValue
Type
((value: FilterValue) => string)
NoFilteredResults Props#
clearLabel
clearLabel
Type
string
onReset
onReset
Type
(() => void)
resource
resource
Type
string
spacing
spacing
Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | ... 55 more ... | "-3.5">>
title
title
Type
string
Was this helpful?