Header-Leitfaden

Header API

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

Header sind das Äquivalent von Zellen, sind aber für den <thead>-Bereich der Tabelle und nicht für den <tbody>-Bereich gedacht.

Header stammen aus Header-Gruppen, die das Äquivalent von Zeilen sind, aber für den <thead>-Bereich der Tabelle und nicht für den <tbody>-Bereich gedacht sind.

Wenn Sie sich in einer Header-Gruppe befinden, werden die Header als Array in der Eigenschaft headerGroup.headers gespeichert. Normalerweise durchlaufen Sie dieses Array einfach, um Ihre Header zu rendern.

<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>

Es gibt mehrere tabellen-Instanz-APIs, die Sie verwenden können, um eine Liste von Headern abzurufen, abhängig von den Funktionen, die Sie verwenden. Die gebräuchlichste API, die Sie möglicherweise verwenden, ist table.getFlatHeaders, die eine flache Liste aller Header in der Tabelle zurückgibt. Es gibt jedoch mindestens ein Dutzend weitere Header, die in Verbindung mit den Funktionen zur Spaltensichtbarkeit und Spaltenfixierung nützlich sind. APIs wie table.getLeftLeafHeaders oder table.getRightFlatHeaders können je nach Anwendungsfall nützlich sein.

Header-Objekte ähneln Zellen-Objekten, sind aber für den <thead>-Bereich der Tabelle und nicht für den <tbody>-Bereich gedacht. Jedes Header-Objekt kann mit einem <th>- oder ähnlichen Zellelementen in Ihrer Benutzeroberfläche verknüpft werden. Es gibt einige Eigenschaften und Methoden für header-Objekte, die Sie verwenden können, um mit dem Tabellenzustand zu interagieren und Zellwerte aus der Tabelle basierend auf dem Zustand der Tabelle zu extrahieren.

Jedes Header-Objekt hat eine id-Eigenschaft, die es innerhalb der Tabelleninstanz eindeutig macht. Normalerweise benötigen Sie diese id nur als eindeutigen Identifikator für React-Schlüssel oder wenn Sie dem performanten Spaltengrößenänderungsbeispiel folgen.

Bei einfachen Headern ohne erweiterte verschachtelte oder gruppierte Header-Logik ist die header.id gleich der übergeordneten column.id. Wenn der Header jedoch Teil einer Gruppenspalte oder einer Platzhalterzelle ist, hat er eine komplexere ID, die aus der Header-Familie, der Tiefe/Header-Zeilenindex, der Spalten-ID und der Headergruppen-ID konstruiert wird.

Es gibt einige Eigenschaften in header-Objekten, die nur nützlich sind, wenn der Header Teil einer verschachtelten oder gruppierten Header-Struktur ist. Zu diesen Eigenschaften gehören

• colspan: Die Anzahl der Spalten, über die der Header gespannt werden soll. Dies ist nützlich für das Rendern des colSpan-Attributs auf dem <th>-Element.
• rowSpan: Die Anzahl der Zeilen, über die der Header gespannt werden soll. Dies ist nützlich für das Rendern des rowSpan-Attributs auf dem <th>-Element. (Derzeit nicht im Standard-TanStack Table implementiert)
• depth: Der "Zeilenindex" der Header-Gruppe, zu der die Header-Gruppe gehört.
• isPlaceholder: Eine boolesche Flagge, die wahr ist, wenn der Header ein Platzhalter-Header ist. Platzhalter-Header werden verwendet, um Lücken zu füllen, wenn eine Spalte ausgeblendet ist oder wenn eine Spalte Teil einer Gruppenspalte ist.
• placeholderId: Der eindeutige Identifikator für den Platzhalter-Header.
• subHeaders: Das Array von Unter-/Kind-Headern, die zu diesem Header gehören. Ist leer, wenn der Header ein Blatt-Header ist.

Hinweis: header.index bezieht sich auf seinen Index innerhalb der Header-Gruppe (Reihe von Headern), d. h. seine Position von links nach rechts. Es ist nicht dasselbe wie header.depth, das sich auf den "Zeilenindex" der Header-Gruppe bezieht.

Jeder Header speichert eine Referenz auf sein übergeordnetes Spaltenobjekt und sein übergeordnetes Headergruppenobjekt.

Header haben einige weitere nützliche APIs, die für die Interaktion mit dem Tabellenzustand nützlich sind. Die meisten davon beziehen sich auf die Funktionen zur Spaltengrößenanpassung und Größenänderung. Weitere Informationen finden Sie im Leitfaden zur Spaltengrößenanpassung.

Da die von Ihnen definierte header-Spaltenoption entweder eine Zeichenkette, JSX oder eine Funktion sein kann, die eine davon zurückgibt, ist der beste Weg, die Header zu rendern, die Verwendung des flexRender-Dienstprogramms aus Ihrem Adapter, das alle diese Fälle für Sie behandelt.

{headerGroup.headers.map(header => (
  <th key={header.id} colSpan={header.colSpan}>
    {/* Handles all possible header column def scenarios for `header` */}
    {flexRender(header.column.columnDef.header, header.getContext())}
  </th>
))}

{headerGroup.headers.map(header => (
  <th key={header.id} colSpan={header.colSpan}>
    {/* Handles all possible header column def scenarios for `header` */}
    {flexRender(header.column.columnDef.header, header.getContext())}
  </th>
))}