Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
braj-k opened this issue Jan 11, 2023 · 2 comments

Comments

@braj-k
Copy link

braj-k commented Jan 11, 2023

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

  • 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
Copy link
Author

braj-k commented Jan 11, 2023

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

@KevinVandy
Copy link
Owner

Considering fixing this upstream in TanStack Table TanStack/table#4280

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants