Zeilen-Leitfaden

Row-API

Dieser Kurzanleitung behandelt die verschiedenen Möglichkeiten, wie Sie Zeilenobjekte in TanStack Table abrufen und damit interagieren können.

Es gibt mehrere table-Instanz-APIs, die Sie zum Abrufen von Zeilen aus der Tabelleninstanz verwenden können.

Wenn Sie auf eine bestimmte Zeile über ihre id zugreifen müssen, können Sie die table.getRow-API der Tabelleninstanz verwenden.

const row = table.getRow(rowId)

const row = table.getRow(rowId)

Die table-Instanz generiert row-Objekte und speichert sie in nützlichen Arrays, die als "Zeilenmodelle" bezeichnet werden. Dies wird im Leitfaden zu Zeilenmodellen ausführlicher behandelt, aber hier sind die gängigsten Methoden, wie Sie auf die Zeilenmodelle zugreifen können.

<tbody>
  {table.getRowModel().rows.map(row => (
    <tr key={row.id}>
     {/* ... */}
    </tr>
  ))}
</tbody>

<tbody>
  {table.getRowModel().rows.map(row => (
    <tr key={row.id}>
     {/* ... */}
    </tr>
  ))}
</tbody>

const selectedRows = table.getSelectedRowModel().rows

const selectedRows = table.getSelectedRowModel().rows

Jedes Zeilenobjekt enthält Zeilendaten und viele APIs, um entweder mit dem Tabellenstatus zu interagieren oder Zellen aus der Zeile basierend auf dem Zustand der Tabelle zu extrahieren.

Jedes Zeilenobjekt hat eine id-Eigenschaft, die es innerhalb der Tabelleninstanz eindeutig macht. Standardmäßig ist die row.id dieselbe wie der row.index, der im Zeilenmodell erstellt wird. Es kann jedoch nützlich sein, die id jeder Zeile mit einem eindeutigen Bezeichner aus den Daten der Zeile zu überschreiben. Dazu können Sie die Tabellenoption getRowId verwenden.

const table = useReactTable({
  columns,
  data,
  getRowId: originalRow => originalRow.uuid, //override the row.id with the uuid from the original row's data
})

const table = useReactTable({
  columns,
  data,
  getRowId: originalRow => originalRow.uuid, //override the row.id with the uuid from the original row's data
})

Hinweis: Bei einigen Funktionen wie Gruppierung und Erweiterung wird der row.id eine zusätzliche Zeichenkette angehängt.

Der empfohlene Weg, auf Datenwerte aus einer Zeile zuzugreifen, ist die Verwendung der APIs row.getValue oder row.renderValue. Die Verwendung einer dieser APIs speichert die Ergebnisse der Accessor-Funktionen im Cache und hält das Rendering effizient. Der einzige Unterschied zwischen den beiden ist, dass row.renderValue entweder den Wert oder den renderFallbackValue zurückgibt, wenn der Wert undefiniert ist, während row.getValue den Wert oder undefined zurückgibt, wenn der Wert undefiniert ist.

// Access data from any of the columns
const firstName = row.getValue('firstName') // read the row value from the firstName column
const renderedLastName = row.renderValue('lastName') // render the value from the lastName column

// Access data from any of the columns
const firstName = row.getValue('firstName') // read the row value from the firstName column
const renderedLastName = row.renderValue('lastName') // render the value from the lastName column

Hinweis: cell.getValue und cell.renderValue sind Abkürzungen für die APIs row.getValue bzw. row.renderValue.

Für jedes Zeilenobjekt können Sie über die Eigenschaft row.original auf die ursprünglichen, entsprechenden data zugreifen, die an die Tabelleninstanz übergeben wurden. Keiner der Daten in row.original wurde durch die Accessoren in Ihren Spaltendefinitionen modifiziert. Wenn Sie also Transformationen in Ihren Accessoren durchgeführt haben, werden diese nicht im row.original-Objekt reflektiert.

// Access any data from the original row
const firstName = row.original.firstName // { firstName: 'John', lastName: 'Doe' }

// Access any data from the original row
const firstName = row.original.firstName // { firstName: 'John', lastName: 'Doe' }

Wenn Sie die Funktionen Gruppierung oder Erweiterung verwenden, können Ihre Zeilen Unterzeilen oder Verweise auf übergeordnete Zeilen enthalten. Dies wird im Leitfaden zur Erweiterung ausführlicher behandelt, aber hier ist ein kurzer Überblick über nützliche Eigenschaften und Methoden für die Arbeit mit Unterzeilen.

• row.subRows: Ein Array von Unterzeilen für die Zeile.
• row.depth: Die Tiefe der Zeile (wenn verschachtelt oder gruppiert) relativ zum Wurzelzeilenarray. 0 für Zeilen der obersten Ebene, 1 für Kindzeilen, 2 für Enkelzeilen usw.
• row.parentId: Die eindeutige ID der übergeordneten Zeile für die Zeile (die Zeile, die diese Zeile in ihrem subRows-Array enthält).
• row.getParentRow: Gibt die übergeordnete Zeile für die Zeile zurück, falls vorhanden.

Abhängig von den Funktionen, die Sie für Ihre Tabelle verwenden, gibt es Dutzende weiterer nützlicher APIs für die Interaktion mit Zeilen. Weitere Informationen finden Sie in der API-Dokumentation oder im Leitfaden für die jeweilige Funktion.