Column with null values causes crashes with some filter modes

[Guria]

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

Data set with string column but it may contain null values.
Define column with just accessorKey.
enableColumnFilters and enableColumnFilterModes on table.
Try to enable filter other than fuzzy on column with null values.

Minimal, Reproducible Example - (Optional, but Recommended)

const rows = [
  { id: 1, office: 'Present' },
  { id: 2, office: null },
]

const columns = [
  {
    header: 'Office',
    accessorKey: 'office',
  }
]

<MantineReactTable
  coluns={columns}
  rows={rows}
  enableColumnFilters
  enableColumnFilterModes
/>

Screenshots or Videos (Optional)

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'toString')

Call Stack
Object.equals [as filterFn]
node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js (266:0)
memo.key
node_modules/@tanstack/table-core/build/lib/index.mjs (3173:0)
Object.eval [as _getFilteredRowModel]
node_modules/@tanstack/table-core/build/lib/index.mjs (64:0)
Object.getFilteredRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (1193:0)
Object.getPreGroupedRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (1395:0)
eval
node_modules/@tanstack/table-core/build/lib/index.mjs (3395:0)
Object.eval [as _getGroupedRowModel]
node_modules/@tanstack/table-core/build/lib/index.mjs (56:0)
Object.getGroupedRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (1403:0)
Object.getPreSortedRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (2481:0)
eval
node_modules/@tanstack/table-core/build/lib/index.mjs (3310:0)
Object.eval [as _getSortedRowModel]
node_modules/@tanstack/table-core/build/lib/index.mjs (56:0)
Object.getSortedRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (2489:0)
Object.getPreExpandedRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (861:0)
eval
node_modules/@tanstack/table-core/build/lib/index.mjs (3537:0)
Object.eval [as _getExpandedRowModel]
node_modules/@tanstack/table-core/build/lib/index.mjs (56:0)
Object.getExpandedRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (869:0)
Object.getPrePaginationRowModel
node_modules/@tanstack/table-core/build/lib/index.mjs (1626:0)
MRT_TableRoot
node_modules/mantine-react-table/dist/esm/mantine-react-table.esm.js (2809:5)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (16305:0)
updateFunctionComponent
node_modules/react-dom/cjs/react-dom.development.js (19588:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21601:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (26085:0)
flushSyncCallbacks
node_modules/react-dom/cjs/react-dom.development.js (12042:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (25651:0)

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

Maybe, I'll investigate and start debugging

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.

[Guria]

Possible workaround:

function getNullableStringAccessor<TData extends object>(key: keyof TData) {
  return (item: TData) => item[key] || ''
}

const columns = [
  {
    header: 'Office',
    accessorFn: getNullableStringAccessor('officeLocation'),
  }
]

But I think it might affect other functionality like sortUndefined

[KevinVandy]

TanStack Table hates null values. This is pretty much the official pattern you should use.

const columns = [
  {
    header: 'Office',
    accessorFn: (row) => row.office ?? '',
  }
]

[Guria]

So we close this issue as won't fix, right?

[KevinVandy]

TanStack Table itself may have some fixes in the future

[Guria]

Closing since it is upstream issue