ColumnDef API

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