ColumnDef APIs

Column definitionen sind einfache Objekte mit den folgenden Optionen

Optionen

id

tsx

id: string

id: string

Die eindeutige Kennung für die Spalte.

🧠 Eine Spalten-ID ist optional, wenn

Eine Accessor-Spalte mit einem Accessor-Objektschlüssel erstellt wird

Die Spaltenüberschrift als Zeichenkette definiert ist

accessorKey

tsx

accessorKey?: string & typeof TData

accessorKey?: string & typeof TData

Der Schlüssel des Zeilenobjekts, der beim Extrahieren des Werts für die Spalte verwendet werden soll.

accessorFn

tsx

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

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

Die Accessor-Funktion, die beim Extrahieren des Werts für die Spalte aus jeder Zeile verwendet werden soll.

columns

tsx

columns?: ColumnDef<TData>[]

columns?: ColumnDef<TData>[]

Die untergeordneten Spaltendefinitionen, die in einer Gruppenspalte enthalten sein sollen.

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)

Die anzuzeigende Überschrift für die Spalte. Wenn eine Zeichenkette übergeben wird, kann sie als Standard für die Spalten-ID verwendet werden. Wenn eine Funktion übergeben wird, erhält sie ein Props-Objekt für die Überschrift und sollte den gerenderten Überschriftenwert zurückgeben (der genaue Typ hängt vom verwendeten Adapter ab).

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)

Der anzuzeigende Fußzeilentext für die Spalte. Wenn eine Funktion übergeben wird, erhält sie ein Props-Objekt für den Fußzeilentext und sollte den gerenderten Fußzeilentextwert zurückgeben (der genaue Typ hängt vom verwendeten Adapter ab).

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)

Die anzuzeigende Zelle für jede Zeile in der Spalte. Wenn eine Funktion übergeben wird, erhält sie ein Props-Objekt für die Zelle und sollte den gerenderten Zellwert zurückgeben (der genaue Typ hängt vom verwendeten Adapter ab).

meta

tsx

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

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

Die Metadaten, die der Spalte zugeordnet werden sollen. Wir können darauf überall zugreifen, wenn die Spalte über column.columnDef.meta verfügbar ist. Dieser Typ ist global für alle Tabellen und kann wie folgt erweitert werden

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
  }
}