Skip to main content

Guía de Filas

API​

API de Filas

Guía de Filas​

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

Dónde Obtener Filas​

Existen múltiples APIs de instancia de table que puedes usar para recuperar filas de la instancia de la tabla.

table.getRow​

Si necesitas acceder a una fila específica por su id, puedes usar la API de instancia de tabla table.getRow.

const row = table.getRow(rowId);

Modelos de Filas​

La instancia table genera objetos row y los almacena en arreglos útiles llamados "Modelos de Filas". Esto se discute con mucho más detalle en la Guía de Modelos de Filas, pero aquí están las formas más comunes en que puedes acceder a los modelos de filas.

Renderizar Filas​
<tbody>
  {table.getRowModel().rows.map((row) => (
    <tr key={row.id}>{/* ... */}</tr>
  ))}
</tbody>
Obtener Filas Seleccionadas​
const selectedRows = table.getSelectedRowModel().rows;

Objetos de Fila​

Cada objeto de fila contiene datos de fila y muchas APIs para interactuar con el estado de la tabla o extraer celdas de la fila basándose en el estado de la tabla.

IDs de Fila​

Cada objeto de fila tiene una propiedad id que lo hace único dentro de la instancia de la tabla. Por defecto, el row.id es el mismo que el row.index que se crea en el modelo de fila. Sin embargo, puede ser útil sobrescribir el id de cada fila con un identificador único de los datos de la fila. Puedes usar la opción de tabla getRowId para hacer esto.

const table = useReactTable({
  columns,
  data,
  getRowId: (originalRow) => originalRow.uuid, //sobrescribir el row.id con el uuid de los datos de la fila original
});

Nota: En algunas características como la agrupación y la expansión, al row.id se le añadirá una cadena adicional.

Acceder a los Valores de la Fila​

La forma recomendada de acceder a los valores de datos de una fila es usar las APIs row.getValue o row.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 row.renderValue devolverá el valor o el renderFallbackValue si el valor es indefinido, mientras que row.getValue devolverá el valor o undefined si el valor es indefinido.

// Acceder a datos de cualquiera de las columnas
const firstName = row.getValue("firstName"); // leer el valor de la fila de la columna firstName
const renderedLastName = row.renderValue("lastName"); // renderizar el valor de la columna lastName

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

Acceder a los Datos Originales de la Fila​

Para cada objeto de fila, puedes acceder a los data originales correspondientes que fueron pasados a la instancia de la tabla a través de la propiedad row.original. Ninguno de los datos en row.original habrá sido modificado por los accesores en tus definiciones de columna, por lo que si estabas realizando cualquier tipo de transformaciones de datos en tus accesores, estas no se reflejarán en el objeto row.original.

// Acceder a cualquier dato de la fila original
const firstName = row.original.firstName; // { firstName: 'John', lastName: 'Doe' }

Subfilas​

Si estás utilizando las funciones de agrupación o expansión, tus filas pueden contener subfilas o referencias a filas padre. Esto se discute con mucho más detalle en la Guía de Expansión, pero aquí tienes una descripción rápida de propiedades y métodos útiles para trabajar con subfilas.

  • row.subRows: Un arreglo de subfilas para la fila.
  • row.depth: La profundidad de la fila (si está anidada o agrupada) relativa al arreglo de filas raíz. 0 para filas de nivel raíz, 1 para filas hijas, 2 para filas nietas, etc.
  • row.parentId: El ID único de la fila padre para la fila (La fila que contiene esta fila en su arreglo subRows).
  • row.getParentRow: Devuelve la fila padre para la fila, si existe.

Más APIs de Fila​

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