Skip to main content

APIs de Ajuste de Columnas

Estado​

El estado de ajuste de columnas se almacena en la tabla utilizando la siguiente estructura:

export type ColumnSizingTableState = {
  columnSizing: ColumnSizing;
  columnSizingInfo: ColumnSizingInfoState;
};

export type ColumnSizing = Record<string, number>;

export type ColumnSizingInfoState = {
  startOffset: null | number;
  startSize: null | number;
  deltaOffset: null | number;
  deltaPercentage: null | number;
  isResizingColumn: false | string;
  columnSizingStart: [string, number][];
};

Opciones de Definición de Columna​

enableResizing​

enableResizing?: boolean

Habilita o deshabilita el ajuste de tamaño para la columna.

size​

size?: number

El tamaño deseado para la columna

minSize​

minSize?: number

El tamaño mínimo permitido para la columna

maxSize​

maxSize?: number

El tamaño máximo permitido para la columna

API de Columna​

getSize​

getSize: () => number;

Devuelve el tamaño actual de la columna

getStart​

getStart: (position?: ColumnPinningPosition) => number;

Devuelve la medida de desplazamiento a lo largo del eje de la fila (normalmente el eje x para tablas estándar) para la columna, midiendo el tamaño de todas las columnas precedentes.

Útil para el posicionamiento fijo o absoluto de columnas. (ej. left o transform)

getAfter​

getAfter: (position?: ColumnPinningPosition) => number;

Devuelve la medida de desplazamiento a lo largo del eje de la fila (normalmente el eje x para tablas estándar) para la columna, midiendo el tamaño de todas las columnas siguientes.

Útil para el posicionamiento fijo o absoluto de columnas. (ej. right o transform)

getCanResize​

getCanResize: () => boolean;

Devuelve true si la columna se puede ajustar de tamaño.

getIsResizing​

getIsResizing: () => boolean;

Devuelve true si la columna se está ajustando de tamaño actualmente.

resetSize​

resetSize: () => void

Restablece el tamaño de la columna a su tamaño inicial.

API de Cabecera​

getSize​

getSize: () => number;

Devuelve el tamaño de la cabecera, calculado sumando el tamaño de todas las columnas hoja que le pertenecen.

getStart​

getStart: (position?: ColumnPinningPosition) => number;

Devuelve la medida de desplazamiento a lo largo del eje de la fila (normalmente el eje x para tablas estándar) para la cabecera. Esto es efectivamente una suma de las medidas de desplazamiento de todas las cabeceras precedentes.

getResizeHandler​

getResizeHandler: () => (event: unknown) => void

Devuelve una función de controlador de eventos que se puede utilizar para ajustar el tamaño de la cabecera. Se puede utilizar como un:

  • controlador onMouseDown
  • controlador onTouchStart

Los eventos de arrastre y liberación se manejan automáticamente.

Opciones de Tabla​

enableColumnResizing​

enableColumnResizing?: boolean

Habilita/deshabilita el ajuste de tamaño para *todas las columnas**.

columnResizeMode​

columnResizeMode?: 'onChange' | 'onEnd'

Determina cuándo se actualiza el estado columnSizing. onChange actualiza el estado cuando el usuario está arrastrando el manipulador de ajuste de tamaño. onEnd actualiza el estado cuando el usuario suelta el manipulador de ajuste de tamaño.

columnResizeDirection​

columnResizeDirection?: 'ltr' | 'rtl'

Habilita o deshabilita el soporte de derecha a izquierda para ajustar el tamaño de la columna. Por defecto es 'ltr'.

onColumnSizingChange​

onColumnSizingChange?: OnChangeFn<ColumnSizingState>

Esta función opcional se llamará cuando cambie el estado columnSizing. Si proporciona esta función, será responsable de mantener su estado usted mismo. Puede pasar este estado de vuelta a la tabla a través de la opción de tabla state.columnSizing.

onColumnSizingInfoChange​

onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>

Esta función opcional se llamará cuando cambie el estado columnSizingInfo. Si proporciona esta función, será responsable de mantener su estado usted mismo. Puede pasar este estado de vuelta a la tabla a través de la opción de tabla state.columnSizingInfo.

API de Tabla​

setColumnSizing​

setColumnSizing: (updater: Updater<ColumnSizingState>) => void

Establece el estado de ajuste de columnas utilizando una función updater o un valor. Esto activará la función onColumnSizingChange subyacente si se pasa una a las opciones de la tabla; de lo contrario, el estado será gestionado automáticamente por la tabla.

setColumnSizingInfo​

setColumnSizingInfo: (updater: Updater<ColumnSizingInfoState>) => void

Establece el estado de información de ajuste de columnas utilizando una función updater o un valor. Esto activará la función onColumnSizingInfoChange subyacente si se pasa una a las opciones de la tabla; de lo contrario, el estado será gestionado automáticamente por la tabla.

resetColumnSizing​

resetColumnSizing: (defaultState?: boolean) => void

Restablece el ajuste de tamaño de columna a su estado inicial. Si defaultState es true, se utilizará el estado predeterminado de la tabla en lugar del initialValue proporcionado a la tabla.

resetHeaderSizeInfo​

resetHeaderSizeInfo: (defaultState?: boolean) => void

Restablece la información de ajuste de tamaño de columna a su estado inicial. Si defaultState es true, se utilizará el estado predeterminado de la tabla en lugar del initialValue proporcionado a la tabla.

getTotalSize​

getTotalSize: () => number;

Devuelve el tamaño total de la tabla calculando la suma de los tamaños de todas las columnas hoja.

getLeftTotalSize​

getLeftTotalSize: () => number;

Si se usa pinning, devuelve el tamaño total de la porción izquierda de la tabla calculando la suma de los tamaños de todas las columnas hoja izquierdas.

getCenterTotalSize​

getCenterTotalSize: () => number;

Si se usa pinning, devuelve el tamaño total de la porción central de la tabla calculando la suma de los tamaños de todas las columnas hoja sin fijar/centrales.

getRightTotalSize​

getRightTotalSize: () => number;

Si se usa pinning, devuelve el tamaño total de la porción derecha de la tabla calculando la suma de los tamaños de todas las columnas hoja derechas.