Sortier-APIs

Der Sortierungsstatus wird in der Tabelle mit der folgenden Struktur gespeichert

export type SortDirection = 'asc' | 'desc'

export type ColumnSort = {
  id: string
  desc: boolean
}

export type SortingState = ColumnSort[]

export type SortingTableState = {
  sorting: SortingState
}

export type SortDirection = 'asc' | 'desc'

export type ColumnSort = {
  id: string
  desc: boolean
}

export type SortingState = ColumnSort[]

export type SortingTableState = {
  sorting: SortingState
}

Die folgenden Sortierfunktionen sind im Tabellenkern integriert

• alphanumeric
  • Sortiert nach gemischten alphanumerischen Werten ohne Berücksichtigung der Groß-/Kleinschreibung. Langsamer, aber genauer, wenn Ihre Zeichenfolgen Zahlen enthalten, die natürlich sortiert werden müssen.
• alphanumericCaseSensitive
  • Sortiert nach gemischten alphanumerischen Werten unter Berücksichtigung der Groß-/Kleinschreibung. Langsamer, aber genauer, wenn Ihre Zeichenfolgen Zahlen enthalten, die natürlich sortiert werden müssen.
• text
  • Sortiert nach Text-/Zeichenfolgenwerten ohne Berücksichtigung der Groß-/Kleinschreibung. Schneller, aber weniger genau, wenn Ihre Zeichenfolgen Zahlen enthalten, die natürlich sortiert werden müssen.
• textCaseSensitive
  • Sortiert nach Text-/Zeichenfolgenwerten unter Berücksichtigung der Groß-/Kleinschreibung. Schneller, aber weniger genau, wenn Ihre Zeichenfolgen Zahlen enthalten, die natürlich sortiert werden müssen.
• datetime
  • Sortiert nach Zeit, verwenden Sie dies, wenn Ihre Werte Date Objekte sind.
• basic
  • Sortiert mit einem grundlegenden/standardmäßigen a > b ? 1 : a < b ? -1 : 0 Vergleich. Dies ist die schnellste Sortierfunktion, aber möglicherweise nicht die genaueste.

Jede Sortierfunktion empfängt 2 Zeilen und eine Spalten-ID und muss die beiden Zeilen anhand der Spalten-ID vergleichen, um -1, 0 oder 1 in aufsteigender Reihenfolge zurückzugeben. Hier ist eine Cheat-Sheet

Dies ist die Typensignatur für jede Sortierfunktion

export type SortingFn<TData extends AnyData> = {
  (rowA: Row<TData>, rowB: Row<TData>, columnId: string): number
}

export type SortingFn<TData extends AnyData> = {
  (rowA: Row<TData>, rowB: Row<TData>, columnId: string): number
}

Sortierfunktionen können verwendet/referenziert/definiert werden, indem Sie Folgendes an columnDefinition.sortingFn übergeben

• Eine Zeichenfolge, die eine integrierte Sortierfunktion referenziert
• Eine Zeichenfolge, die benutzerdefinierte Sortierfunktionen referenziert, die über die Option tableOptions.sortingFns bereitgestellt werden
• Eine Funktion, die direkt an die Option columnDefinition.sortingFn übergeben wird

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

export type SortingFnOption<TData extends AnyData> =
  | 'auto'
  | SortingFns
  | BuiltInSortingFns
  | SortingFn<TData>

export type SortingFnOption<TData extends AnyData> =
  | 'auto'
  | SortingFns
  | BuiltInSortingFns
  | SortingFn<TData>

sortingFn?: SortingFn | keyof SortingFns | keyof BuiltInSortingFns

sortingFn?: SortingFn | keyof SortingFns | keyof BuiltInSortingFns

Die zu verwendende Sortierfunktion für diese Spalte.

Optionen

• Eine Zeichenfolge, die auf eine integrierte Sortierfunktion verweist)
• Eine benutzerdefinierte Sortierfunktion

sortDescFirst?: boolean

sortDescFirst?: boolean

Setzen Sie auf true, damit Sortiertoggles für diese Spalte in absteigender Richtung beginnen.

enableSorting?: boolean

enableSorting?: boolean

Aktiviert/Deaktiviert die Sortierung für diese Spalte.

enableMultiSort?: boolean

enableMultiSort?: boolean

