Zellen-Leitfaden

Dieser kurze Leitfaden behandelt die verschiedenen Möglichkeiten, wie Sie Zellen-Objekte in TanStack Table abrufen und mit ihnen interagieren können.

Woher Zellen stammen

Zellen stammen von Zeilen. Genug gesagt, oder?

Es gibt mehrere Zeilen-Instanz-APIs, die Sie verwenden können, um die entsprechenden Zellen aus einer Zeile abzurufen, je nachdem, welche Funktionen Sie verwenden. Am häufigsten verwenden Sie die row.getAllCells oder row.getVisibleCells APIs (wenn Sie Spalten-Sichtbarkeitsfunktionen verwenden), aber es gibt eine Handvoll anderer ähnlicher APIs, die Sie verwenden können.

Zellenobjekte

Jedes Zellenobjekt kann mit einem <td> oder einem ähnlichen Zellelement in Ihrer Benutzeroberfläche verknüpft sein. Es gibt einige Eigenschaften und Methoden in Zellen-Objekten, die Sie verwenden können, um mit dem Tabellenstatus zu interagieren und Zellwerte aus der Tabelle basierend auf dem Zustand der Tabelle zu extrahieren.

Zellen-IDs

Jedes Zellenobjekt hat eine id-Eigenschaft, die es innerhalb der Tabelleninstanz eindeutig macht. Jede cell.id wird einfach als eine Vereinigung der IDs ihrer Elternzeile und -spalte gebildet, getrennt durch einen Unterstrich.

{ id: `${row.id}_${column.id}` }

{ id: `${row.id}_${column.id}` }

Während Gruppierungs- oder Aggregationsfunktionen wird der cell.id zusätzliche Zeichenfolgen angehängt.

Zellen-Elternobjekte

Jede Zelle speichert einen Verweis auf ihre Eltern-Zeilen- und Spaltenobjekte.

Zellenwerte abrufen

Die empfohlene Methode zum Abrufen von Datenwerten aus einer Zelle ist die Verwendung entweder der cell.getValue oder cell.renderValue APIs. 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 cell.renderValue entweder den Wert oder den renderFallbackValue zurückgibt, wenn der Wert undefiniert ist, während cell.getValue den Wert oder undefiniert zurückgibt, wenn der Wert undefiniert ist.

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

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

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

Auf andere Zeilendaten von jeder Zelle zugreifen

Da jedes Zellenobjekt mit seiner Elternzeile verknüpft ist, können Sie mit cell.row.original auf alle Daten aus der ursprünglichen Zeile zugreifen, die Sie in Ihrer Tabelle verwenden.

// Even if we are in the scope of a different cell, we can still access the original row data
const firstName = cell.row.original.firstName // { firstName: 'John', lastName: 'Doe' }

// Even if we are in the scope of a different cell, we can still access the original row data
const firstName = cell.row.original.firstName // { firstName: 'John', lastName: 'Doe' }

Weitere Zell-APIs

Je nach den Funktionen, die Sie für Ihre Tabelle verwenden, gibt es Dutzende weitere nützliche APIs für die Interaktion mit Zellen. Weitere Informationen finden Sie in den API-Dokumenten oder Anleitungen der jeweiligen Funktionen.

Zellen-Rendering

Sie können einfach die APIs cell.renderValue oder cell.getValue verwenden, um die Zellen Ihrer Tabelle zu rendern. Diese APIs geben jedoch nur die rohen Zellwerte (aus den Accessor-Funktionen) aus. Wenn Sie die Spaltendefinitionsoptionen cell: () => JSX verwenden, möchten Sie das Hilfsprogramm flexRender API von Ihrem Adapter verwenden.

Die Verwendung der flexRender API ermöglicht es, die Zelle korrekt mit zusätzlichem Markup oder JSX zu rendern und die Callback-Funktion mit den richtigen Parametern aufzurufen.

jsx

import { flexRender } from '@tanstack/react-table'

const columns = [
  {
    accessorKey: 'fullName',
    cell: ({ cell, row }) => {
      return <div><strong>{row.original.firstName}</strong> {row.original.lastName}</div>
    }
    //...
  }
]
//...
<tr>
  {row.getVisibleCells().map(cell => {
    return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
  })}
</tr>

import { flexRender } from '@tanstack/react-table'

const columns = [
  {
    accessorKey: 'fullName',
    cell: ({ cell, row }) => {
      return <div><strong>{row.original.firstName}</strong> {row.original.lastName}</div>
    }
    //...
  }
]
//...
<tr>
  {row.getVisibleCells().map(cell => {
    return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
  })}
</tr>

API