Skip to main content

Agrupación de APIs

Estado​

El estado de agrupación se almacena en la tabla usando la siguiente forma:

export type GroupingState = string[];

export type GroupingTableState = {
  grouping: GroupingState;
};

Funciones de Agregación​

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

  • sum
    • Suma los valores de un grupo de filas
  • min
    • Encuentra el valor mínimo de un grupo de filas
  • max
    • Encuentra el valor máximo de un grupo de filas
  • extent
    • Encuentra los valores mínimo y máximo de un grupo de filas
  • mean
    • Encuentra el valor medio/promedio de un grupo de filas
  • median
    • Encuentra el valor mediano de un grupo de filas
  • unique
    • Encuentra los valores únicos de un grupo de filas
  • uniqueCount
    • Encuentra el número de valores únicos de un grupo de filas
  • count
    • Calcula el número de filas en un grupo

Cada función de agrupación recibe:

  • Una función para recuperar los valores hoja de las filas del grupo
  • Una función para recuperar los valores de los hijos inmediatos de las filas del grupo

y debe devolver un valor (generalmente primitivo) para construir el modelo de fila agregado.

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

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

Uso de Funciones de Agregación​

Las funciones de agregación pueden usarse/referenciarse/definirse pasando lo siguiente a columnDefinition.aggregationFn:

  • Un string que referencia una función de agregación integrada
  • Un string que referencia funciones de agregación personalizadas proporcionadas a través de la opción tableOptions.aggregationFns
  • Una función proporcionada directamente a la opción columnDefinition.aggregationFn

La lista final de funciones de agregación disponibles para columnDef.aggregationFn utiliza el siguiente tipo:

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

Opciones de Definición de Columna​

aggregationFn​

aggregationFn?: AggregationFn | keyof AggregationFns | keyof BuiltInAggregationFns

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

Opciones:

aggregatedCell​

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

La celda a mostrar para cada fila de la columna si la celda es un agregado. Si se pasa una función, se le pasará un objeto de propiedades con el contexto de la celda y debe devolver el tipo de propiedad para su adaptador (el tipo exacto depende del adaptador que se esté utilizando).

enableGrouping​

enableGrouping?: boolean

Habilita/deshabilita la agrupación para esta columna.

getGroupingValue​

getGroupingValue?: (row: TData) => any

Especifica un valor a usar para agrupar filas en esta columna. Si esta opción no se especifica, se usará en su lugar el valor derivado de accessorKey / accessorFn.

API de Columna​

aggregationFn​

aggregationFn?: AggregationFnOption<TData>

La función de agregación resuelta para la columna.

getCanGroup​

getCanGroup: () => boolean;

Devuelve si la columna se puede agrupar o no.

getIsGrouped​

getIsGrouped: () => boolean;

Devuelve si la columna está agrupada actualmente o no.

getGroupedIndex​

getGroupedIndex: () => number;

Devuelve el índice de la columna en el estado de agrupación.

toggleGrouping​

toggleGrouping: () => void

Alterna el estado de agrupación de la columna.

getToggleGroupingHandler​

getToggleGroupingHandler: () => () => void

Devuelve una función que alterna el estado de agrupación de la columna. Esto es útil para pasar a la prop onClick de un botón.

getAutoAggregationFn​

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

Devuelve la función de agregación inferida automáticamente para la columna.

getAggregationFn​

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

Devuelve la función de agregación para la columna.

API de Fila​

groupingColumnId​

groupingColumnId?: string

Si esta fila está agrupada, este es el ID de la columna por la que está agrupada.

groupingValue​

groupingValue?: any

Si esta fila está agrupada, este es el valor único/compartido para el groupingColumnId de todas las filas en este grupo.

getIsGrouped​

getIsGrouped: () => boolean;

Devuelve si la fila está agrupada actualmente o no.

getGroupingValue​

getGroupingValue: (columnId: string) => unknown;

Devuelve el valor de agrupación para cualquier fila y columna (incluidas las filas hoja).

Opciones de Tabla​

aggregationFns​

aggregationFns?: Record<string, AggregationFn>

Esta opción le permite definir funciones de agregación personalizadas que pueden ser referenciadas en la opción aggregationFn de una columna por su clave. Ejemplo:

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) => {
      // devuelve el valor agregado
    },
  },
});

manualGrouping​

manualGrouping?: boolean

Habilita la agrupación manual. Si esta opción se establece en true, la tabla no agrupará automáticamente las filas usando getGroupedRowModel() y, en su lugar, esperará que usted agrupe manualmente las filas antes de pasarlas a la tabla. Esto es útil si está realizando agrupación y agregación en el servidor.

onGroupingChange​

onGroupingChange?: OnChangeFn<GroupingState>

Si se proporciona esta función, se llamará cuando cambie el estado de agrupación y se esperará que usted gestione el estado por sí mismo. Puede pasar el estado gestionado de vuelta a la tabla a través de la opción tableOptions.state.grouping.

enableGrouping​

enableGrouping?: boolean

Habilita/deshabilita la agrupación para todas las columnas.

getGroupedRowModel​

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

Devuelve el modelo de fila después de que se haya realizado la agrupación, pero sin ir más allá.

groupedColumnMode​

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

Las columnas de agrupación se reordenan automáticamente por defecto al inicio de la lista de columnas. Si prefiere eliminarlas o dejarlas tal cual, establezca el modo apropiado aquí.

API de Tabla​

setGrouping​

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

Establece o actualiza el estado state.grouping.

resetGrouping​

resetGrouping: (defaultState?: boolean) => void

Reinicia el estado de agrupación a initialState.grouping, o se puede pasar true para forzar un reinicio a un estado en blanco por defecto [].

getPreGroupedRowModel​

getPreGroupedRowModel: () => RowModel<TData>;

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

getGroupedRowModel​

getGroupedRowModel: () => RowModel<TData>;

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

API de Celda​

getIsAggregated​

getIsAggregated: () => boolean;

Devuelve si la celda está agregada actualmente o no.

getIsGrouped​

getIsGrouped: () => boolean;

Devuelve si la celda está agrupada actualmente o no.

getIsPlaceholder​

getIsPlaceholder: () => boolean;

Devuelve si la celda es actualmente un marcador de posición o no.