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 // This interface is extensible via declaration merging. See below!

meta?: ColumnMeta // This interface is extensible via declaration merging. See below!

要与列关联的元数据。我们可以通过 column.columnDef.meta 在任何有列的地方访问它。此类型对所有表格都是全局的，可以如下扩展

tsx

import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc.

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

import '@tanstack/react-table' //or vue, svelte, solid, qwik, etc.

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

选项

id

accessorKey

accessorFn

columns

header

footer

cell

meta

订阅 Bytes

订阅 Bytes