Header Groups Guide

Header Group API

Dieser kurze Leitfaden erläutert die verschiedenen Möglichkeiten, wie Sie Header Group-Objekte in TanStack Table abrufen und mit ihnen interagieren können.

Header Groups sind einfach "Zeilen" von Headern. Lassen Sie sich vom Namen nicht verwirren, es ist so einfach. Die überwiegende Mehrheit der Tabellen hat nur eine Zeile mit Headern (eine einzelne Header Group), aber wenn Sie Ihre Spaltenstruktur mit verschachtelten Spalten definieren, wie im Beispiel für Column Groups, können Sie mehrere Zeilen von Headern (mehrere Header Groups) haben.

Es gibt mehrere table Instanz-APIs, die Sie verwenden können, um Header Groups von der Tabelleninstanz abzurufen. table.getHeaderGroups ist die gebräuchlichste API, aber abhängig von den Funktionen, die Sie verwenden, müssen Sie möglicherweise andere APIs verwenden, wie z. B. table.get[Left/Center/Right]HeaderGroups, wenn Sie Spalten-Pinning-Funktionen verwenden.

Header Group-Objekte ähneln Row-Objekten, sind aber einfacher, da in Header-Zeilen nicht so viel los ist wie in Body-Zeilen.

Standardmäßig haben Header Groups nur drei Eigenschaften

• id: Die eindeutige Kennung für die Header Group, die aus ihrer Tiefe (Index) generiert wird. Dies ist nützlich als Schlüssel für React-Komponenten.
• depth: Die Tiefe der Header Group, nullbasiert. Stellen Sie sich dies als Zeilenindex unter allen Header-Zeilen vor.
• headers: Ein Array von Header Cell-Objekten, die zu dieser Header Group (Zeile) gehören.

Um die Header Cells in einer Header Group zu rendern, iterieren Sie einfach über das headers-Array aus dem Header Group-Objekt.

<thead>
  {table.getHeaderGroups().map(headerGroup => {
    return (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(header => ( // map over the headerGroup headers array
          <th key={header.id} colSpan={header.colSpan}>
            {/* */}
          </th>
        ))}
      </tr>
    )
  })}
</thead>

<thead>
  {table.getHeaderGroups().map(headerGroup => {
    return (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(header => ( // map over the headerGroup headers array
          <th key={header.id} colSpan={header.colSpan}>
            {/* */}
          </th>
        ))}
      </tr>
    )
  })}
</thead>