next.jsmaterial-react-table

How to pre set filter options of multi-select in material-react-table


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

  • 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 }],
      }}
    />