TanStack React table v8 根据单元格值设置每个单元格的样式

Question

我们正在将表从 v7 迁移到 v8。我对单元格条件样式有点疑问。所以基本上我想做的是，根据状态（即将进入表数据），我需要向行中的每个单元格添加特定的类名。

在 v7 中我们使用了这个： https: //react-table-v7.tanstack.com/docs/examples/data-driven-classes-and-styles

但在 v8 中我找不到类似的东西......

到目前为止，我尝试meta在列定义中使用https://tanstack.com/table/v8/docs/api/core/column-def#meta，我可以在其中为 className 属性设置一些值，并在我的 JSX 中使用它，如下所示：

className={cell.column.columnDef.meta?.className}

但问题是我可以设置为元的任何内容都是静态值。对于我的情况，我需要根据我的状态值设置特定的 className。似乎在元中我们无法访问任何单元格道具......

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",
     },
    },
    ...

那么有什么方法可以使用 v8 来实现这一点吗？

谢谢你！

Answer 1

第一种方法 - 通过列定义元键：

我们可以通过meta获取V8中每个cell的详细上下文，比如

{
    accessorKey: 'section',
    cell: (info) => info.getValue(),
    footer: (props) => props.column.id,
    meta: {
        getCellContext: (context: CellContext<Person, unknown>) => {
            if (context.row.index === 0) {
                // console.log(context)
                return {
                    style: { fontWeight: 'bold', minWidth: '30%', textTransform: 'uppercase' },
                    className: 'bold',
                }
            }
        },
    },
},

为了获得这样的动态上下文，我们需要向ColumnMeta添加额外的属性。

declare module '@tanstack/react-table' {
    interface ColumnMeta<TData, TValue> {
        // Your additional properties here
        getCellContext: (context: CellContext<TData, TValue>) => TableCellProps | void
    }
}

然后我们可以在循环中使用这个函数

<TableBody>
    {table
        .getRowModel()
        .rows.slice(0, 20)
        .map((row) => {
            return (
                <TableRow key={row.id} {...getRowProps(row)}>
                    {(isSplit ? row.getCenterVisibleCells() : row.getVisibleCells()).map((cell) => {
                        let hasMeta = cell.getContext().cell.column.columnDef.meta

                        return (
                            <TableCell
                                key={cell.id}
                                {...(hasMeta && { ...hasMeta.getCellContext(cell.getContext()) })}
                            >
                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
                            </TableCell>
                        )
                    })}
                </TableRow>
            )
        })}
</TableBody>

通过此，您可以根据值向每个 *** TABLE CELL *** 添加样式、className等。

但是你不能用上面的方法来设置TABLE ROW的样式。为了那个原因

第二种方法 - 通过回调函数：

为行和单元格定义两个函数

// Func to provide props to table row
const getRowProps = (context: Row<Person>): TableRowProps | void => {
    console.log(context)
    if (context.original.section.includes('section')) {
        return { className: 'sectionHeader', sx: (theme) => ({ background: theme.palette.primary.light }) }
    }
}

// Func to provide props to table cell
const getCellProps = (context: CellContext<Person, unknown>): TableCellProps | void => {
    if (context.row.index === 0) {
        // console.log(context)
        return {
            style: { fontWeight: 'bold', minWidth: '30%', textTransform: 'uppercase' },
            className: 'bold',
        }
    }
}

只是解构函数

<TableBody>
    {table
        .getRowModel()
        .rows.slice(0, 20)
        .map((row) => {
            return (
                <TableRow key={row.id} {...getRowProps(row)}>  //<- here
                    {row.getLeftVisibleCells().map((cell) => {

                        return (
                            <TableCell
                                key={cell.id}
                                {...getCellProps(cell.getContext())} // <-here
                            >
                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
                            </TableCell>
                        )
                    })}
                </TableRow>
            )
        })}
</TableBody>

Answer 2

我也遇到了同样的问题，正如您提到的，V7 中有单独的示例。

对于 v8 没有足够的文档或正确的示例

这是我的实现的链接，我可以在 v8 中添加不同的列颜色。希望这可以帮助。如果您还有任何疑问，请告诉我