[v8] [urgent] Data driven classes and styles for cells

[RobertasP]

We are migrating our tables from v7 to v8. And I'm kinda got a problem with cells conditional styling.
So basically what I want to do is, based on a status (which is coming to table data) I need to add a specific className to every cell in a row.

In v7 we used this: https://react-table-v7.tanstack.com/docs/examples/data-driven-classes-and-styles

But in v8 I can't find anything like that....

So far I tried to use meta in column definitions where I can set some values to className property, and use it in my JSX like this:
className={cell.column.columnDef.meta?.className}

But problem is anything I can set to meta are static values. For my case I need to set specific className based on my status value. And seems like in meta we can't access any cell props...

const driverFormatter = ({ row }) => {
  const { status } = row.original;

  return <span>{status}</span>;
};

const columns: ColumnDef<any,any>[] = [
    {
      accessorKey: "customerName",
      header: "Customer"
    },
    {
      accessorKey: "driver",
      header: "Driver",
      enableSorting: false,
      cell: driverFormatter,
      meta: {
          className: "disabled",
     },
    },
    ...

So is there are any way of achieving that using v8???

Thank you!

[pauliusef]

As in v8 the way cells are rendered has changed, you should be able to calculate custom class name when rendering the table. A quick idea that came to my mind would be to try something like this:

  <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td className={cell.column.id === 'Driver' ? getCellClassName(cell.row.original) : undefined}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>

Where you define a custom function getCellClassName() and then you can use cell.row.original to access the whole row object. You can always check cell.column.id to make sure that you're calling your class name logic only when rendering specific columns.

You might as well define getCellClassName function on the meta object in column definition and then it would be easier to call it when rendering cells. Then you would call it as className={cell.column.columnDef.meta?.getClassName?.(cell.row.original)}.

[RobertasP]

You might as well define getCellClassName function on the meta object in column definition and then it would be easier to call it when rendering cells. Then you would call it as className={cell.column.columnDef.meta?.getClassName?.(cell.row.original)}.

You are legend 🎖️ That approach helped to achieve exactly what we needed!

Thank you!