Guía de Columnas

API

API de Columna

Guía de Columnas

Nota: Esta guía trata sobre los objetos column reales que se generan dentro de la instancia de la tabla y NO sobre cómo configurar las definiciones de columna para su tabla.

Esta guía rápida discutirá las diferentes formas en que puede recuperar e interactuar con los objetos column en TanStack Table.

De Dónde Obtener Columnas

Puede encontrar los objetos column en muchos lugares. A menudo están adjuntos

Objetos de Cabecera y Celda

Antes de recurrir a una de las APIs de instancia de la table, considere si realmente necesita recuperar encabezados o celdas en lugar de columnas. Si está generando el marcado para su tabla, lo más probable es que desee recurrir a las APIs que devuelven encabezados o celdas en lugar de columnas. Los propios objetos column no están realmente destinados a renderizar los encabezados o las celdas, pero los objetos header y cell contendrán referencias a estos objetos column de los cuales pueden derivar la información necesaria para renderizar su UI.

const column = cell.column; // obtener columna de la celda
const column = header.column; // obtener columna de la cabecera

APIs de Instancia de Tabla de Columna

Hay docenas de APIs de instancia de table que puede usar para recuperar columnas de la instancia de la tabla. Las APIs que utilizará dependerán completamente de las características que esté utilizando en su tabla y de su caso de uso.

Obtener Columna

Si solo necesita obtener una única columna por su ID, puede usar la API table.getColumn.

const column = table.getColumn("firstName");

Obtener Columnas

La API de columna más simple es table.getAllColumns, que devolverá una lista de todas las columnas de la tabla. Sin embargo, hay docenas de otras APIs de columna que se ven afectadas por otras características y el estado de la tabla que vienen junto con esta API. table.getAllFlatColumns, table.getAllLeafColumns, getCenterLeafColumns, table.getLeftVisibleLeafColumns son solo algunos ejemplos de otras APIs de columna que podría usar junto con las características de visibilidad de columna o fijación de columna.

Objetos de Columna

Los objetos column no están realmente destinados a ser utilizados para renderizar directamente la UI de la tabla, por lo que no están asociados 1 a 1 con ningún elemento <th> o <td> en su tabla, pero contienen muchas propiedades y métodos útiles que puede usar para interactuar con el estado de la tabla.

IDs de Columna

Cada columna debe tener un id único definido en su Definición de Columna asociada. Normalmente, usted define este id usted mismo, o se deriva de las propiedades accessorKey o header en la definición de columna.

ColumnDef

Una referencia al objeto columnDef original que se usó para crear la columna siempre está disponible en el objeto column.

Propiedades de Columnas Agrupadas Anidadas

Existen algunas propiedades en los objetos column que solo son útiles si la columna forma parte de una estructura de columnas anidadas o agrupadas. Estas propiedades incluyen:

• columns: Un array de columnas hijas que pertenecen a una columna de grupo.
• depth: El "índice de fila" del grupo de encabezado al que pertenece el grupo de columnas.
• parent: La columna padre de la columna. Si la columna es de nivel superior, esto será undefined.

Más APIs de Columna

Hay docenas de APIs de Columna que puede usar para interactuar con el estado de la tabla y extraer valores de celda de la tabla basándose en el estado de la misma. Consulte la documentación de la API de columna de cada característica para obtener más información.

Renderizado de Columnas

No utilice necesariamente los objetos column para renderizar headers o cells directamente. En su lugar, utilice los objetos header y cell, como se discutió anteriormente.

Pero si solo está renderizando una lista de columnas en otro lugar de su UI para algo como un menú de visibilidad de columnas o algo similar, puede simplemente mapear sobre un array de columnas y renderizar la UI como lo haría normalmente.