Skip to main content

APIs de ColumnDef

Las definiciones de columna son objetos simples con las siguientes opciones:

Opciones​

id​

id: string;

El identificador único para la columna.

🧠 Un ID de columna es opcional cuando:

  • Se crea una columna accesora con un accesor de clave de objeto
  • El encabezado de la columna se define como una cadena

accessorKey​

accessorKey?: string & typeof TData

La clave del objeto de fila a usar al extraer el valor para la columna.

accessorFn​

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

La función accesora a usar al extraer el valor para la columna de cada fila.

columns​

columns?: ColumnDef<TData>[]

Las definiciones de columna hijas a incluir en una columna de grupo.

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

El encabezado a mostrar para la columna. Si se pasa una cadena, se puede usar como valor predeterminado para el ID de columna. Si se pasa una función, se le pasará un objeto props para el encabezado y debería devolver el valor del encabezado renderizado (el tipo exacto depende del adaptador que se esté utilizando).

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

El pie de página a mostrar para la columna. Si se pasa una función, se le pasará un objeto props para el pie de página y debería devolver el valor del pie de página renderizado (el tipo exacto depende del adaptador que se esté utilizando).

cell​

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

La celda a mostrar para cada fila de la columna. Si se pasa una función, se le pasará un objeto props para la celda y debería devolver el valor de la celda renderizado (el tipo exacto depende del adaptador que se esté utilizando).

meta​

meta?: ColumnMeta // ¡Esta interfaz es extensible mediante la fusión de declaraciones. Ver a continuación!

Los metadatos a asociar con la columna. Podemos acceder a ellos en cualquier lugar donde la columna esté disponible a través de column.columnDef.meta. Este tipo es global para todas las tablas y puede extenderse así:

import "@tanstack/react-table"; //o vue, svelte, solid, qwik, etc.

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