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

Question

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 think its a pretty common thing to need, but I could not find anything in the docs or in the examples (maybe did not look hard enough) but any help is really appreciated

Note: 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

Answer 1

With the help of this discussion and with a little bit of digging to keep the type system happy this is the official way to add custom classes or any other custom information you need for you columns

1. If you are using Typescript: add an extension to the ColumnMeta interface

(if you are not using typescript you can skip to step 2)

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

2. Add your propery to the desired column

const defaultColumns: ColumnDef<Person>[] = [
{
    accessorKey: 'firstName',
    cell: info => info.getValue(),
    footer: info => info.column.id,
    // add meta property
    meta: {
        myCustomClass: "bg-red-500",// declare the property here
    }
},
...

3. Use the property on your table render

<For each={row.getVisibleCells()}>
    {cell => (
        <td class={cell.column.columnDef.meta?.class ?? ""}>
            {flexRender(cell.column.columnDef.cell, cell.getContext())}
        </td>
    )}
</For>