标签: react-table-v8

我目前正在尝试Tanstack Table，这是一个很棒的库！

我想做的是建立一个如下所示的表：

我的数据来自以下类型的 API：

type Accounting = {
  category: string;
  total: number; // Sum of all expenses
  expenses: {
    name: string;
    value: number;
  }[];
};

这是我到目前为止所得到的：

const columns = React.useMemo(
    () => [
      columnHelper.accessor("category", {
        header: "Category",
        id: "category",
        cell: (info) => {
          return (
            <>
              {info.row.getCanExpand() && (
                <button
                  {...{
                    onClick: info.row.getToggleExpandedHandler(),
                    style: { cursor: "pointer" },
                    className: "mr-2",
                  }}
                >
                  {info.row.getIsExpanded() ? (
                    <Chevron direction="down" />
                  ) : (
                    <Chevron direction="right" />
                  )}
                </button>
              )} …

我们正在将表从 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 来实现这一点吗？

谢谢你！

如果单元格中有两个值，如何对列进行排序？

columnHelper.accessor('violations', {
  id: 'violations',
  header: () => <p>Violations</p>,
  cell: (info) => (
    <div>
      <p>{info.getValue().count}</p>
      <p>{info.getValue().percent}%</p>
    </div>
  ),
}),

如果有办法的话，能否提供一个实现的例子？