Sorting and filtering server-side

[Janekk]

Hi,

Is there a way to switch to controlled filtering (including different filter modes) and sorting, so it triggers the respective actions on api endpoints? Basically switching from client-side filtering / sorting to server-side? Is there any example for that maybe? Thanks a lot for the awesome work on this component :)

[KevinVandy]

Yes actually I want to write the docs on how to do that soon, but what you are looking for is the manualFiltering prop.

The last example on this page shows how you can do this, but I'll have more detailed examples soon!

https://www.material-react-table.dev/?path=/docs/features-filtering-examples--manual-filtering#manual-filtering

  const [rows, setRows] = useState(() => data);

  return (
    <MaterialReactTable
      columns={columns}
      data={rows}
      manualFiltering
      enableColumnChangeMode={false}
      onColumnFilterValueChanged={async({ column, event, filterValue }) => {
        // put server side async call here
        const filteredRows = data.filter((dataRow) =>
          dataRow[column.id]
            .toLowerCase()
            .startsWith(filterValue.toLowerCase()),
        );
        setRows(filteredRows);
      }}
    />
  );

You can do a similar thing with sorting, but I had not made an example of that yet

[Janekk]

Thanks a lot! That's a good start for me :)

I wonder what makes it not render the filtering modes (as opposed to client-side filtering)? Is it because manualFiltering was set? I understand that filtering modes make no sense with manual filtering but curious about this logic.

One tiny thing I noticed is that in the manual filtering example it doesn't seem to reset the filter when clicking the x next to filter, I have to manually clear the input

[Janekk]

can we also opt in for manual sorting?

[KevinVandy]

I wonder what makes it not render the filtering modes

Oh I assumed you'd want that off if filtering manually/remotely. enableColumnChangeMode={false} turns that off, but just remove it and it will be on again. You would have to implement each sorting mode yourself on the server though, right? You would also want to handle the currentFilterFns state yourself to have access to which filter mode is chosen, which you can do like this

const [columnFilters, setColumnFilters] = useState([])
const [sorting, setSorting] = useState([])
const [currentFilterFns, setCurrentFilterFns] = useState({}) //TODO initialize this state which each column set to a default filter

//now you have access to what filter mode is chosen by the user in each column

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

[KevinVandy]

I have created an official example for manual server filtering, search, sorting, and pagination!

https://www.material-react-table.com/docs/examples/remote