[v8] How to add custom class to a cell in the column definition

[danicruz0415]

I'm trying to add a class from the Column definition to the element. Like the following

const defaultColumns: ColumnDef<Person>[] = [
{
    accessorKey: 'firstName',
    cell: info => info.getValue(),
    footer: info => info.column.id,
    myCustomClassList: ["d-flex"] // custom class only to this column
}]


<For each={row.getVisibleCells()}>
    {cell => (
        <td class={...cell.myCustomClass()}> // Add class here
            {flexRender(
                cell.column.columnDef.cell,
                cell.getContext()
            )}
        </td>
    )}
</For>

I was browsing and I found this issue that explains that previewsly, a className property could be provided but now in version 7 its done through custom props using cell.getCellProps, and it redirects me to this issue that has this working example. But it did not work in version 8.

Reading the documentation for migration to v8, it says that this option was deprecated, but it does not give any replacement. It uses flexRender but only inside the element, so it does not expose any properties to the td but the id.

I know that I can change my render funcion and start the rendering outside the like the following:

const defaultColumns: ColumnDef<Person>[] = [
{
    accessorKey: 'firstName',
    cell: info => <td class="d-flex">{info.getValue()}<td>,
    footer: info => info.column.id
}]

<For each={row.getVisibleCells()}>
    {cell => (
        {flexRender(
                cell.column.columnDef.cell,
                cell.getContext()
        )}
    )}
</For>

But this would require me to manually add the element to each column even when 90% of the time I dont need to add a custom class. I think I am missing something from the v8 docuentantion hopefully simple. Any help is greatly appreciated. Thanks in advance

[TonyVeigel]

cell.column.columnDef.myCustomClassList

[danicruz0415]

@TonyVeigel thanks, but this property does not exist. I am using typescript so it throws an error, as it only expects known properties.

I know I could extend the class and add that property, but, isn't there any property that performs this role? I think it's a common thing to need (to add any custom property, be it a class or a data attribute or anything) and as shown in the links I found, it was supported in previews versions 😢

[TonyVeigel]

I don't use typescript thankgoodness :), I know the "official" way is to do cell.column.columnDef.meta.myCustomClassList, not sure if that fixes typescript issue or not because I've never used it.

{
accessorKey: 'firstName',
cell: info => info.getValue(),
footer: info => info.column.id,
meta: {myCustomClassList ["d-flex"] }
}]

[danicruz0415]

That's what I needed!

The type system still was not happy, so I had to setup an extension interface to add the new properties like explained here but after that It worked perfectly. Thank you

[R0tmayer]

I still cant apply custom class to my Header or Cell.

There is my code: https://pastebin.com/Md3X16hH

I just want to "text-right" my Amount column and cell.

cell.column.columnDef.meta?.className - doesn't work because TS2339: Property className does not exist on type ColumnMeta<Order, unknown>

How to do it?

[nlopezm]

I created a tanstack-table.d.ts file with this to make typescript happy:

import '@tanstack/react-table'

declare module '@tanstack/react-table' {
  interface ColumnMeta<TData extends RowData, TValue> {
    className?: string
  }
}

Note that this is applied globally: https://tanstack.com/table/latest/docs/api/core/column-def#meta