Aktiviert/Deaktiviert die Mehrfachsortierung für diese Spalte.

invertSorting?: boolean

invertSorting?: boolean

Kehrt die Sortierreihenfolge für diese Spalte um. Dies ist nützlich für Werte, die eine umgekehrte Best/Worst-Skala haben, bei der niedrigere Zahlen besser sind, z. B. eine Rangliste (1., 2., 3.) oder Golf-ähnliche Punktzahlen

sortUndefined?: 'first' | 'last' | false | -1 | 1 // defaults to 1

sortUndefined?: 'first' | 'last' | false | -1 | 1 // defaults to 1

• 'first'
  • Undefinierte Werte werden an den Anfang der Liste verschoben
• 'last'
  • Undefinierte Werte werden an das Ende der Liste verschoben
• false
  • Undefinierte Werte werden als gleichwertig betrachtet und müssen nach dem nächsten Spaltenfilter oder dem ursprünglichen Index sortiert werden (je nachdem, was zutrifft)
• -1
  • Undefinierte Werte werden mit höherer Priorität (aufsteigend) sortiert (wenn aufsteigend, erscheinen undefinierte Werte am Anfang der Liste)
• 1
  • Undefinierte Werte werden mit niedrigerer Priorität (absteigend) sortiert (wenn aufsteigend, erscheinen undefinierte Werte am Ende der Liste)

HINWEIS: 'first' und 'last' Optionen sind neu in v8.16.0

getAutoSortingFn: () => SortingFn<TData>

getAutoSortingFn: () => SortingFn<TData>

Gibt eine Sortierfunktion zurück, die automatisch basierend auf den Werten der Spalten abgeleitet wird.

getAutoSortDir: () => SortDirection

getAutoSortDir: () => SortDirection

Gibt eine Sortierrichtung zurück, die automatisch basierend auf den Werten der Spalten abgeleitet wird.

getSortingFn: () => SortingFn<TData>

getSortingFn: () => SortingFn<TData>

Gibt die aufgelöste Sortierfunktion zurück, die für diese Spalte verwendet werden soll

getNextSortingOrder: () => SortDirection | false

getNextSortingOrder: () => SortDirection | false

Gibt die nächste Sortierreihenfolge zurück.

getCanSort: () => boolean

getCanSort: () => boolean

Gibt zurück, ob diese Spalte sortiert werden kann.

getCanMultiSort: () => boolean

getCanMultiSort: () => boolean

Gibt zurück, ob diese Spalte mehrfach sortiert werden kann.

getSortIndex: () => number

getSortIndex: () => number

Gibt den Index dieser Spalte innerhalb des Sortierstatus zurück

getIsSorted: () => false | SortDirection

getIsSorted: () => false | SortDirection

Gibt zurück, ob diese Spalte sortiert ist.

getFirstSortDir: () => SortDirection

getFirstSortDir: () => SortDirection

Gibt die erste Richtung zurück, die beim Sortieren dieser Spalte verwendet werden soll.

clearSorting: () => void

clearSorting: () => void

Entfernt diese Spalte aus dem Sortierstatus der Tabelle

toggleSorting: (desc?: boolean, isMulti?: boolean) => void

toggleSorting: (desc?: boolean, isMulti?: boolean) => void

Schaltet den Sortierstatus dieser Spalte um. Wenn desc angegeben ist, wird die Sortierrichtung auf diesen Wert erzwungen. Wenn isMulti angegeben ist, wird die Spalte additiv mehrfach sortiert (oder umgeschaltet, wenn sie bereits sortiert ist).

getToggleSortingHandler: () => undefined | ((event: unknown) => void)

getToggleSortingHandler: () => undefined | ((event: unknown) => void)

Gibt eine Funktion zurück, die verwendet werden kann, um den Sortierstatus dieser Spalte umzuschalten. Dies ist nützlich, um einen Klick-Handler an den Spaltenkopf anzuhängen.

sortingFns?: Record<string, SortingFn>

sortingFns?: Record<string, SortingFn>

Diese Option ermöglicht es Ihnen, benutzerdefinierte Sortierfunktionen zu definieren, auf die in der Option sortingFn einer Spalte anhand ihres Schlüssels verwiesen werden kann. Beispiel

declare module '@tanstack/table-core' {
  interface SortingFns {
    myCustomSorting: SortingFn<unknown>
  }
}

