Definir columnas y renderizar filas

Cada columna de TanStack Table se describe mediante un objeto ColumnDef. Los dos campos más importantes son accessorKey (el nombre de la propiedad del objeto de datos) y header (la cadena con la etiqueta de la columna o una función de renderizado).

El enfoque accessorKey es ideal para datos planos; los valores complejos o calculados requieren accessorFn.

Cuando sus datos tienen una propiedad directa como name o email, use accessorKey: 'name'. Cuando necesite calcular un valor (por ejemplo, combinar firstName y lastName), use accessorFn: row => row.firstName + ' ' + row.lastName.

Ambos tienen tipado completo cuando proporciona el genérico de datos de fila a ColumnDef.

El campo cell de un objeto ColumnDef acepta una función que recibe el contexto de la celda y devuelve JSX. Así es como se renderizan insignias, botones, imágenes o cualquier UI personalizada dentro de una celda.

Para valores de texto simples, cell.renderValue() es suficiente. Para cualquier contenido más complejo, extraiga mediante desestructuración la información de cell.getContext().

Defina sus columnas fuera del componente para evitar recrearlas en cada renderizado. Pase la matriz a useReactTable junto con data y getCoreRowModel.

TypeScript inferirá los tipos de las columnas cuando anote ColumnDef con su tipo de datos, lo que le proporcionará autocompletado para los valores de accessorKey.

getCoreRowModel es una función factoría importada de @tanstack/react-table. Pase su valor de retorno a useReactTable para indicar a la instancia cómo construir la lista básica de filas a partir de su matriz de datos.

Los modelos de filas adicionales (ordenadas, filtradas y paginadas) se superponen pasando factorías adicionales de modelos.

Llame a table.getHeaderGroups() y recorra el resultado con map para renderizar su thead. Cada grupo de encabezados tiene una matriz headers; cada header tiene una definición de columna y un id.

Use flexRender(header.column.columnDef.header, header.getContext()) para renderizar el contenido del encabezado, ya sea una cadena o una función que devuelve JSX.

Llame a table.getRowModel().rows y recorra cada fila para crear un elemento tr. Dentro, llame a row.getVisibleCells() y recorra cada celda para crear un elemento td.

Use flexRender(cell.column.columnDef.cell, cell.getContext()) para renderizar el contenido de la celda, respetando cualquier renderizador personalizado definido en la columna.

flexRender es un auxiliar que acepta un componente de React, una función que devuelve JSX o un valor simple, y lo renderiza de forma coherente. Permite que las definiciones de columnas usen cadenas simples o funciones de renderizado completas tanto para los encabezados como para las celdas.

Esta API unificada significa que no necesita comprobar el tipo de la definición antes de renderizarla.

cell.renderValue() devuelve el valor sin procesar del accessor, formateado como una cadena. Para tener más control, cell.getContext() proporciona el contexto completo de renderizado, incluida la fila, la columna, la instancia de tabla y el valor sin procesar.

Los renderizadores personalizados de celdas usan el contexto para acceder a datos relacionados de la fila más allá del valor de un único accessor.

Cada ColumnDef acepta un campo meta donde puede adjuntar metadatos arbitrarios, como isSticky: true o alignment: 'right'. Acceda a ellos en el renderizador mediante column.columnDef.meta.

Para fijar columnas a la izquierda o a la derecha, TanStack Table proporciona el estado de fijación de columnas y métodos auxiliares en el objeto de columna.

Defina una matriz de ColumnDef con accessorKey, header y cell opcional. Llame a useReactTable con data, columns y getCoreRowModel. Recorra getHeaderGroups para thead y getRowModel().rows para tbody, usando flexRender para renderizar cada encabezado y celda.

Esta configuración mínima le proporciona una tabla completamente funcional y con estilos totalmente personalizados.

¿Cuándo debe usar accessorFn en lugar de accessorKey en una definición de columna de TanStack Table?

Defina las columnas mediante ColumnDef, usando accessorKey para campos directos o accessorFn para valores calculados. Pase columns y getCoreRowModel a useReactTable y, después, renderice con getHeaderGroups para los encabezados y getRowModel().rows para las filas del cuerpo.

La utilidad flexRender gestiona de manera uniforme las definiciones de encabezados y celdas basadas tanto en cadenas como en funciones.