Values of nested fields

[Janekk]

Say i have a object like:

  id: 1,
  status: {
    is_expired: true,
    is_archived: false,
  }
}

and I want both is_expired and is_archived to appear as columns in the grid, how do I access the value of such nested fields to render it in the cell properly?

[Janekk]

I figured this would work:

          Cell: ({cell}) => {
            return <Checkbox disabled checked={cell.row.original.status.isExpired}/>
          },

[KevinVandy]

Yes, that works, but be aware that it can break filtering and sorting on a column if using nested data with no accessorKey or accessorFn.

Since this column is a checkbox, you probably don't care about that in this instance though

[Janekk]

ok so it is safer to apply accessorKey or accessorFn and then just use cell.getValue()? @KevinVandy

[KevinVandy]

Yes, I believe that is what is encouraged by TanStack Table, the library this is built on top of.

err actually wait, I don't mean instead of cell.getValue(), I mean still use cell.getValue() instead of row.original if you can, though it does not really matter. Providing an accessorFn like accessorFn: row => row.status.isExpired will still let you use cell.getValue()

More reading about that stuff here https://tanstack.com/table/v8/docs/guide/column-defs

[KevinVandy]

err actually wait, I don't mean instead of cell.getValue(), I mean still use cell.getValue() instead of row.original if you can, though it does not really matter. Providing an accessorFn like accessorFn: row => row.status.isExpired will still let you use cell.getValue()

[KevinVandy]

The Usage docs have been rewritten to explain this better: https://www.material-react-table.com/docs/usage