CODEWITHSUNDEEP
reactjsmaterial-react-table
Atefeh Amiri
Atefeh Amiri

Reputation: 1

get ColumnFilterModes and send server-side in material react table

I want to get the coulmnfiltermode in the material react table and do the data filter on the server side.
I could not find any way.

<>
  <MaterialReactTable
    initialState={{
      density: "compact",
      showGlobalFilter: true,
      showColumnFilters: true,
    }}
    lt
    columns={columns}
    data={data?.queryResult ?? []}
    manualFiltering
    manualPagination
    manualSorting
    onColumnFiltersChange={setColumnFilters}
    onGlobalFilterChange={setGlobalFilter}
    rowCount={data?.totalCount ?? 0}
    state={{
      columnFilters,
      globalFilter,
      isLoading,
      pagination,
      showAlertBanner: isError,
      showProgressBars: isFetching,
      sorting,
    }}
  />
</>

I used filterFns and onColumnFilterFnsChange but it didn't work for me

Upvotes: 0

Views: 1568

Answers (3)

alireza jalilian
alireza jalilian

Reputation: 161

@fuegonju, thank you for your solution. I can confirm that this is a correct approach for managing column filter modes in Material React Table with server-side filtering. Here's why it works well:

Proper Utilization of MRT's State Management:

1- The provided solution effectively uses MRT's state management by leveraging the columnFilterFns state to track filter modes for each column.

const [columnFilterFns, setColumnFilterFns] = useState<Record<string, string>>(
    Object.fromEntries(
        columns.map(({ accessorKey }) => [accessorKey as string, 'contains'])
    )
);

2- Seamless Integration with MRT's Filter Mode System:

  • Initialization of Default Filter Modes: Sets up default filter modes ('contains') for each column upon initialization.
  • Tracking Filter Mode Changes: Utilizes onColumnFilterFnsChange to monitor and handle changes in filter modes.
  • Inclusion in Table State: Incorporates columnFilterFns into the table's state to maintain consistency across interactions.

3- Effective Server-Side Implementation:

  • Mapping Filter Modes to Backend Queries: Translates the filter modes into appropriate backend query parameters, facilitating seamless server-side filtering.
const getQueryParams = (filters, columnFilterFns) => {
    return filters.reduce((acc, filter) => {
        const filterMode = columnFilterFns[filter.id];
        // Map to backend filter syntax (e.g., __icontains, __startswith)
        return {
            ...acc,
            [`${filter.id}__${getBackendFilterSuffix(filterMode)}`]: filter.value
        };
    }, {});
};

4-Additional Improvement – Type Safety with TypeScript:

Defining Filter Modes:

type FilterMode = 'contains' | 'startsWith' | 'equals';
type ColumnFilterFns = Record<string, FilterMode>;
  • Benefits: Ensures that filter modes are consistently applied and aligned with both frontend and backend expectations, reducing potential bugs and enhancing code reliability.

Upvotes: 0

fuegonju
fuegonju

Reputation: 121

I've been struggling with that until I found an example code from Mantine React Table ( fork of Material React Table ) that uses columFilterFns state :

react-query-example

Most relevant parts that you can find there:

const [columnFilterFns, setColumnFilterFns] = //filter modes
useState<MRT_ColumnFilterFnsState>(
  Object.fromEntries(
    columns.map(({ accessorKey }) => [accessorKey, 'contains']),
  ),
); 

...
const table = useMantineReactTable({
  ...
  enableColumnFilterModes: true,
  onColumnFilterFnsChange: setColumnFilterFns,
  state: { columnFilterFns }
...

Notice that the initial filter functions names for all ColumnsFns are 'contains' in this example.

Then you can use useEffect() to 'listen' to changes.

Upvotes: 1

Kevin Vandy
Kevin Vandy

Reputation: 431

The state you are looking for is columnFilterFns. Manage that state just like how the columnFilters state is managed and you can read that state to see which mode is selected.

Upvotes: 0

Related Questions