Zeilenmodelle-Anleitung

Wenn Sie sich das grundlegendste Beispiel von TanStack Table ansehen, sehen Sie einen Code-Schnipsel wie diesen

import { getCoreRowModel, useReactTable } from '@tanstack/react-table'

function Component() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), //row model
  })
}

import { getCoreRowModel, useReactTable } from '@tanstack/react-table'

function Component() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), //row model
  })
}

Was ist diese getCoreRowModel Funktion? Und warum müssen Sie sie von TanStack Table importieren, nur um sie wieder an sich selbst zurückzugeben?

Nun, die Antwort ist, dass TanStack Table eine modulare Bibliothek ist. Nicht der gesamte Code für jedes einzelne Feature ist standardmäßig in den createTable-Funktionen/-Hooks enthalten. Sie müssen nur den Code importieren und einschließen, den Sie benötigen, um Zeilen basierend auf den von Ihnen gewünschten Features korrekt zu generieren.

Zeilenmodelle laufen im Hintergrund von TanStack Table, um Ihre Originaldaten auf nützliche Weise zu transformieren, die für Data-Grid-Features wie Filtern, Sortieren, Gruppieren, Erweitern und Paginieren benötigt werden. Die generierten und auf dem Bildschirm gerenderten Zeilen sind nicht notwendigerweise eine 1:1-Abbildung der Originaldaten, die Sie an die Tabelle übergeben haben. Sie können sortiert, gefiltert, paginiert usw. sein.

Sie sollten nur die Zeilenmodelle importieren, die Sie benötigen. Hier sind alle verfügbaren Zeilenmodelle

