Guía de Dimensionamiento de Columnas

Ejemplos

¿Quieres saltar a la implementación? Echa un vistazo a estos ejemplos:

• column-sizing
• column-resizing-performant

API

API de Dimensionamiento de Columnas

Guía de Dimensionamiento de Columnas

La característica de dimensionamiento de columnas te permite especificar opcionalmente el ancho de cada columna, incluyendo anchos mínimos y máximos. También te permite a ti y a tus usuarios la capacidad de cambiar dinámicamente el ancho de todas las columnas a voluntad, por ejemplo, arrastrando los encabezados de las columnas.

Anchos de Columna

Las columnas por defecto tienen las siguientes opciones de medida:

export const defaultColumnSizing = {
  size: 150,
  minSize: 20,
  maxSize: Number.MAX_SAFE_INTEGER,
};

Estos valores predeterminados pueden ser anulados tanto por tableOptions.defaultColumn como por definiciones de columna individuales, en ese orden.

const columns = [
  {
    accessorKey: "col1",
    size: 270, //establece el tamaño de columna para esta columna
  },
  //...
];

const table = useReactTable({
  //anula el dimensionamiento de columna predeterminado
  defaultColumn: {
    size: 200, //tamaño de columna inicial
    minSize: 50, //aplicado durante el redimensionamiento de columnas
    maxSize: 500, //aplicado durante el redimensionamiento de columnas
  },
});

Los "tamaños" de columna se almacenan en el estado de la tabla como números y generalmente se interpretan como valores de unidad de píxel, pero puedes conectar estos valores de dimensionamiento de columna a tus estilos CSS como mejor te parezca.

Como utilidad sin interfaz, la lógica de tabla para el dimensionamiento de columnas es realmente solo una colección de estados que puedes aplicar a tus propios diseños como mejor te parezca (nuestro ejemplo anterior implementa 2 estilos de esta lógica). Puedes aplicar estas medidas de ancho de diversas maneras:

• elementos table semánticos o cualquier elemento que se muestre en modo CSS de tabla
• elementos div/span o cualquier elemento que se muestre en modo CSS que no sea de tabla
  • Elementos a nivel de bloque con anchos estrictos
  • Elementos posicionados absolutamente con anchos estrictos
  • Elementos posicionados con Flexbox con anchos flexibles
  • Elementos posicionados con Grid con anchos flexibles
• Realmente cualquier mecanismo de diseño que pueda interpolar anchos de celda en una estructura de tabla.

Cada uno de estos enfoques tiene sus propias ventajas y desventajas y limitaciones que suelen ser opiniones de una biblioteca de UI/componentes o un sistema de diseño, por suerte no tuyas 😉.

Redimensionamiento de Columnas

TanStack Table proporciona un estado de redimensionamiento de columnas y APIs integradas que te permiten implementar fácilmente el redimensionamiento de columnas en la interfaz de usuario de tu tabla con una variedad de opciones para UX y rendimiento.

Habilitar Redimensionamiento de Columnas

Por defecto, la API column.getCanResize() devolverá true para todas las columnas, pero puedes deshabilitar el redimensionamiento de columnas para todas las columnas con la opción de tabla enableColumnResizing, o deshabilitar el redimensionamiento de columnas por columna con la opción de columna enableResizing.

const columns = [
  {
    accessorKey: "id",
    enableResizing: false, //deshabilita el redimensionamiento solo para esta columna
    size: 200, //tamaño de columna inicial
  },
  //...
];

Modo de Redimensionamiento de Columnas

Por defecto, el modo de redimensionamiento de columnas está establecido en "onEnd". Esto significa que la API column.getSize() no devolverá el nuevo tamaño de columna hasta que el usuario haya terminado de redimensionar (arrastrar) la columna. Normalmente se mostrará un pequeño indicador de UI mientras el usuario redimensiona la columna.

En el adaptador de React TanStack Table, donde lograr renderizados de redimensionamiento de columnas a 60 fps puede ser difícil, dependiendo de la complejidad de tu tabla o página web, el modo de redimensionamiento de columnas "onEnd" puede ser una buena opción predeterminada para evitar tartamudeos o retrasos mientras el usuario redimensiona las columnas. Esto no quiere decir que no puedas lograr renderizados de redimensionamiento de columnas a 60 fps usando TanStack React Table, pero es posible que tengas que hacer una memoización adicional u otras optimizaciones de rendimiento para lograrlo.

