T
TanStack•3y ago
foreign-sapphire

Recommended approach to setting `<td className={classes}>`?

I'm surprised to see that there is no utility for setting styles/classes on cells. What is the recommended way to do this? This is the api i was expecting: 
const columnHelper = createColumnHelper<Person>()

const columns = [
  columnHelper.display({
    id: 'firstName',
    cell: info => info.getValue(),
    className: info => info.getValue().length > 10 ? 'text-ellipsis overflow-hidden' : '',
  })
]

{row.getVisibleCells().map((cell) => (
  <td key={cell.id} className={cell.getClassName()}>
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </td>
))}
const columnHelper = createColumnHelper<Person>()

const columns = [
  columnHelper.display({
    id: 'firstName',
    cell: info => info.getValue(),
    className: info => info.getValue().length > 10 ? 'text-ellipsis overflow-hidden' : '',
  })
]

{row.getVisibleCells().map((cell) => (
  <td key={cell.id} className={cell.getClassName()}>
    {flexRender(cell.column.columnDef.cell, cell.getContext())}
  </td>
))}
8 Replies
conscious-sapphire
conscious-sapphire•3y ago
It does not make sense to have a 'className' property on its own. In the 'cell' one, you can put any JSX/component you want, therefore having the possibility of declaring classNames multiple times. Ex : 
cell: info => (<span className="px-3">
  <button className="flex justify-bewteen gap-2 px-1 bg-red-500 text-white">Click me</button>
  <span className="text-blue-500">{info.getValue}</span>
</span>)
cell: info => (<span className="px-3">
  <button className="flex justify-bewteen gap-2 px-1 bg-red-500 text-white">Click me</button>
  <span className="text-blue-500">{info.getValue}</span>
</span>)
foreign-sapphire
foreign-sapphireOP•3y ago
It does not make sense to have a 'className' property on its own.
Respectfully disagree here. I want to be able to change the td's background color, vertical align, etc.
conscious-sapphire
conscious-sapphire•3y ago
Sure, you will change the td properties, but my point being that this singular className property doesn't make sense when you want to work with Components inside cells. It would be weird to have the API expose such a property that only works in a specific scenario, although it is the most basic and natural one I'll give you that. But in my opinion, it would still bring too much confusion.
environmental-rose
environmental-rose•2y ago
That's fine but at least spell it as for idiots like me in the docs so we know how to do it the longer way around : )
stormy-gold
stormy-gold•2y ago
the docs could be better - default values are not documented - examples are mixed - would be great to have example with and without the options
conscious-sapphire
conscious-sapphire•2y ago
Yeah, nobody's here an idiot for being confused. The doc could be better for sure. I had to do try a lot of things blindly with the API before it clicks for me.
environmental-rose
environmental-rose•2y ago
Good to know I'm not the only one, hence my observation at https://discord.com/channels/719702312431386674/720768118963699783/1154361253041541222 as have been using Chat GPT to help me (I am more designer than developer so finding it quite tricky) , I also find the embedded code sandboxes sload to load at times. Getting there slowly though : )
conscious-sapphire
conscious-sapphire•2y ago
You could explore meta prop from extending React Table. https://tanstack.com/table/v8/docs/api/core/column-def From here on, in your render you can match up the cell/row and pull up the applicable className you want to add.
ColumnDef | TanStack Table Docs
Column definitions are plain objects with the following options: Options

Did you find this page helpful?