Default column filter mode may become undefined

Guria commented 1 year ago

mantine-react-table version

1.0.0-beta.2

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

Default column filter mode may become undefined. It still looks like working as fuzzy, but it shows undefined in filter header label and tooltips.

I have no 100% working steps and minimal example. I haven't found it in examples on official website. And I tried to find any clues when it starts to happen. And in my local setup it started to reproduce even in bare minimum setup. First time I thought it happen only with next js devserver and only after HMR applied. Once I did next build and next start problem dissapeared. Soon it started to happen without HMR and later on my next build / next start without any additional manipulations.

Minimal, Reproducible Example - (Optional, but Recommended)

Simple to demonstrate use case: https://stackblitz.com/github/KevinVandy/mantine-react-table/tree/main/apps/mantine-react-table-docs/examples/customize-filter-modes/sandbox?file=src/TS.tsx

make any change in source files and save
wait for HMR happen
see that filter mode for column became undefined

Again. In my local setup I have this 100% of time unless I manually select some mode from dropdown explicitly. Even with simplest setup possible, production build and without HMR happened.

Screenshots or Videos (Optional)

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

Maybe, I'll investigate and start debugging

Terms

[X] 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.

KevinVandy commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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={() => (

{pageName}

                )}
                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 commented 1 year ago

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?

KevinVandy / mantine-react-table