Guía de Celdas

API

API de Celdas

Guía de Celdas

Esta guía rápida abordará las diferentes formas en que puedes recuperar e interactuar con objetos cell en TanStack Table.

De Dónde Obtener Celdas

Las celdas provienen de Filas. Suficiente, ¿verdad?

Hay múltiples APIs de instancia de row que puedes usar para recuperar las celdas apropiadas de una fila, dependiendo de las características que estés utilizando. Comúnmente, usarás las APIs row.getAllCells o row.getVisibleCells (si estás usando características de visibilidad de columnas), pero hay un puñado de otras APIs similares que puedes usar.

Objetos de Celda

Cada objeto de celda puede asociarse con un elemento <td> o similar de celda en tu UI. Existen algunas propiedades y métodos en los objetos cell que puedes usar para interactuar con el estado de la tabla y extraer valores de celda de la tabla basándose en su estado.

IDs de Celda

Cada objeto de celda tiene una propiedad id que lo hace único dentro de la instancia de la tabla. Cada cell.id se construye simplemente como una unión de los IDs de su fila y columna padre, separados por un guion bajo.

{
  id: `${row.id}_${column.id}`;
}

Durante las características de agrupación o agregación, a cell.id se le añadirá una cadena adicional.

Objetos Padre de Celda

Cada celda almacena una referencia a sus objetos padre fila y columna.

Acceder a los Valores de Celda

La forma recomendada de acceder a los valores de datos de una celda es utilizando las APIs cell.getValue o cell.renderValue. El uso de cualquiera de estas APIs almacenará en caché los resultados de las funciones accesoras y mantendrá la renderización eficiente. La única diferencia entre ambas es que cell.renderValue devolverá el valor o el renderFallbackValue si el valor es indefinido, mientras que cell.getValue devolverá el valor o undefined si el valor es indefinido.

Nota: Las APIs cell.getValue y cell.renderValue son atajos para las APIs row.getValue y row.renderValue, respectivamente.

// Acceder a datos de cualquiera de las columnas
const firstName = cell.getValue("firstName"); // lee el valor de la celda de la columna firstName
const renderedLastName = cell.renderValue("lastName"); // renderiza el valor de la columna lastName

Acceder a Otros Datos de Fila desde Cualquier Celda

Dado que cada objeto de celda está asociado con su fila padre, puedes acceder a cualquier dato de la fila original que estés usando en tu tabla utilizando cell.row.original.

// Incluso si estamos en el ámbito de una celda diferente, aún podemos acceder a los datos originales de la fila
const firstName = cell.row.original.firstName; // { firstName: 'John', lastName: 'Doe' }

Más APIs de Celda

Dependiendo de las características que estés usando para tu tabla, hay docenas de APIs más útiles para interactuar con las celdas. Consulta la documentación o guía de la API respectiva de cada característica para obtener más información.

Renderizado de Celda

Puedes simplemente usar las APIs cell.renderValue o cell.getValue para renderizar las celdas de tu tabla. Sin embargo, estas APIs solo arrojarán los valores brutos de las celdas (de las funciones accesoras). Si estás usando las opciones de definición de columna cell: () => JSX, querrás usar la utilidad flexRender de la API de tu adaptador.

El uso de la API flexRender permitirá que la celda se renderice correctamente con cualquier marcado adicional o JSX y llamará a la función de callback con los parámetros correctos.

import { flexRender } from '@tanstack/react-table'

const columns = [
  {
    accessorKey: 'fullName',
    cell: ({ cell, row }) => {
      return <div><strong>{row.original.firstName}</strong> {row.original.lastName}</div>
    }
    //...
  }
]
//...
<tr>
  {row.getVisibleCells().map(cell => {
    return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
  })}
</tr>