I'm using material-react-table for my nextjs project.
I want to pre set my filters for my multi-select depending on user settings.
How to handle the user settings isn't the real problem, I just don't know how to set the multi-select filter.
My options are "series", "forbidden", "unknown" and I want to set e.g. "series" and "unknown" as default.
export default function App()
{
...
const [testgates, setTestgates] = useState<DropdownOption[]>([]);
const [includeStates, setIncludeStates] = useState<DropdownOptionIncludeState[]>([]);
...
// Column definition
const columns = useMemo<MRT_ColumnDef<IncludeList>[]>(
() => [
{
accessorKey: 'id',
header: 'ID',
enableEditing: false,
Edit: () => null,
},
...
{
accessorKey: 'state',
header: 'State',
editVariant: 'select',
editSelectOptions: includeStates,
filterVariant: 'multi-select',
filterSelectOptions: includeStates,
},
...
],
[testgates, includeStates]
...
The includeStates get pre filled by distinct database values with
{label: "example", value: "example"} ...
Solution found, also for pre set sorting.
Can be set via initialState option:
<MaterialReactTable
initialState={{
columnFilters: [{ id: 'lastName', value: "Johnson" }],
sorting: [{ id: 'firstName', desc: false }],
}}
/>