Gruppierungs-APIs

Der Gruppierungszustand wird in der Tabelle mit der folgenden Struktur gespeichert.

export type GroupingState = string[]

export type GroupingTableState = {
  grouping: GroupingState
}

export type GroupingState = string[]

export type GroupingTableState = {
  grouping: GroupingState
}

Die folgenden Aggregationsfunktionen sind im Tabellenkern integriert:

• sum
  • Summiert die Werte einer Gruppe von Zeilen.
• min
  • Findet den minimalen Wert einer Gruppe von Zeilen.
• max
  • Findet den maximalen Wert einer Gruppe von Zeilen.
• extent
  • Findet den minimalen und maximalen Wert einer Gruppe von Zeilen.
• mean
  • Findet den Mittelwert/Durchschnittswert einer Gruppe von Zeilen.
• median
  • Findet den Medianwert einer Gruppe von Zeilen.
• unique
  • Findet die eindeutigen Werte einer Gruppe von Zeilen.
• uniqueCount
  • Findet die Anzahl der eindeutigen Werte einer Gruppe von Zeilen.
• anzahl
  • Berechnet die Anzahl der Zeilen in einer Gruppe.

Jede Gruppierungsfunktion erhält:

• Eine Funktion, um die Blattwerte der gruppierten Zeilen abzurufen.
• Eine Funktion, um die Werte der unmittelbaren Kinder der gruppierten Zeilen abzurufen.

und sollte einen Wert (normalerweise primitiv) zurückgeben, um das aggregierte Zeilenmodell zu erstellen.

Dies ist die Typsignatur für jede Aggregationsfunktion.

export type AggregationFn<TData extends AnyData> = (
  getLeafRows: () => Row<TData>[],
  getChildRows: () => Row<TData>[]
) => any

export type AggregationFn<TData extends AnyData> = (
  getLeafRows: () => Row<TData>[],
  getChildRows: () => Row<TData>[]
) => any

Aggregationsfunktionen können verwendet/referenziert/definiert werden, indem Folgendes an columnDefinition.aggregationFn übergeben wird:

• Eine Zeichenkette, die sich auf eine integrierte Aggregationsfunktion bezieht.
• Eine Zeichenkette, die sich auf benutzerdefinierte Aggregationsfunktionen bezieht, die über die Option tableOptions.aggregationFns bereitgestellt werden.
• Eine Funktion, die direkt an die Option columnDefinition.aggregationFn übergeben wird.

Die endgültige Liste der Aggregationsfunktionen, die für die Verwendung von columnDef.aggregationFn verfügbar sind, hat den folgenden Typ:

export type AggregationFnOption<TData extends AnyData> =
  | 'auto'
  | keyof AggregationFns
  | BuiltInAggregationFn
  | AggregationFn<TData>

export type AggregationFnOption<TData extends AnyData> =
  | 'auto'
  | keyof AggregationFns
  | BuiltInAggregationFn
  | AggregationFn<TData>

aggregationFn?: AggregationFn | keyof AggregationFns | keyof BuiltInAggregationFns

aggregationFn?: AggregationFn | keyof AggregationFns | keyof BuiltInAggregationFns

Die Aggregationsfunktion, die mit dieser Spalte verwendet werden soll.

Optionen

• Eine Zeichenkette, die sich auf eine integrierte Aggregationsfunktion bezieht.
• Eine benutzerdefinierte Aggregationsfunktion.

aggregatedCell?: Renderable<
  {
    table: Table<TData>
    row: Row<TData>
    column: Column<TData>
    cell: Cell<TData>
    getValue: () => any
    renderValue: () => any
  }
>

aggregatedCell?: Renderable<
  {
    table: Table<TData>
    row: Row<TData>
    column: Column<TData>
    cell: Cell<TData>
    getValue: () => any
    renderValue: () => any
  }
>

Die Zelle, die für jede Zeile der Spalte angezeigt werden soll, wenn die Zelle aggregiert ist. Wenn eine Funktion übergeben wird, erhält sie ein Props-Objekt mit dem Kontext der Zelle und sollte den Eigenschaftstyp für Ihren Adapter zurückgeben (der genaue Typ hängt vom verwendeten Adapter ab).

enableGrouping?: boolean

enableGrouping?: boolean

Aktiviert/deaktiviert die Gruppierung für diese Spalte.

getGroupingValue?: (row: TData) => any

getGroupingValue?: (row: TData) => any

Geben Sie einen Wert an, der für die Gruppierung von Zeilen in dieser Spalte verwendet werden soll. Wenn diese Option nicht angegeben ist, wird stattdessen der Wert aus accessorKey / accessorFn verwendet.

aggregationFn?: AggregationFnOption<TData>

aggregationFn?: AggregationFnOption<TData>

Die aufgelöste Aggregationsfunktion für die Spalte.

getCanGroup: () => boolean

getCanGroup: () => boolean

Gibt zurück, ob die Spalte gruppiert werden kann oder nicht.

getIsGrouped: () => boolean

getIsGrouped: () => boolean

Gibt zurück, ob die Spalte derzeit gruppiert ist oder nicht.

getGroupedIndex: () => number

getGroupedIndex: () => number

Gibt den Index der Spalte im Gruppierungszustand zurück.

toggleGrouping: () => void

toggleGrouping: () => void

Schaltet den Gruppierungszustand der Spalte um.

getToggleGroupingHandler: () => () => void

getToggleGroupingHandler: () => () => void

