After setting `onColumnFilterFnsChange`, the `Filter Mode` of the column header is displayed incorrectly, and always display fuzz.

[pymumu]

material-react-table version

v2.13.1

react & react-dom versions

v18.3.1

Describe the bug and the steps to reproduce it

After setting onColumnFilterFnsChange, the Filter Mode of the column header is displayed incorrectly, and always display fuzz.

Minimal, Reproducible Example - (Optional, but Recommended)

import { useMemo, useState } from 'react';
import {
  MaterialReactTable,
  MRT_ColumnFilterFnsState,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

//example data type
type Person = {
  name: {
    firstName: string;
    lastName: string;
  };
  address: string;
  city: string;
  state: string;
};

//nested data is ok, see accessorKeys in ColumnDef below
const data: Person[] = [
  {
    name: {
      firstName: 'John',
      lastName: 'Doe',
    },
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
  },
  {
    name: {
      firstName: 'Jane',
      lastName: 'Doe',
    },
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
  },
  {
    name: {
      firstName: 'Joe',
      lastName: 'Doe',
    },
    address: '566 Brakus Inlet',
    city: 'South Linda',
    state: 'West Virginia',
  },
  {
    name: {
      firstName: 'Kevin',
      lastName: 'Vandy',
    },
    address: '722 Emie Stream',
    city: 'Lincoln',
    state: 'Nebraska',
  },
  {
    name: {
      firstName: 'Joshua',
      lastName: 'Rolluffs',
    },
    address: '32188 Larkin Turnpike',
    city: 'Omaha',
    state: 'Nebraska',
  },
];

export function QueryLogTable(): React.JSX.Element {
  //should be memoized or stable
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'name.firstName', //access nested data with dot notation
        header: 'First Name',
        size: 150,
      },
      {
        accessorKey: 'name.lastName',
        header: 'Last Name',
        size: 150,
      },
      {
        accessorKey: 'address', //normal accessorKey
        header: 'Address',
        size: 200,
      },
      {
        accessorKey: 'city',
        header: 'City',
        size: 150,
      },
      {
        accessorKey: 'state',
        header: 'State',
        size: 150,
      },
    ],
    [],
  );

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

  const table = useMaterialReactTable({
    columns,
    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
    enableColumnFilterModes: true,
    onColumnFilterFnsChange: setColumnFilterFns,
  });

  return <MaterialReactTable table={table} />;
};

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Isayas7]

state: {
columnFilterFns,
},

Add columnFilterFns to the state object within the useMaterialReactTable hook. This will allow the table to track the state of the filter functions for each column.

[KevinVandy]

Yep, you have to just pass the state back in

[pymumu]

state: { columnFilterFns, },

Add columnFilterFns to the state object within the useMaterialReactTable hook. This will allow the table to track the state of the filter functions for each column.

It works normally after this modification, thank you