//only import the row models you need
import {
  getCoreRowModel,
  getExpandedRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFilteredRowModel: getFilteredRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

//only import the row models you need
import {
  getCoreRowModel,
  getExpandedRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFilteredRowModel: getFilteredRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

Sie müssen nicht die exakten Zeilenmodelle verwenden, die von TanStack Table bereitgestellt werden. Wenn Sie eine fortgeschrittene Anpassung für bestimmte Zeilenmodelle benötigen, können Sie gerne den Quellcode des Zeilenmodells kopieren, das Sie anpassen möchten, und es an Ihre Bedürfnisse anpassen.

Sobald Ihre Tabelleninstanz erstellt wurde, können Sie alle Zeilenmodelle, die Sie benötigen, direkt von der Tabelleninstanz aus aufrufen. Es gibt noch mehr abgeleitete Zeilenmodelle, die zusätzlich zu denen, die Sie möglicherweise importiert haben, verfügbar sind.

Für normale Renderingsfälle werden Sie wahrscheinlich nur die Methode table.getRowModel() verwenden müssen, da dieses Zeilenmodell alle/beliebige andere Zeilenmodelle verwendet, je nachdem, welche Features Sie aktiviert oder deaktiviert haben. Alle anderen Zeilenmodelle stehen Ihnen zur Verfügung, um einige der zugrunde liegenden Datentransformationen, die in der Tabelle stattfinden, zu "durchdringen".

• getRowModel - Dies ist das Hauptzeilenmodell, das Sie für das Rendern Ihres Tabellenzeilen-Markup verwenden sollten. Es verwendet alle anderen Zeilenmodelle, um das endgültige Zeilenmodell zu generieren, das Sie zum Rendern Ihrer Tabellenzeilen verwenden werden.

• getCoreRowModel - gibt ein grundlegendes Zeilenmodell zurück, das lediglich eine 1:1-Abbildung der an die Tabelle übergebenen Originaldaten ist.

• getFilteredRowModel - gibt ein Zeilenmodell zurück, das Spaltenfilterung und globale Filterung berücksichtigt.

• getPreFilteredRowModel - gibt ein Zeilenmodell vor Anwendung von Spaltenfilterung und globaler Filterung zurück.

• getGroupedRowModel - gibt ein Zeilenmodell zurück, das Gruppierung und Aggregation auf die Daten anwendet und Unterzeilen erstellt.

• getPreGroupedRowModel - gibt ein Zeilenmodell vor Anwendung von Gruppierung und Aggregation zurück.

• getSortedRowModel - gibt ein Zeilenmodell zurück, auf das eine Sortierung angewendet wurde.

• getPreSortedRowModel - gibt ein Zeilenmodell zurück, bevor die Sortierung angewendet wird (Zeilen sind in der ursprünglichen Reihenfolge).

• getExpandedRowModel - gibt ein Zeilenmodell zurück, das erweiterte/ausgeblendete Unterzeilen berücksichtigt.

• getPreExpandedRowModel - gibt ein Zeilenmodell zurück, das nur Stammzeilen ohne erweiterte Unterzeilen enthält. Beinhaltet immer noch Sortierung.

• getPaginationRowModel - gibt ein Zeilenmodell zurück, das nur die Zeilen enthält, die auf der aktuellen Seite basierend auf dem Paginierungsstatus angezeigt werden sollen.

• getPrePaginationRowModel - gibt ein Zeilenmodell ohne angewendete Paginierung zurück (enthält alle Zeilen).

• getSelectedRowModel - gibt ein Zeilenmodell aller ausgewählten Zeilen zurück (aber nur basierend auf den an die Tabelle übergebenen Daten). Läuft nach getCoreRowModel.

• getPreSelectedRowModel - gibt ein Zeilenmodell zurück, bevor die Zeilenauswahl angewendet wird (gibt einfach getCoreRowModel zurück).

• getGroupedSelectedRowModel - gibt ein Zeilenmodell von ausgewählten Zeilen nach der Gruppierung zurück. Läuft nach getSortedRowModel, was nach getGroupedRowModel läuft, was nach getFilteredRowModel läuft.

• getFilteredSelectedRowModel - gibt ein Zeilenmodell von ausgewählten Zeilen nach Spaltenfilterung und globaler Filterung zurück. Läuft nach getFilteredRowModel.

Das Verständnis, wie TanStack Table Zeilen intern verarbeitet, kann Ihnen helfen, besser zu verstehen, was im Hintergrund geschieht, und Ihnen bei der Fehlerbehebung von Problemen helfen, auf die Sie stoßen könnten.

Intern ist dies die Reihenfolge, in der jedes der Zeilenmodelle auf die Daten angewendet wird, wenn die entsprechenden Features aktiviert sind

getCoreRowModel -> getFilteredRowModel -> getGroupedRowModel -> getSortedRowModel -> getExpandedRowModel -> getPaginationRowModel -> getRowModel

Wenn in irgendeinem Fall das jeweilige Feature deaktiviert ist oder mit einer "manual*" Tabellenoption ausgeschaltet ist, wird stattdessen getPre*RowModel in diesem Schritt des Prozesses verwendet.

Wie oben zu sehen ist, werden die Daten zuerst gefiltert, dann gruppiert, dann sortiert, dann erweitert und dann als letzter Schritt paginiert.

Jedes Zeilenmodell liefert Ihnen die Zeilen in 3 verschiedenen nützlichen Formaten

1. rows - Ein Array von Zeilen.
2. flatRows - Ein Array von Zeilen, aber alle Unterzeilen sind in die oberste Ebene abgeflacht.
3. rowsById - Ein Objekt von Zeilen, wobei jede Zeile durch ihre id indiziert ist. Dies ist nützlich, um Zeilen schnell und performant anhand ihrer id nachzuschlagen.

console.log(table.getRowModel().rows) // array of rows
console.log(table.getRowModel().flatRows) // array of rows, but all sub-rows are flattened into the top level
console.log(table.getRowModel().rowsById['row-id']) // object of rows, where each row is keyed by its `id`

console.log(table.getRowModel().rows) // array of rows
console.log(table.getRowModel().flatRows) // array of rows, but all sub-rows are flattened into the top level
console.log(table.getRowModel().rowsById['row-id']) // object of rows, where each row is keyed by its `id`