ColumnDef API | TanStack Table Docs

ColumnDef API

列定义是具有以下选项的普通对象：

选项

id

tsx

id: string

id: string

列的唯一标识符。

🧠 列 ID 在以下情况下是可选的：

使用对象键访问器创建访问器列时

列标题定义为字符串时

accessorKey

tsx

accessorKey?: string & typeof TData

accessorKey?: string & typeof TData

提取列值时使用的行对象的键。

accessorFn

tsx

accessorFn?: (originalRow: TData, index: number) => any

accessorFn?: (originalRow: TData, index: number) => any

从每行提取列值时使用的访问器函数。

columns

tsx

columns?: ColumnDef<TData>[]

columns?: ColumnDef<TData>[]

要包含在组列中的子列定义。

tsx

header?:
  | string
  | ((props: {
      table: Table<TData>
      header: Header<TData>
      column: Column<TData>
    }) => unknown)

header?:
  | string
  | ((props: {
      table: Table<TData>
      header: Header<TData>
      column: Column<TData>
    }) => unknown)

要为列显示的标题。如果传递了字符串，则它可以用作列 ID 的默认值。如果传递了函数，则它将接收一个用于标题的 props 对象，并应返回渲染的标题值（确切类型取决于所使用的适配器）。

tsx

footer?:
  | string
  | ((props: {
      table: Table<TData>
      header: Header<TData>
      column: Column<TData>
    }) => unknown)

footer?:
  | string
  | ((props: {
      table: Table<TData>
      header: Header<TData>
      column: Column<TData>
    }) => unknown)

要为列显示的页脚。如果传递了函数，则它将接收一个用于页脚的 props 对象，并应返回渲染的页脚值（确切类型取决于所使用的适配器）。

cell

tsx

cell?:
  | string
  | ((props: {
      table: Table<TData>
      row: Row<TData>
      column: Column<TData>
      cell: Cell<TData>
      getValue: () => any
      renderValue: () => any
    }) => unknown)

cell?:
  | string
  | ((props: {
      table: Table<TData>
      row: Row<TData>
      column: Column<TData>
      cell: Cell<TData>
      getValue: () => any
      renderValue: () => any
    }) => unknown)

为列的每一行显示的单元格。如果传递了函数，则它将接收一个用于单元格的 props 对象，并应返回渲染的单元格值（确切类型取决于所使用的适配器）。

meta

tsx

meta?: ColumnMeta // 此接口可通过声明合并进行扩展。请参见下文！

meta?: ColumnMeta // 此接口可通过声明合并进行扩展。请参见下文！

要与列关联的元数据。当列通过 column.columnDef.meta 可用时，我们可以在任何地方访问它。此类型对所有表都是全局的，并且可以像这样扩展：

tsx

import '@tanstack/react-table' // 或 vue、svelte、solid、qwik 等。

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

import '@tanstack/react-table' // 或 vue、svelte、solid、qwik 等。

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