material-react-table icon indicating copy to clipboard operation
material-react-table copied to clipboard

Global Search filter functions for any function apart from "fuzzy" fails to work with grouping enabled, if one of the column contains null data

Open braj-k opened this issue 3 years ago • 2 comments

material-react-table version

v1.5.7

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

Steps to reproduce

  1. Enable grouping on any column
  2. Ensure the global filter is enabled
  3. set globalFilterFn="contains" or any other function apart from "fuzzy"
  4. Ensure that one of the columns with global filtering enabled contains null data.
  5. Apply any global filter by searching in the search bar

The filter fails to work. In console, you can see an error saying below. 5filterFns.ts:25 Uncaught TypeError: Cannot read properties of null (reading 'toString') at Object.contains [as filterFn] (filterFns.ts:25:34) at memo.key (getFilteredRowModel.ts:118:37) at Object._getFilteredRowModel (utils.ts:158:14) at Object.getFilteredRowModel (Filters.ts:424:22) at Object.getPreGroupedRowModel (Grouping.ts:217:42) at getGroupedRowModel.ts:10:47 at Object._getGroupedRowModel (utils.ts:143:21) at Object.getGroupedRowModel (Grouping.ts:227:22) at Object.getPreSortedRowModel (Sorting.ts:367:41) at getSortedRowModel.ts:10:46

I debugged the code to find that there is no check present to check if the column data is null and to prevent it, const contains = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/s/material-react-table-grouping-global-fitler-issue-315-hmbn6u

Screenshots or Videos (Optional)

No response

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

None

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.

braj-k avatar Jan 11 '23 15:01 braj-k

Obvious workaround of course is, use accessorFn to remove null values and change it to empty string.

braj-k avatar Jan 11 '23 15:01 braj-k

Considering fixing this upstream in TanStack Table https://github.com/TanStack/table/issues/4280

KevinVandy avatar Jan 11 '23 16:01 KevinVandy