const column = columnHelper.data('key', {
  sortingFn: 'myCustomSorting',
})

const table = useReactTable({
  columns: [column],
  sortingFns: {
    myCustomSorting: (rowA: any, rowB: any, columnId: any): number =>
      rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1,
  },
})

declare module '@tanstack/table-core' {
  interface SortingFns {
    myCustomSorting: SortingFn<unknown>
  }
}

const column = columnHelper.data('key', {
  sortingFn: 'myCustomSorting',
})

const table = useReactTable({
  columns: [column],
  sortingFns: {
    myCustomSorting: (rowA: any, rowB: any, columnId: any): number =>
      rowA.getValue(columnId).value < rowB.getValue(columnId).value ? 1 : -1,
  },
})

manualSorting?: boolean

manualSorting?: boolean

Aktiviert manuelle Sortierung für die Tabelle. Wenn dies true ist, müssen Sie Ihre Daten sortieren, bevor sie an die Tabelle übergeben werden. Dies ist nützlich, wenn Sie serverseitige Sortierung durchführen.

onSortingChange?: OnChangeFn<SortingState>

onSortingChange?: OnChangeFn<SortingState>

Wenn bereitgestellt, wird diese Funktion mit einer updaterFn aufgerufen, wenn sich state.sorting ändert. Dies überschreibt die standardmäßige interne Zustandsverwaltung, sodass Sie die Zustandsänderung entweder vollständig oder teilweise außerhalb der Tabelle persistent speichern müssen.

enableSorting?: boolean

enableSorting?: boolean

Aktiviert/Deaktiviert die Sortierung für die Tabelle.

enableSortingRemoval?: boolean

enableSortingRemoval?: boolean

Aktiviert/Deaktiviert die Möglichkeit, die Sortierung für die Tabelle zu entfernen.

• Wenn true, werden alle Sortierungen beim ersten Umschalten in absteigender Reihenfolge angezeigt: 'none' -> 'desc' -> 'asc' -> 'none' -> ...
• Wenn false, werden alle Sortierungen beim Umschalten in folgender Reihenfolge angezeigt: 'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ...

enableMultiRemove?: boolean

enableMultiRemove?: boolean

Aktiviert/Deaktiviert die Möglichkeit, Mehrfachsortierungen zu entfernen

enableMultiSort?: boolean

enableMultiSort?: boolean

Aktiviert/Deaktiviert die Mehrfachsortierung für die Tabelle.

sortDescFirst?: boolean

sortDescFirst?: boolean

Wenn true, werden alle Sortierungen standardmäßig als ihre erste Umschaltzustand absteigend sein.

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

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

Diese Funktion wird verwendet, um das sortierte Zeilenmodell abzurufen. Bei serverseitiger Sortierung ist diese Funktion nicht erforderlich. Um clientseitige Sortierung zu verwenden, übergeben Sie die exportierte getSortedRowModel() aus Ihrem Adapter an Ihre Tabelle oder implementieren Sie Ihre eigene.

maxMultiSortColCount?: number

maxMultiSortColCount?: number

Setzt eine maximale Anzahl von Spalten, die mehrfach sortiert werden können.

isMultiSortEvent?: (e: unknown) => boolean

isMultiSortEvent?: (e: unknown) => boolean

Übergeben Sie eine benutzerdefinierte Funktion, die verwendet wird, um zu bestimmen, ob ein Mehrfachsortierungsereignis ausgelöst werden soll. Sie erhält das Ereignis vom Sortiertoggle-Handler und sollte true zurückgeben, wenn das Ereignis eine Mehrfachsortierung auslösen soll.

setSorting: (updater: Updater<SortingState>) => void

setSorting: (updater: Updater<SortingState>) => void

Setzt oder aktualisiert den state.sorting Status.

resetSorting: (defaultState?: boolean) => void

resetSorting: (defaultState?: boolean) => void

Setzt den **Sortierstatus** auf initialState.sorting zurück, oder true kann übergeben werden, um ein Standard-Leerzustandsreset auf [] zu erzwingen.

getPreSortedRowModel: () => RowModel<TData>

getPreSortedRowModel: () => RowModel<TData>

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

getSortedRowModel: () => RowModel<TData>

getSortedRowModel: () => RowModel<TData>

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