APIs de Ordenación

Estado

El estado de ordenación se almacena en la tabla usando la siguiente estructura:

export type SortDirection = "asc" | "desc";

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

export type SortingState = ColumnSort[];

export type SortingTableState = {
  sorting: SortingState;
};

Funciones de Ordenación

Las siguientes funciones de ordenación están integradas en el núcleo de la tabla:

• alphanumeric
  • Ordena por valores alfanuméricos mixtos sin distinguir entre mayúsculas y minúsculas. Más lento, pero más preciso si tus cadenas contienen números que necesitan ser ordenados naturalmente.
• alphanumericCaseSensitive
  • Ordena por valores alfanuméricos mixtos con distinción entre mayúsculas y minúsculas. Más lento, pero más preciso si tus cadenas contienen números que necesitan ser ordenados naturalmente.
• text
  • Ordena por valores de texto/cadena sin distinguir entre mayúsculas y minúsculas. Más rápido, pero menos preciso si tus cadenas contienen números que necesitan ser ordenados naturalmente.
• textCaseSensitive
  • Ordena por valores de texto/cadena con distinción entre mayúsculas y minúsculas. Más rápido, pero menos preciso si tus cadenas contienen números que necesitan ser ordenados naturalmente.
• datetime
  • Ordena por tiempo, usa esto si tus valores son objetos Date.
• basic
  • Ordena usando una comparación básica/estándar a > b ? 1 : a < b ? -1 : 0. Esta es la función de ordenación más rápida, pero puede no ser la más precisa.

Cada función de ordenación recibe 2 filas y un ID de columna y se espera que compare las dos filas usando el ID de columna para devolver -1, 0 o 1 en orden ascendente. Aquí tienes una guía rápida:

Retorno	Orden Ascendente
-1	a < b
0	a === b
1	a > b

Esta es la firma de tipo para cada función de ordenación:

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

Usando Funciones de Ordenación

Las funciones de ordenación pueden ser usadas/referenciadas/definidas pasando lo siguiente a columnDefinition.sortingFn:

• Una string que referencia una función de ordenación integrada
• Una string que referencia una función de ordenación personalizada proporcionada a través de la opción tableOptions.sortingFns
• Una función proporcionada directamente a la opción columnDefinition.sortingFn

La lista final de funciones de ordenación disponibles para el columnDef.sortingFn usa el siguiente tipo:

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

Opciones de Definición de Columna

sortingFn

sortingFn?: SortingFn | keyof SortingFns | keyof BuiltInSortingFns

La función de ordenación a usar con esta columna.

Opciones:

• Una string que referencia una función de ordenación integrada)
• Una función de ordenación personalizada

sortDescFirst

sortDescFirst?: boolean

Establecer a true para que los conmutadores de ordenación de esta columna comiencen en dirección descendente.

enableSorting

enableSorting?: boolean

Habilita/Deshabilita la ordenación para esta columna.

enableMultiSort

enableMultiSort?: boolean

Habilita/Deshabilita la ordenación múltiple para esta columna.

invertSorting

invertSorting?: boolean

Invierte el orden de la ordenación para esta columna. Esto es útil para valores que tienen una escala invertida de mejor/peor donde los números más bajos son mejores, por ejemplo, una clasificación (1º, 2º, 3º) o una puntuación tipo golf.

sortUndefined

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

• 'first'
  • Los valores indefinidos se moverán al principio de la lista
• 'last'
  • Los valores indefinidos se moverán al final de la lista
• false
  • Los valores indefinidos se considerarán empatados y deberán ser ordenados por el siguiente filtro de columna o el índice original (el que aplique)
• -1
  • Los valores indefinidos se ordenarán con mayor prioridad (ascendente) (si es ascendente, los indefinidos aparecerán al principio de la lista)
• 1
  • Los valores indefinidos se ordenarán con menor prioridad (descendente) (si es ascendente, los indefinidos aparecerán al final de la lista)

NOTA: Las opciones 'first' y 'last' son nuevas en la v8.16.0

API de Columna

getAutoSortingFn

getAutoSortingFn: () => SortingFn<TData>;

Devuelve una función de ordenación inferida automáticamente basándose en los valores de las columnas.

getAutoSortDir

getAutoSortDir: () => SortDirection;

Devuelve una dirección de ordenación inferida automáticamente basándose en los valores de las columnas.

getSortingFn

getSortingFn: () => SortingFn<TData>;

