Spalten-Anleitung

Spalten-API

Hinweis: Diese Anleitung handelt von den tatsächlichen Spalten-Objekten, die innerhalb der Tabelleninstanz generiert werden, und NICHT vom Einrichten der Spaltendefinitionen für Ihre Tabelle.

Diese kurze Anleitung behandelt die verschiedenen Möglichkeiten, wie Sie Spalten-Objekte in TanStack Table abrufen und damit interagieren können.

Sie können die Spalten-Objekte an vielen Orten finden. Sie sind oft angehängt

Bevor Sie zu einer der Tabelleninstanz-APIs greifen, überlegen Sie, ob Sie tatsächlich Header oder Cells anstelle von Spalten abrufen müssen. Wenn Sie das Markup für Ihre Tabelle rendern, werden Sie höchstwahrscheinlich zu den APIs greifen wollen, die Header oder Cells zurückgeben, anstatt Spalten. Die Spaltenobjekte selbst sind nicht wirklich dazu gedacht, Header oder Cells zu rendern, aber die Header- und Cell-Objekte enthalten Verweise auf diese Spaltenobjekte, von denen sie die notwendigen Informationen ableiten können, um ihre UI zu rendern.

const column = cell.column; // get column from cell
const column = header.column; // get column from header

const column = cell.column; // get column from cell
const column = header.column; // get column from header

Es gibt Dutzende von Tabelleninstanz-APIs, die Sie verwenden können, um Spalten aus der Tabelleninstanz abzurufen. Welche APIs Sie verwenden, hängt vollständig davon ab, welche Funktionen Sie in Ihrer Tabelle verwenden und von Ihrem Anwendungsfall.

Wenn Sie nur eine einzelne Spalte anhand ihrer ID abrufen müssen, können Sie die table.getColumn API verwenden.

const column = table.getColumn('firstName');

const column = table.getColumn('firstName');

Die einfachste Spalten-API ist table.getAllColumns, die eine Liste aller Spalten in der Tabelle zurückgibt. Daneben gibt es jedoch Dutzende weiterer Spalten-APIs, die von anderen Funktionen und dem Zustand der Tabelle beeinflusst werden. table.getAllFlatColumns, table.getAllLeafColumns, getCenterLeafColumns, table.getLeftVisibleLeafColumns sind nur einige Beispiele für andere Spalten-APIs, die Sie zusammen mit den Funktionen zur Spalten-Sichtbarkeit oder Spalten-Fixierung verwenden könnten.

Spaltenobjekte sind nicht dazu gedacht, die Tabellen-UI direkt zu rendern, daher sind sie nicht 1-zu-1 mit irgendeinem <th>- oder <td>-Element in Ihrer Tabelle verknüpft, aber sie enthalten viele nützliche Eigenschaften und Methoden, mit denen Sie mit dem Tabellenstatus interagieren können.

Jede Spalte muss eine eindeutige ID haben, die in ihrer zugehörigen Spaltendefinition definiert ist. Normalerweise definieren Sie diese ID selbst, oder sie wird von den accessorKey- oder header-Eigenschaften in der Spaltendefinition abgeleitet.

Ein Verweis auf das ursprüngliche columnDef-Objekt, das zur Erstellung der Spalte verwendet wurde, ist immer auf dem Spaltenobjekt verfügbar.

Es gibt einige Eigenschaften auf Spaltenobjekten, die nur nützlich sind, wenn die Spalte Teil einer verschachtelten oder gruppierten Spaltenstruktur ist. Zu diesen Eigenschaften gehören

• columns: Ein Array von untergeordneten Spalten, die zu einer Gruppenspalte gehören.
• depth: Der "Zeilenindex" der Header-Gruppe, zu der die Spaltengruppe gehört.
• parent: Die übergeordnete Spalte der Spalte. Wenn die Spalte eine oberste Ebene hat, ist dies undefined.

Es gibt Dutzende von Spalten-APIs, die Sie verwenden können, um mit dem Tabellenstatus zu interagieren und Zellwerte aus der Tabelle basierend auf dem Status der Tabelle zu extrahieren. Weitere Informationen finden Sie in der Dokumentation der Spalten-API jeder Funktion.

Verwenden Sie nicht unbedingt Spaltenobjekte, um Header oder Cells direkt zu rendern. Verwenden Sie stattdessen die Header- und Cell-Objekte, wie oben erwähnt.

Aber wenn Sie einfach nur eine Liste von Spalten irgendwo anders in Ihrer UI rendern, zum Beispiel für ein Menü zur Spalten-Sichtbarkeit oder ähnliches, können Sie einfach über ein Spalten-Array iterieren und die UI wie gewohnt rendern.