Skip to main content

Guía de Fijación de Columnas

Ejemplos​

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

Otros Ejemplos​

API​

API de Fijación de Columnas

Guía de Fijación de Columnas​

TanStack Table ofrece estado y APIs útiles para implementar funciones de fijación de columnas en la interfaz de usuario de tu tabla. Puedes implementar la fijación de columnas de múltiples maneras. Puedes dividir las columnas fijadas en tablas separadas, o puedes mantener todas las columnas en la misma tabla, pero usar el estado de fijación para ordenar las columnas correctamente y usar CSS sticky para fijar las columnas a la izquierda o a la derecha.

Cómo la Fijación de Columnas Afecta el Orden de las Columnas​

Hay 3 características de la tabla que pueden reordenar las columnas, las cuales ocurren en el siguiente orden:

  1. Fijación de Columnas - Si se fijan, las columnas se dividen en columnas fijadas a la izquierda, al centro (sin fijar) y a la derecha.
  2. Orden de Columnas Manual - Se aplica un orden de columnas especificado manualmente.
  3. Agrupación - Si la agrupación está habilitada, un estado de agrupación está activo, y tableOptions.groupedColumnMode está establecido en 'reorder' | 'remove', entonces las columnas agrupadas se reordenan al inicio del flujo de columnas.

La única forma de cambiar el orden de las columnas fijadas es en el propio estado columnPinning.left y columnPinning.right. El estado columnOrder solo afectará el orden de las columnas no fijadas ("centro").

Estado de Fijación de Columnas​

Gestionar el estado columnPinning es opcional y normalmente no es necesario a menos que estés añadiendo características de estado persistente. TanStack Table ya hará un seguimiento del estado de fijación de columnas por ti. Gestiona el estado columnPinning como cualquier otro estado de la tabla si lo necesitas.

const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
  left: [],
  right: [],
});
//...
const table = useReactTable({
  //...
  state: {
    columnPinning,
    //...
  }
  onColumnPinningChange: setColumnPinning,
  //...
});

Fijar Columnas por Defecto​

Un caso de uso muy común es fijar algunas columnas por defecto. Puedes hacer esto inicializando el estado columnPinning con los columnIds fijados, o usando la opción initialState de la tabla.

const table = useReactTable({
  //...
  initialState: {
    columnPinning: {
      left: ['expand-column'],
      right: ['actions-column'],
    },
    //...
  }
  //...
});

APIs Útiles para la Fijación de Columnas​

Nota: Algunas de estas APIs son nuevas en la v8.12.0

Existen varios métodos útiles de la API de Columna para ayudarte a implementar características de fijación de columnas:

  • column.getCanPin: Usar para determinar si una columna puede ser fijada.
  • column.pin: Usar para fijar una columna a la izquierda o a la derecha. O usar para desfijar una columna.
  • column.getIsPinned: Usar para determinar dónde está fijada una columna.
  • column.getStart: Usar para proporcionar el valor CSS left correcto para una columna fijada.
  • column.getAfter: Usar para proporcionar el valor CSS right correcto para una columna fijada.
  • column.getIsLastColumn: Usar para determinar si una columna es la última columna en su grupo fijado. Útil para añadir una box-shadow.
  • column.getIsFirstColumn: Usar para determinar si una columna es la primera columna en su grupo fijado. Útil para añadir una box-shadow.

Fijación de Columnas en Tablas Divididas​

Si solo estás usando CSS sticky para fijar columnas, en su mayor parte, puedes simplemente renderizar la tabla como lo harías normalmente con los métodos table.getHeaderGroups y row.getVisibleCells.

Sin embargo, si estás dividiendo las columnas fijadas en sus propias tablas separadas, puedes hacer uso de los métodos table.getLeftHeaderGroups, table.getCenterHeaderGroups, table.getRightHeaderGroups, row.getLeftVisibleCells, row.getCenterVisibleCells, y row.getRightVisibleCells para renderizar solo las columnas que son relevantes para la tabla actual.