this approach doesn't allow values other than string if we pass jsx row => <div>{row.senderName}</div> it will be rendered as [object Object] . is there a way to fix this?

this approach doesn't allow values other than string if we pass jsx row => <div>{row.senderName}</div> it will be rendered as [object Object] . is there a way to fix this?

The accessed value should be a primitive, or you'll have to handle filtering/ sorting. What you're looking for is the cell render.
https://tanstack.com/table/v8/docs/guide/column-defs#cell-formatting

@writes-of-spring if my objects in my data structure look like this (with nested array on categories)

"name": "name",
"logo": "url",
"categories": "[
  {
    "name": "Entertainment",
    "slug": "entertainment"
  },
  {
    "name": "Kids",
    "slug": "kids"
  },
]",

How can I configure my accessor (or something else ?) on "categories" to display both of them in my cell using map ("Entertainement, Kids") ? Help much appreciated 👍

@pmarxbraun
accessor(row => row.categories.map(category => category.name), {
name: 'categories'
filterFn: 'arrIncludes',
cell: (info) => info.getValue().join(', ')
}

You could also join in the accessor function, or us a Intl.ListFormat for the cell render.

Just to add to this because it has been quite the ball ache.. this is how I accomplished this...

const columns = [
  columnHelper.accessor('name', {
    header: () => 'Name',
    cell: (props) => (
      <span className="flex flex-col">
        <span className="name">{props.row.original.name}</span>
        <span className="email">{props.row.original.email}</span>
      </span>
    ),
    size: 1800, // HACK: w-full doesn't work... this is arbitrarily high to fix the table width
  }),
  columnHelper.accessor('market', {
    header: () => 'Market',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('wallet-balance', {
    header: () => 'Balance',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('status', {
    header: () => 'Status',
    cell: (info) => info.getValue(),
  }),
];

// additional code for the full width hack
<td
  key={cell.id}
  className={cn('p-3 text-sm whitespace-nowrap')}
  style={{
    width: cell.column.getSize(),
  }}
>

It wound up looking something like...

UI