Gruppierungsleitfaden

Möchten Sie direkt zur Implementierung springen? Sehen Sie sich diese Beispiele an

• Gruppierung

Gruppierungs-API

Es gibt 3 Tabellenfunktionen, die Spalten neu anordnen können, welche in der folgenden Reihenfolge stattfinden

1. Spaltenfixierung - Bei fixierten Spalten werden die Spalten in linke, mittlere (nicht fixierte) und rechte fixierte Spalten aufgeteilt.
2. Manuelle Spaltenreihenfolge - Eine manuell festgelegte Spaltenreihenfolge wird angewendet.
3. Gruppierung - Wenn die Gruppierung aktiviert ist, ein Gruppierungsstatus aktiv ist und tableOptions.groupedColumnMode auf 'reorder' | 'remove' gesetzt ist, werden die gruppierten Spalten an den Anfang des Spaltenflusses verschoben.

Gruppierung in TanStack Table ist eine Funktion, die für Spalten gilt und es Ihnen ermöglicht, die Tabellenzeilen basierend auf bestimmten Spalten zu kategorisieren und zu organisieren. Dies kann nützlich sein, wenn Sie eine große Datenmenge haben und diese nach bestimmten Kriterien gruppieren möchten.

Um die Gruppierungsfunktion zu nutzen, benötigen Sie das gruppierte Zeilenmodell. Dieses Modell ist für die Gruppierung der Zeilen basierend auf dem Gruppierungsstatus zuständig.

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

const table = useReactTable({
  // other options...
  getGroupedRowModel: getGroupedRowModel(),
})

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

const table = useReactTable({
  // other options...
  getGroupedRowModel: getGroupedRowModel(),
})

Wenn der Gruppierungsstatus aktiv ist, fügt die Tabelle übereinstimmende Zeilen als SubRows zur gruppierten Zeile hinzu. Die gruppierte Zeile wird an derselben Indexposition wie die erste übereinstimmende Zeile zu den Tabellenzeilen hinzugefügt. Die übereinstimmenden Zeilen werden aus den Tabellenzeilen entfernt. Um dem Benutzer das Erweitern und Zusammenklappen der gruppierten Zeilen zu ermöglichen, können Sie die Erweiterungsfunktion nutzen.

import { getGroupedRowModel, getExpandedRowModel} from '@tanstack/react-table'

const table = useReactTable({
  // other options...
  getGroupedRowModel: getGroupedRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
})

import { getGroupedRowModel, getExpandedRowModel} from '@tanstack/react-table'

const table = useReactTable({
  // other options...
  getGroupedRowModel: getGroupedRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
})

Der Gruppierungsstatus ist ein Array von Strings, wobei jeder String die ID einer zu gruppierenden Spalte ist. Die Reihenfolge der Strings im Array bestimmt die Reihenfolge der Gruppierung. Wenn der Gruppierungsstatus beispielsweise ['spalte1', 'spalte2'] ist, gruppiert die Tabelle zuerst nach spalte1 und dann innerhalb jeder Gruppe nach spalte2. Sie können den Gruppierungsstatus mit der Funktion setGrouping steuern.

table.setGrouping(['column1', 'column2']);

table.setGrouping(['column1', 'column2']);

Sie können den Gruppierungsstatus auch mit der Funktion resetGrouping in seinen ursprünglichen Zustand zurücksetzen.

table.resetGrouping();

table.resetGrouping();

Standardmäßig wird eine gruppierte Spalte an den Anfang der Tabelle verschoben. Sie können dieses Verhalten mit der Option groupedColumnMode steuern. Wenn Sie sie auf 'reorder' setzen, werden die gruppierten Spalten an den Anfang der Tabelle verschoben. Wenn Sie sie auf 'remove' setzen, werden die gruppierten Spalten aus der Tabelle entfernt. Wenn Sie sie auf false setzen, werden die gruppierten Spalten weder verschoben noch entfernt.

const table = useReactTable({
  // other options...
  groupedColumnMode: 'reorder',
})

const table = useReactTable({
  // other options...
  groupedColumnMode: 'reorder',
})

Wenn Zeilen gruppiert sind, können Sie die Daten in den gruppierten Zeilen nach Spalten mithilfe der Option aggregationFn aggregieren. Dies ist ein String, der die ID der Aggregationsfunktion darstellt. Sie können die Aggregationsfunktionen mithilfe der Option aggregationFns definieren.

