accessorFn called when loading UI with empty data crashes table

[KubiGR]

mantine-react-table version

2.0.0-beta.9, 1.3.4

react & react-dom versions

18.3.1

Describe the bug and the steps to reproduce it

When using the isLoading (or any other loading UI option) and the data is empty, if you use accessorFn with nested properties you get an error that crashes the table.

You can reproduce the problem by following the demo at Loading UI (https://www.mantine-react-table.com/docs/guides/async-loading#loading-demo) and using an accessorFn

I have a stackblitz here https://stackblitz.com/edit/github-vq95pemy?file=src%2FTS.tsx

Minimal, Reproducible Example - (Optional, but Recommended)

https://stackblitz.com/edit/github-vq95pemy?file=src%2FTS.tsx

Screenshots or Videos (Optional)

No response

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.

[keshane]

For those encountering this problem, one workaround is to handle the null/undefined cases in your accessorFns and Cells, but adding an extra if-clause is distracting.

Other workaround is to use a helper function to define another list of MRT_ColumnDefs for the isLoading case. I created a helper function for our project that others may find helpful.

import type { MRT_ColumnDef, MRT_RowData } from 'mantine-react-table';

/**
 * Extends this fix to avoid calling accessorFn or Cell during the loading state
 * when there is no data. This helper function prevents functions that call accessorFn
 * or Cell during the loading state from encountering nulls and undefineds.
 * https://github.com/KevinVandy/mantine-react-table/pull/189
 */
export const columnDefsWithLoading = <T>(
    columnDefs: MRT_ColumnDef<T & MRT_RowData>[],
    isLoading: boolean,
) => {
    if (isLoading) {
        return columnDefs.map((colDef) => ({
            ...colDef,
            // No need to handle undefineds and nulls in your happy cases - return valid, but empty data.
            accessorFn: colDef.accessorFn ? () => '' : colDef.accessorFn,
            Cell: colDef.Cell ? () => '' : colDef.Cell,
        }));
    }
    return columnDefs;
};

Usage:

const [isLoading, setIsLoading] = useState(false);
const columnDefs = useMemo<MRT_ColumnDef<MyRow>[]>(
  () => 
    columnDefsWithLoading(
      [
        {
          accessorFn: (row) => row.alwaysDefinedPropertyInHappyCase,
          id: 'alwaysDefinedPropertyInHappyCase'
        }
      ],
      isLoading
    ),
  [isLoading]
);
  

[keshane]

I briefly looked into fixing it upstream, but the base Tanstack table doesn't have the concept of isLoading or skeletons so that code can't know when to avoid accessing row data.