Los consejos avanzados de rendimiento para el redimensionamiento de columnas se discutirán más abajo.

Si deseas cambiar el modo de redimensionamiento de columnas a "onChange" para renderizados de redimensionamiento de columnas inmediatos, puedes hacerlo con la opción de tabla columnResizeMode.

const table = useReactTable({
  //...
  columnResizeMode: "onChange", //cambia el modo de redimensionamiento de columna a "onChange"
});

Dirección de Redimensionamiento de Columnas

Por defecto, TanStack Table asume que el marcado de la tabla está dispuesto de izquierda a derecha. Para diseños de derecha a izquierda, es posible que necesites cambiar la dirección de redimensionamiento de columnas a "rtl".

const table = useReactTable({
  //...
  columnResizeDirection: "rtl", //cambia la dirección de redimensionamiento de columna a "rtl" para ciertas configuraciones regionales
});

Conectar APIs de Redimensionamiento de Columnas a la UI

Hay algunas APIs realmente útiles que puedes usar para conectar tus interacciones de arrastre de redimensionamiento de columnas a tu UI.

APIs de Tamaño de Columna

Para aplicar el tamaño de una columna a las celdas de encabezado de columna, celdas de datos o celdas de pie de página, puedes usar las siguientes APIs:

header.getSize();
column.getSize();
cell.column.getSize();

Cómo apliques estos estilos de tamaño a tu marcado depende de ti, pero es bastante común usar variables CSS o estilos en línea para aplicar los tamaños de columna.

<th
  key={header.id}
  colSpan={header.colSpan}
  style={{ width: `${header.getSize()}px` }}
>

Aunque, como se discute en la sección de rendimiento avanzado del redimensionamiento de columnas, es posible que desees considerar el uso de variables CSS para aplicar los tamaños de columna a tu marcado.

APIs de Redimensionamiento de Columnas

TanStack Table proporciona un manejador de eventos preconstruido para facilitar la implementación de tus interacciones de arrastre. Estos manejadores de eventos son simplemente funciones de conveniencia que llaman a otras APIs internas para actualizar el estado de dimensionamiento de columnas y volver a renderizar la tabla. Usa header.getResizeHandler() para conectar tus interacciones de arrastre de redimensionamiento de columnas, tanto para eventos de ratón como táctiles.

<ColumnResizeHandle
  onMouseDown={header.getResizeHandler()} //para escritorio
  onTouchStart={header.getResizeHandler()} //para móvil
/>

Indicador de Redimensionamiento de Columna con ColumnSizingInfoState

TanStack Table rastrea un objeto de estado llamado columnSizingInfo que puedes usar para renderizar una UI de indicador de redimensionamiento de columna.

<ColumnResizeIndicator
  style={{
    transform: header.column.getIsResizing()
      ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
      : "",
  }}
/>

Rendimiento Avanzado del Redimensionamiento de Columnas

Si estás creando tablas grandes o complejas (y usando React 😉), es posible que si no agregas la memoización adecuada a tu lógica de renderizado, tus usuarios puedan experimentar un rendimiento degradado al redimensionar columnas.

Hemos creado un ejemplo de redimensionamiento de columnas de alto rendimiento que demuestra cómo lograr renderizados de redimensionamiento de columnas a 60 fps con una tabla compleja que de otro modo podría tener renderizados lentos. Se recomienda que solo mires ese ejemplo para ver cómo se hace, pero estas son las cosas básicas a tener en cuenta:

1. No uses column.getSize() en cada encabezado y en cada celda de datos. En su lugar, calcula todos los anchos de columna una vez de antemano, ¡memoizados!
2. Memoiza el cuerpo de tu tabla mientras el redimensionamiento está en curso.
3. Usa variables CSS para comunicar los anchos de columna a las celdas de tu tabla.

Si sigues estos pasos, deberías ver mejoras significativas en el rendimiento al redimensionar columnas.

Si no estás usando React, y estás usando los adaptadores de Svelte, Vue o Solid en su lugar, es posible que no tengas que preocuparte tanto por esto, pero se aplican principios similares.