const column = columnHelper.accessor('key', {
  aggregationFn: 'sum',
})

const column = columnHelper.accessor('key', {
  aggregationFn: 'sum',
})

Im obigen Beispiel wird die Summenaggregationsfunktion verwendet, um die Daten in den gruppierten Zeilen zu aggregieren. Standardmäßig verwenden numerische Spalten die Summenaggregationsfunktion und nicht-numerische Spalten die Zählaggregationsfunktion. Sie können dieses Verhalten überschreiben, indem Sie die Option aggregationFn in der Spaltendefinition angeben.

Es gibt mehrere integrierte Aggregationsfunktionen, die Sie verwenden können.

• sum - Summiert die Werte in den gruppierten Zeilen.
• count - Zählt die Anzahl der Zeilen in den gruppierten Zeilen.
• min - Findet den Mindestwert in den gruppierten Zeilen.
• max - Findet den Höchstwert in den gruppierten Zeilen.
• extent - Findet die Spanne (Minimum und Maximum) der Werte in den gruppierten Zeilen.
• mean - Findet den Mittelwert der Werte in den gruppierten Zeilen.
• median - Findet den Median der Werte in den gruppierten Zeilen.
• unique - Gibt ein Array mit eindeutigen Werten in den gruppierten Zeilen zurück.
• uniqueCount - Zählt die Anzahl der eindeutigen Werte in den gruppierten Zeilen.

Wenn Zeilen gruppiert sind, können Sie die Daten in den gruppierten Zeilen mithilfe der Option aggregationFns aggregieren. Dies ist ein Objekt, bei dem die Schlüssel die IDs der Aggregationsfunktionen sind und die Werte die Aggregationsfunktionen selbst. Sie können dann auf diese Aggregationsfunktionen in der Option aggregationFn einer Spalte verweisen.

const table = useReactTable({
  // other options...
  aggregationFns: {
    myCustomAggregation: (columnId, leafRows, childRows) => {
      // return the aggregated value
    },
  },
})

const table = useReactTable({
  // other options...
  aggregationFns: {
    myCustomAggregation: (columnId, leafRows, childRows) => {
      // return the aggregated value
    },
  },
})

Im obigen Beispiel ist myCustomAggregation eine benutzerdefinierte Aggregationsfunktion, die die Spalten-ID, die Blattzeilen und die Kindzeilen nimmt und den aggregierten Wert zurückgibt. Sie können diese Aggregationsfunktion dann in der Option aggregationFn einer Spalte verwenden.

const column = columnHelper.accessor('key', {
  aggregationFn: 'myCustomAggregation',
})

const column = columnHelper.accessor('key', {
  aggregationFn: 'myCustomAggregation',
})

Wenn Sie serverseitige Gruppierung und Aggregation durchführen, können Sie die manuelle Gruppierung mit der Option manualGrouping aktivieren. Wenn diese Option auf true gesetzt ist, gruppiert die Tabelle die Zeilen nicht automatisch mit getGroupedRowModel() und erwartet stattdessen, dass Sie die Zeilen manuell gruppieren, bevor Sie sie an die Tabelle übergeben.

const table = useReactTable({
  // other options...
  manualGrouping: true,
})

const table = useReactTable({
  // other options...
  manualGrouping: true,
})

Hinweis: Derzeit gibt es nicht viele bekannte einfache Möglichkeiten, serverseitige Gruppierung mit TanStack Table durchzuführen. Sie müssen viel benutzerdefinierte Zellendarstellung vornehmen, damit dies funktioniert.

Wenn Sie den Gruppierungsstatus selbst verwalten möchten, können Sie die Option onGroupingChange verwenden. Diese Option ist eine Funktion, die aufgerufen wird, wenn sich der Gruppierungsstatus ändert. Sie können den verwalteten Status über die Option tableOptions.state.grouping zurück an die Tabelle übergeben.

const [grouping, setGrouping] = useState<string[]>([])

const table = useReactTable({
  // other options...
  state: {
    grouping: grouping,
  },
  onGroupingChange: setGrouping
})

const [grouping, setGrouping] = useState<string[]>([])

const table = useReactTable({
  // other options...
  state: {
    grouping: grouping,
  },
  onGroupingChange: setGrouping
})