Guía de Grupos de Encabezado

API

Guía de Grupos de Encabezado

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

¿Qué son los Grupos de Encabezado?

Los Grupos de Encabezado son simplemente "filas" de encabezados. No dejes que el nombre te confunda, es así de simple. La gran mayoría de las tablas solo tendrán una fila de encabezados (un solo grupo de encabezado), pero si defines tu estructura de columnas con columnas anidadas como en el ejemplo de Grupos de Columnas, puedes tener múltiples filas de encabezados (múltiples grupos de encabezado).

De Dónde Obtener los Grupos de Encabezado

Hay múltiples APIs de instancia de table que puedes usar para recuperar grupos de encabezado de la instancia de la tabla. table.getHeaderGroups es la API más común de usar, pero dependiendo de las características que estés usando, puede que necesites usar otras APIs, como table.get[Left/Center/Right]HeaderGroups si estás usando características de fijación de columnas.

Objetos de Grupo de Encabezado

Los objetos de Grupo de Encabezado son similares a los objetos de Fila, aunque más simples ya que no hay tanto sucediendo en las filas de encabezado como en las filas del cuerpo.

Por defecto, los grupos de encabezado solo tienen tres propiedades:

id: El identificador único para el grupo de encabezado que se genera a partir de su profundidad (índice). Esto es útil como clave para los componentes de React.
depth: La profundidad del grupo de encabezado, basada en índice cero. Piensa en esto como el índice de la fila entre todas las filas de encabezado.
headers: Un array de objetos de celda de Encabezado que pertenecen a este grupo de encabezado (fila).

Acceder a las Celdas del Encabezado

Para renderizar las celdas del encabezado en un grupo de encabezado, simplemente iteras sobre el array headers del objeto del grupo de encabezado.

<thead>
  {table.getHeaderGroups().map((headerGroup) => {
    return (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(
          (
            header, // itera sobre el array de encabezados de headerGroup
          ) => (
            <th key={header.id} colSpan={header.colSpan}>
              {/* */}
            </th>
          ),
        )}
      </tr>
    );
  })}
</thead>

API​