React-Table v7 Columns Typscript 样式类型问题

Question

你好，我被困住了，如果你能告诉我那就太好了 关于问题：

我用这些列实现了反应表

像往常一样渲染它们，然后我想确保每列都有动态样式，但我没有想到如何简单地在每列内声明样式属性。

结果找了不同地方，这一刻就卡住了

打字稿错误听起来像这样：

TS2322：类型 '{ 标头：字符串；访问器：“地址”；风格：{ 弹性： 细绳;最小宽度：字符串； }; }' 不可分配给类型 '柱子'。对象字面量只能指定 已知属性，并且类型中不存在“样式” 'ColumnInterface & { 访问器：“地址”; } & ColumnInterfaceBasedOnValue'.

我是打字稿新手，不知道我在哪里犯了错误 我将不胜感激任何提示或帮助，谢谢

Answer 1

您可以扩展列定义类型以满足您的需求。 使用

ColumnDef

类型的

tanstack/react-table

并添加您的样式对象。

import type { ColumnDef } from '@tanstack/react-table';

// New custom column def type
export type ColumnDefType<T> = ColumnDef<T> & { style?: Record<string, string> };

您可以在输入列时使用该类型。因此，例如，当您创建行时，样式对象可用。样式对象可以从

column.columnDef

中提取并在必要时应用。

import type { ColumnDefType } from '<custom-type-file-location>';

const columns = useMemo<ColumnDefType<YourRowType>[]>(
    () => [
      {
        header: 'Name',
        accessorKey: 'name',
        style: ...
      }
    ]
)

此示例使用

@tanstack/react-table v8

Answer 2

根据文档，列只能具有以下受支持的选项：

1. 访问器：字符串 |函数（originalRow，rowIndex）=>任何
2. id：字符串
3. 列：数组
4. 标题：字符串 |功能| React.Component => JSX
5. 页脚：字符串 |功能| React.Component => JSX
6. Cell：功能| React.Component => JSX
7. 宽度：整数
8. minWidth：整数
9. 最大宽度：整数

您可以使用另一种方式来设置标题样式。例如，通过将 React Component 或 ReactNode 返回到标头，如下所示：

{
   id: "header",  // don't forget to set the id
   Header: () => {
     return <div style={{ background: "red" }}>My Header Name</div>;
   }
}