cellClassName & headerClassname v8

[laurent512]

Hi,

Is there some cellClassName & headerClassname properties in the column definition in V8 ?

My goal is to define specific className for specific cells ?

Current way of doing it is cell: (props) => <div classsName="...">{props.getValue()}</div>,

Thank you !

[jordanjustice]

@laurent512 I was struggling to find the same thing for a few days, but stumbled across this question: #4097

With the clue there, I'm now defining a cellClassName and headerClassName in the column def's meta object.

const defaultColumns: ColumnDef<Submission>[] = [
  {
    id: 'actions',
    header: '',
    size: 20,
    minSize: 20,
    maxSize: 20,
    enableResizing: false,
    meta: {
      cellClassName: 'w-4'
    },
    cell: () => <div className="w-5 h-5 bg-red-600 rounded-full" />
  }
]

...
// The `td` element in the table now has this for grabbing the classes (note the optional chaining)
<td
  key={cell.id}
  className={classNames(
    'px-4 py-2.5 text-sm font-sans text-blue-gray-900 break-words whitespace-nowrap',
    cell.column.columnDef.meta?.cellClassName
)}>
  {flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
...

[marceloverdijk]

Does it work well with TypeScript warning/errors or did you declared the cellClassName via declaration merging?
I'm trying to do something similar but I'm struggling with TypeScript warning/errors: #4157

[tannerlinsley]

Column meta is the answer ;)

…

On Jul 5, 2022, 11:04 AM -0600, Jordan Justice ***@***.***>, wrote: @laurent512 I was struggling to find the same thing for a few days, but stumbled across this question: #4097 With the clue there, I'm now defining a cellClassName and headerClassName in the column def's meta object. const defaultColumns: ColumnDef<Submission>[] = [ { id: 'actions', header: '', size: 20, minSize: 20, maxSize: 20, enableResizing: false, meta: { cellClassName: 'w-4' }, cell: () => <div className="w-5 h-5 bg-red-600 rounded-full" /> } ] ... // The `td` element in the table now has this for grabbing the classes (note the optional chaining) <td key={cell.id} className={classNames( 'px-4 py-2.5 text-sm font-sans text-blue-gray-900 break-words whitespace-nowrap', cell.column.columnDef.meta?.cellClassName )}> {flexRender(cell.column.columnDef.cell, cell.getContext())} </td> ... — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>