Global Filter fails to search a column when the top values are null | undefined

[EDav1123]

material-react-table version

v.1.9.1

react & react-dom versions

v.18.2.0

Describe the bug and the steps to reproduce it

1. Create a dataset.
2. Leave one of the value in the top row as null or undefined.
3. Create the columns and pass everything to the object. Be sure to not parse the null value as anything but null | undefined
4. Notice if you try to search for anything under the column where the first value is null or undefined, Golbal Filter won't be able to find anything.

As an additional note, I have tried to make my own custom filter (filterFns) to go around the issue only to find out the entire column was absent from row (the first argument of the filter function).

Minimal, Reproducible Example - (Optional, but Recommended)

https://stackblitz.com/edit/github-5zzklf-3s8ejv?file=src/TS.tsx is the sandbox I've used for the video demo I've provided bellow.

A even more minimalistic exemple would be:

import React, { useMemo } from 'react';
import ReactDOM from 'react-dom/client';
import MaterialReactTable, { type MRT_ColumnDef } from 'material-react-table';

type Fruit = {
  id: number;
  fruit: string | null;
};

const data: string[] = [
  { id: 40, fruit: null },
  { id: 12, fruit: "Poire" },
  { id: 23, fruit: "Oirange" },
];

const Example = () => {
  const columns = useMemo<MRT_ColumnDef<Fruit>[]>(
    () => [ 
      { accessorKey: 'id', header: 'ID' },  
      { accessorKey: 'fruit',  header: 'Fruit' }
    ], [] 
  );

  return <MaterialReactTable columns={columns} data={data} />
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Example />
  </React.StrictMode>,
);

Screenshots or Videos (Optional)

https://youtu.be/gMFnv27FUug

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.

[KevinVandy]

This is unfortunately by design in TanStack Table. Any column that has null data is automatically excluded from being allowed to global filter.

I'll see if this is safe to fix upstream in TanStack Table though

[KevinVandy]

By the way, this is the proper way to define columns that have null values in TanStack Table. Fallback to an empty string if data is null or undefined

  const columns = useMemo<MRT_ColumnDef<Fruit>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
      },
      {
        accessorFn: (row) => row.fruit ?? '',
        id: 'fruit',
        header: 'Fruit',
      }
    ],
    [],
  );

[EDav1123]

Thank you for looking into this :)

This one was found quite late into development for a web app, making this solution a bit costly to implement. So I searched for alternative and found out it was, surprisingly, not a limitation talked about often beyond this fallback.

If this cannot be fixed, I would like to suggest adding a notice in the docs about avoiding the uses of null/undefined values in the dataset.

[garrett-franklin-encor]

I agree with @EDav1123 that this should be mentioned in the docs. It's also worth mentioning that if the top row is not null, but there's a null value in a later row, an error is thrown (trying to access property "toString" of null) when you search. Another solution that would be really handy would be to provide a "nullValue" or "coalesce" key to the columns prop that allows you to provide a default value in the event of null. Using an accessorFn for every key that may be null seems tedious.