Set initial filtering / sorting

[Janekk]

Is is possible to preset the data table with initial filtering and sorting configuration?

[KevinVandy]

Yes! Check out the initalState prop. You can find all of the state options that you can specify in this table from the docs

https://www.material-react-table.com/docs/api/state-options

You probably want something like this

<MaterialReactTable
  initialState={{
    columnFilters: [{ id: 'lastName', value: "Johnson" }],
    sorting: [{ id: 'firstName', desc: false }],
  }}
/>

[Janekk]

Thank you! Would it work with manual filtering? I.e. is it triggered by the values from initial state? Or I guess I'd have to pre-filter / sort the data accordingly to reflect the initial state

[KevinVandy]

Yeah setting the initialState will at the very least set the sort arrows and column filter textboxes correctly. However, the data filtering and sorting would be up to you if you specify manualSorting and manualFiltering.

You actually might want to go 1 step further with the state management and control it yourself like this

const [columnFilters, setColumnFilters] = useState([])
const [sorting, setSorting] = useState([])

//this is how you raise the state for sorting and filtering so that your own logic can have access to the state values

<MaterialReactTable
  manualFiltering
  manualSorting
  onColumnFiltersChange: setColumnFilters,
  onSortingChange: setSorting,
  state={{
    columnFilters,
    sorting,
  }}
/>