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>
))}

TanStack•3y ago•

8 replies

worthy-azure

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>
))}

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads