How to suppress/disable "deeply nested key returned undefined" warning

[MattChowski]

Hello!

This seems to be a rather simple question but no idea how to solve it. From our backend, some values can return "undefined", I do handle this case in the table so nothing breaks.

Being fully aware of this issue, I'd like to remove the warning from the console as it obstructs other messages. Is there any way to do so? I have no ways to change the values from the backend to return null instead.

I've tried to look for the issue and the only thing I found is that this used to log an error instead of a warning and decision has been made to keep the warning.

Thanks in advance!

[devthub]

DO you have any work around for this?

[MattChowski]

Nope

[KevinVandy]

You can use an accessorFn instead of the string accessorKey. In your accessorFn, you can handle the undefined checks how you want.

[danikane]

That's what I ended up with then I saw this answer. :)

[briavicenti]

This is also an issue for us. Our tables have placeholder logic to show a dash in the event that a given row value is undefined, and so we don't benefit from the warnings being thrown. I implemented a custom accessorFn that uses the Lodash _.get helper to retrieve a field's value with a nested key, but it would have been nice to use the React-Table's built-in functionality for this instead!

[strimbob]

bump! i also think this warning should be configurable , it is super annoying.I implemented a custom accessorFn too

[martinliptak]

What's the point of showing the warning? Just handle it the same way as null. For example, we show a list of orders along with their supplier's name. Some orders don't have a supplier so "supplier.name" is undefined. I don't find any value in the warning.

[cuongdo926]

I believe this will eliminate the warning and work for sorting without needing to define both.

accessorFn: () => "car.color"

[KevinVandy]

Are you not using an id with the accessorFn? You should only need an accessorFn

[MichaelDimmitt]

@KevinVandy,

Maybe I was wrong using accessorKey instead of id. I think it got on that path in my goal to get it working in as few changes as possible. I was not using id with the accessorFn.

Conclusion:
Either id, accessorKey, or header were need for sorting to work.

Note:
Oddly enough, if id is not provided accessorKey will be used; and if that is not provided header will be used as the id.
Note: I was using server-side-sorting

Another Note:
If id, accessorKey, and header are not present and only accessorFn is present there is a runtime error telling you to put the id. I did not run into this runtime error since I added an accessorKey and had a header on the column.

// Recommended approach. ✅
const someColumns = [{
        id: 'originalRow.car.color',
        accessorFn: (originalRow) => originalRow.car?.color,
        header: 'Car Color.',
}]

// Also works but is probably not recommended. ❌
const someColumns = [{
        accessorKey: 'originalRow.car.color',
        accessorFn: (originalRow) => originalRow.car?.color,
        header: 'Car Color',
}]

console logging sorting in any of the scenarios described will show the following:

sorting: [
    {
        "id": "originalRow.car.color",
        "desc": false
    }
]

[MichaelDimmitt]

@cuongdo926, simply adding accessorFn will eliminate the nested warning but sorting will not work the simplest example of this I could give you is the following column.

const someColumns = [{
        accessorFn: (originalRow) => originalRow.car?.color,
        header: 'Car Color',
}]

server-side-sorting will not work in this circumstance because it does not see your sort key as { id: 'originalRow.car.color' }, rather the id passed is the header string.

[cuongdo926]

Unique Column IDs
Columns are uniquely identified with 3 strategies:
If defining an accessor column with an object key or array index, the same will be used to uniquely identify the column.
Any periods (.) in an object key will be replaced by underscores (_).
If defining an accessor column with an accessor function
The columns id property will be used to uniquely identify the column OR
If a primitive string header is supplied, that header string will be used to uniquely identify the column
🧠 An easy way to remember: If you define a column with an accessor function, either provide a string header or provide a unique id property.

Apologies for the brief comment earlier; it didn't clearly explain my solution. Here is my schema and column definition. I'm working on server-side sorting, and the id value is what the server expects. I hope the follow code helps illustrate my explanation.

// schema
export const taskSchema = z.object({
  id: z.number(),
  priority: z
    .object({
      id: z.number(),
      name: z.string(),
    })
    .nullish(),
  title: z.string()
});
export type TaskItem = z.infer<typeof taskSchema>;

// column definitions
const columnHelper = createColumnHelper<TaskItem>();
export const columns = [
  columnHelper.accessor('title', {
    header: ({ column }) => <TableColumnHeader column={column} title="Title" />,
    cell: ({ renderValue }) => renderValue(),
  }),

  // NOT WORK. No warning, but sorting doesn't work
  // columnHelper.accessor((x) => x.priority?.name, {
  //   id: 'priority.name',
  //   header: ({ column }) => <TableColumnHeader column={column} title="Priority" />,
  //   cell: ({ row }) => row.original.priority?.name,
  //   meta: {
  //     visibilityName: 'priority',
  //   },
  // }),

  // NOT WORK. Warning: "priority" in the nested key "priority.name" is undefined.
  // columnHelper.accessor('priority.name', {
  //   id: 'priority.name',
  //   header: ({ column }) => <TableColumnHeader column={column} title="Priority" />,
  //   cell: ({ row }) => row.original.priority?.name,
  //   meta: {
  //     visibilityName: 'priority',
  //   },
  // }),

  // WORKS but the accessor must match a schema key
  // columnHelper.accessor('priority', {
  //   id: 'priority.name',
  //   header: ({ column }) => <TableColumnHeader column={column} title="Priority" />,
  //   cell: ({ row }) => row.original.priority?.name,
  //   meta: {
  //     visibilityName: 'priority',
  //   },
  // }),

  // WORKS. The accessor can be any value — it doesn't have to match a schema key.
  columnHelper.accessor(() => 'priority.name_or_anything', {
    id: 'priority.name', // react-table sorting state: "sorting":[{"id":"priority.name","desc":false}]
    header: ({ column }) => <TableColumnHeader column={column} title="Priority" />,
    cell: ({ row }) => row.original.priority?.name,
    meta: {
      visibilityName: 'priority',
    },
  }),
  columnHelper.accessor('id', {
    header: ({ column }) => <TableColumnHeader column={column} title="Id" />,
    cell: ({ row }) => row.original.id,
    size: 48,
  }),
  columnHelper.display({
    id: '_actions',
    cell: ({ row }) => <DataTableRowActions row={row} />,
    enableHiding: false,
    size: 60,
  }),
];

The JSON payload I send to the server.

{"page":1,"pageSize":10,"sort":[{"id":"priority.name","desc":true}],"filters":[]}