Default column filter mode may become undefined about mantine-react-table

[KevinVandy]

From my experience, this only appears during local development after a hot module reload (HMR / saving your code). I don't think it ever occurs in production. Hearing that you did eventually see it happen in prod is a bit concerning. We'll need to look into it more if that is true.

[Guria]

Currently workarounded with:

columnFilterFns: Object.keys(columnVisibility).reduce((acc, key) => ({ ...acc, [key]: 'contains' }), {})

Btw, it doesn't works if I put fuzzy in above snippet instead of contains. Maybe it will help to debug the issue.

[rrahul789]

Hi Guria, I am also facing the similar issue in my application, I am using server side filtering and sorting. I have defined my columns like below { accessor: "column1",
accessorFn: (row) => row.baseApprovalEntity?.totalVotes,
id: "column1",
header: "Header",
enableColumnFilterModes: true,
columnFilterModeOptions: ["equals", "notEquals", "lessThan", "greaterThan", "greaterThanOrEqualTo", "lessThanOrEqualTo"],
filterFn: 'equals'} and i am using my mantine table as below
<MantineReactTable
mantinePaperProps={{
shadow: "none",
sx: {
borderRadius: "0",
border: "none",
},
}}
manualSorting
manualFiltering
manualPagination
enableStickyHeader
enableStickyFooter
mantineTableContainerProps={{
sx: { height: tableHeight ? 710 : 500 },
}}
filterFromLeafRows
paginateExpandedRows={false}
enablePinning
initialState={{
density: "xs",
showColumnFilters: true,
columnPinning: { right: ["mrt-row-actions"] },
}}
enableGlobalFilter={false}
enableColumnActions={false}
enableFullScreenToggle={false}
enableDensityToggle={false}
enableMultiSort={false}
enableEditing
enableColumnFilterModes
renderTopToolbarCustomActions={() => (
<Title order={3} align="center" ml="1rem">
{pageName}
</Title>
)}
rowCount={totalCount}
onSortingChange={setSorting}
onPaginationChange={setPagination}
onColumnFiltersChange={setColumnFilters}
onColumnFilterFnsChange={setColumnFilterFns}
state={{
pagination,
isLoading,
sorting,
columnFilters,
columnFilterFns
}}
columns={tableHeader}
data={tableData}
/>

For me Filter Mode is coming as undefined, every time i have to select the mode from the options before apllying the filter. Can you help me to identify the root cause and possible solution for this?

[snturk]

Currently workarounded with:

columnFilterFns: Object.keys(columnVisibility).reduce((acc, key) => ({ ...acc, [key]: 'contains' }), {})

Btw, it doesn't works if I put fuzzy in above snippet instead of contains. Maybe it will help to debug the issue.

Hi, where did you put this code? Or could you share a whole file that works for this issue?