Devuelve la función de ordenación resuelta a utilizar para esta columna

getNextSortingOrder

getNextSortingOrder: () => SortDirection | false;

Devuelve el siguiente orden de ordenación.

getCanSort

getCanSort: () => boolean;

Devuelve si esta columna puede ser ordenada.

getCanMultiSort

getCanMultiSort: () => boolean;

Devuelve si esta columna puede ser multi-ordenada.

getSortIndex

getSortIndex: () => number;

Devuelve la posición del índice de ordenación de esta columna dentro del estado de ordenación

getIsSorted

getIsSorted: () => false | SortDirection;

Devuelve si esta columna está ordenada.

getFirstSortDir

getFirstSortDir: () => SortDirection;

Devuelve la primera dirección que debe usarse al ordenar esta columna.

clearSorting

clearSorting: () => void

Elimina esta columna del estado de ordenación de la tabla

toggleSorting

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

Alterna el estado de ordenación de esta columna. Si se proporciona desc, forzará la dirección de ordenación a ese valor. Si se proporciona isMulti, realizará una ordenación múltiple aditiva en la columna (o la alternará si ya está ordenada).

getToggleSortingHandler

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

Devuelve una función que se puede usar para alternar el estado de ordenación de esta columna. Esto es útil para adjuntar un manejador de clic al encabezado de la columna.

Opciones de Tabla

sortingFns

sortingFns?: Record<string, SortingFn>

Esta opción te permite definir funciones de ordenación personalizadas que pueden ser referenciadas en la opción sortingFn de una columna por su clave. Ejemplo:

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

manualSorting?: boolean

Habilita la ordenación manual para la tabla. Si esto es true, se espera que ordenes tus datos antes de pasarlos a la tabla. Esto es útil si estás realizando una ordenación en el lado del servidor.

onSortingChange

onSortingChange?: OnChangeFn<SortingState>

Si se proporciona, esta función será llamada con una updaterFn cuando state.sorting cambie. Esto anula la gestión de estado interna predeterminada, por lo que deberás persistir el cambio de estado de forma total o parcial fuera de la tabla.

enableSorting

enableSorting?: boolean

Habilita/Deshabilita la ordenación para la tabla.

enableSortingRemoval

enableSortingRemoval?: boolean

Habilita/Deshabilita la capacidad de eliminar la ordenación de la tabla.

• Si es true, cambiar el orden de ordenación circulará como: 'ninguno' -> 'desc' -> 'asc' -> 'ninguno' -> ...
• Si es false, cambiar el orden de ordenación circulará como: 'ninguno' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ...

enableMultiRemove

enableMultiRemove?: boolean

Habilita/deshabilita la capacidad de eliminar ordenaciones múltiples

enableMultiSort

enableMultiSort?: boolean

Habilita/Deshabilita la ordenación múltiple para la tabla.

sortDescFirst

sortDescFirst?: boolean

Si es true, todas las ordenaciones se establecerán por defecto en descendente como su primer estado de alternancia.

getSortedRowModel

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

Esta función se utiliza para recuperar el modelo de fila ordenado. Si se utiliza la ordenación en el lado del servidor, esta función no es necesaria. Para utilizar la ordenación en el lado del cliente, pasa la función getSortedRowModel() exportada desde tu adaptador a tu tabla o implementa la tuya propia.

maxMultiSortColCount

maxMultiSortColCount?: number

Establece un número máximo de columnas que pueden ser multi-ordenadas.

isMultiSortEvent

isMultiSortEvent?: (e: unknown) => boolean

Pasa una función personalizada que se utilizará para determinar si se debe activar un evento de ordenación múltiple. Se le pasa el evento desde el manejador de alternancia de ordenación y debe devolver true si el evento debe activar una ordenación múltiple.

API de Tabla

setSorting

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

Establece o actualiza el estado state.sorting.

resetSorting

resetSorting: (defaultState?: boolean) => void

Restablece el estado de ordenación a initialState.sorting, o se puede pasar true para forzar un restablecimiento a un estado vacío predeterminado [].

getPreSortedRowModel

getPreSortedRowModel: () => RowModel<TData>;

Devuelve el modelo de fila para la tabla antes de que se haya aplicado cualquier ordenación.

getSortedRowModel

getSortedRowModel: () => RowModel<TData>;

Devuelve el modelo de fila para la tabla después de que se haya aplicado la ordenación.