Is there a way to access two field using columnHelper.accessor ?

[bryanprimus]

I want to access two fields with columnHelper.acessor. because I'm showing two data in the same column.

something like this

type Data {
  senderName: string
  senderId: string
}

const columnHelper = createColumnHelper<Data>()

columnHelper.accessor(["senderName", "senderId"], {
  header: "Sender Details",
  cell: info => `${info.getValue().senderName} ${info.getValue().senderId}`,
  size: 180,
}),

or is there any workaround?

[writes-of-spring]

The first argument of the accessor can be a string, or a callback function using the row data
https://tanstack.com/table/v8/docs/guide/column-defs#accessor-functions

const columnHelper = createColumnHelper<Data>()

columnHelper.accessor(row => `${row.senderName} ${row.senderId}`, {
  header: "Sender Details",
 id: 'senderDetails'
  size: 180,
}),

[bryanprimus]

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?

[writes-of-spring]

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

[pmarxbraun]

@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 👍

[writes-of-spring]

@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.

[akin-fagbohun]

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