Gibt eine Funktion zurück, die den Gruppierungszustand der Spalte umschaltet. Dies ist nützlich für die Übergabe an die onClick-Eigenschaft eines Buttons.

getAutoAggregationFn: () => AggregationFn<TData> | undefined

getAutoAggregationFn: () => AggregationFn<TData> | undefined

Gibt die automatisch abgeleitete Aggregationsfunktion für die Spalte zurück.

getAggregationFn: () => AggregationFn<TData> | undefined

getAggregationFn: () => AggregationFn<TData> | undefined

Gibt die Aggregationsfunktion für die Spalte zurück.

groupingColumnId?: string

groupingColumnId?: string

Wenn diese Zeile gruppiert ist, ist dies die ID der Spalte, nach der diese Zeile gruppiert ist.

groupingValue?: any

groupingValue?: any

Wenn diese Zeile gruppiert ist, ist dies der eindeutige/gemeinsame Wert für die groupingColumnId für alle Zeilen in dieser Gruppe.

getIsGrouped: () => boolean

getIsGrouped: () => boolean

Gibt zurück, ob die Zeile derzeit gruppiert ist oder nicht.

getGroupingValue: (columnId: string) => unknown

getGroupingValue: (columnId: string) => unknown

Gibt den Gruppierungswert für jede Zeile und Spalte (einschließlich Blattzeilen) zurück.

aggregationFns?: Record<string, AggregationFn>

aggregationFns?: Record<string, AggregationFn>

Diese Option ermöglicht es Ihnen, benutzerdefinierte Aggregationsfunktionen zu definieren, auf die in der aggregationFn-Option einer Spalte über ihren Schlüssel verwiesen werden kann. Beispiel:

declare module '@tanstack/table-core' {
  interface AggregationFns {
    myCustomAggregation: AggregationFn<unknown>
  }
}

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

const table = useReactTable({
  columns: [column],
  aggregationFns: {
    myCustomAggregation: (columnId, leafRows, childRows) => {
      // return the aggregated value
    },
  },
})

declare module '@tanstack/table-core' {
  interface AggregationFns {
    myCustomAggregation: AggregationFn<unknown>
  }
}

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

const table = useReactTable({
  columns: [column],
  aggregationFns: {
    myCustomAggregation: (columnId, leafRows, childRows) => {
      // return the aggregated value
    },
  },
})

manualGrouping?: boolean

manualGrouping?: boolean

Aktiviert manuelle Gruppierung. Wenn diese Option auf true gesetzt ist, gruppiert die Tabelle Zeilen nicht automatisch mit getGroupedRowModel(), sondern erwartet stattdessen, dass Sie die Zeilen manuell gruppieren, bevor Sie sie an die Tabelle übergeben. Dies ist nützlich, wenn Sie serverseitige Gruppierung und Aggregation durchführen.

onGroupingChange?: OnChangeFn<GroupingState>

onGroupingChange?: OnChangeFn<GroupingState>

Wenn diese Funktion bereitgestellt wird, wird sie aufgerufen, wenn sich der Gruppierungszustand ändert, und Sie müssen den Zustand selbst verwalten. Sie können den verwalteten Zustand über die Option tableOptions.state.grouping an die Tabelle zurückgeben.

enableGrouping?: boolean

enableGrouping?: boolean

Aktiviert/deaktiviert die Gruppierung für alle Spalten.

getGroupedRowModel?: (table: Table<TData>) => () => RowModel<TData>

getGroupedRowModel?: (table: Table<TData>) => () => RowModel<TData>

Gibt das Zeilenmodell zurück, nachdem die Gruppierung stattgefunden hat, aber nicht weiter.

groupedColumnMode?: false | 'reorder' | 'remove' // default: `reorder`

groupedColumnMode?: false | 'reorder' | 'remove' // default: `reorder`

Gruppierungsspalten werden standardmäßig automatisch an den Anfang der Spaltenliste verschoben. Wenn Sie sie lieber entfernen oder so belassen möchten, legen Sie hier den entsprechenden Modus fest.

setGrouping: (updater: Updater<GroupingState>) => void

setGrouping: (updater: Updater<GroupingState>) => void

Setzt oder aktualisiert den Zustand state.grouping.

resetGrouping: (defaultState?: boolean) => void

resetGrouping: (defaultState?: boolean) => void

Setzt den **Gruppierungs**zustand auf initialState.grouping zurück, oder es kann true übergeben werden, um ein standardmäßiges leeres Zurücksetzen auf [] zu erzwingen.

getPreGroupedRowModel: () => RowModel<TData>

getPreGroupedRowModel: () => RowModel<TData>

Gibt das Zeilenmodell für die Tabelle zurück, bevor eine Gruppierung angewendet wurde.

getGroupedRowModel: () => RowModel<TData>

getGroupedRowModel: () => RowModel<TData>

Gibt das Zeilenmodell für die Tabelle zurück, nachdem die Gruppierung angewendet wurde.

getIsAggregated: () => boolean

getIsAggregated: () => boolean

Gibt zurück, ob die Zelle derzeit aggregiert ist oder nicht.

getIsGrouped: () => boolean

getIsGrouped: () => boolean

Gibt zurück, ob die Zelle derzeit gruppiert ist oder nicht.

getIsPlaceholder: () => boolean

getIsPlaceholder: () => boolean

Gibt zurück, ob die Zelle derzeit ein Platzhalter ist oder nicht.