Passing data to a specific column's cells from a row for a click handler?

[jschuur]

I would like to do something at the cell level that is triggered when any part of the row that this one cell is in is clicked.

My question is how I might pass something at the table row level (where a table.getRowModel().rows.map() is running e.g.) down to a specific cell, so that I can access it in its ColumnDef entry. This way I could pass through a ref or callback from the row.

More specific details in this shadcn discussion post. I essentially want to also be able to toggle a sheet that is defined in a cell with a trigger from a row click.

I'm using v8 and flexRender and thought somehow through maybe I can splice it in with the data it gets from cell.getContext(), but I don't know how I'd retrieve that at the cell level.

<TableRow
  key={row.id}
  onClick={() => console.log('row click')}
>
  {row.getVisibleCells().map((cell) => (
    <TableCell
      key={cell.id}
      className={cn([
        'align-top p-2 sm:p-4',
        row.getValue('active') ? '' : 'text-slate-300',
      ])}
    >
      {flexRender(cell.column.columnDef.cell, cell.getContext())}
    </TableCell>
  ))}
</TableRow>