accessorFn causes exception when state.isLoading is true and data is empty array

[cristiancundari]

mantine-react-table version

1.3.4 & v2

react & react-dom versions

17.0.2

Describe the bug and the steps to reproduce it

In a situation where the table data are fetched from a server; specifically, when the data array is still empty while awaiting the server response and the isLoading state is set to true to indicate that the data is not yet ready, an exception occurs if a columnDef employs an accessorFn to access a nested object property. This leads to application crash.

To replicate the problem, simply set the table data prop to an empty array, set the isLoading state to true, and utilize any columnDef that accesses a nested object property.

It appears that the accessorFn is invoked even when no data is present, causing row.name to be undefined.

Minimal, Reproducible Example - (Optional, but Recommended)

const columns = useMemo<MRT_ColumnDef<Person>[]>(
  () => [
    {
      accessorFn: (row) => row.name.firstName,
      id: 'firstName',
      header: 'First Name',
    },
  ],
  [],
);

const table = useMantineReactTable({
  columns,
  state: {
    isLoading: true
  },
  data: [], //must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
});

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.