Guía de Ordenación de Columnas

Ejemplos

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

• column-ordering
• column-dnd

API

API de Ordenación de Columnas

Guía de Ordenación de Columnas

Por defecto, las columnas se ordenan en el orden en que se definen en el array columns. Sin embargo, puedes especificar manualmente el orden de las columnas utilizando el estado columnOrder. Otras características como la fijación de columnas (column pinning) y el agrupamiento (grouping) también pueden afectar el orden de las columnas.

Qué Afecta el Orden de las Columnas

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

1. Fijación de Columnas - Si se utiliza la fijación, las columnas se dividen en columnas fijadas a la izquierda, al centro (sin fijar) y a la derecha.
2. Ordenación Manual de Columnas - Se aplica un orden de columnas especificado manualmente.
3. Agrupamiento - Si el agrupamiento está habilitado, un estado de agrupamiento está activo, y tableOptions.groupedColumnMode se establece en 'reorder' | 'remove', entonces las columnas agrupadas se reordenan al inicio del flujo de columnas.

Nota: El estado columnOrder solo afectará a las columnas sin fijar si se utiliza junto con la fijación de columnas.

Estado del Orden de Columnas

Si no proporcionas un estado columnOrder, TanStack Table simplemente usará el orden de las columnas en el array columns. Sin embargo, puedes proporcionar un array de IDs de columna de tipo cadena al estado columnOrder para especificar el orden de las columnas.

Orden de Columnas Predeterminado

Si todo lo que necesitas hacer es especificar el orden inicial de las columnas, puedes simplemente especificar el estado columnOrder en la opción de tabla initialState.

const table = useReactTable({
  //...
  initialState: {
    columnOrder: ["columnId1", "columnId2", "columnId3"],
  },
  //...
});

Nota: Si estás utilizando la opción de tabla state para especificar también el estado columnOrder, initialState no tendrá ningún efecto. Solo especifica estados particulares en initialState o en state, no en ambos.

Gestión del Estado del Orden de Columnas

Si necesitas cambiar dinámicamente el orden de las columnas, o establecer el orden de las columnas después de que la tabla haya sido inicializada, puedes gestionar el estado columnOrder como cualquier otro estado de la tabla.

const [columnOrder, setColumnOrder] = useState<string[]>(['columnId1', 'columnId2', 'columnId3']); // Inicializa opcionalmente el orden de las columnas
//...
const table = useReactTable({
  //...
  state: {
    columnOrder,
    //...
  }
  onColumnOrderChange: setColumnOrder,
  //...
});

Reordenando Columnas

Si la tabla tiene una interfaz de usuario que permite al usuario reordenar columnas, puedes configurar la lógica de la siguiente manera:

const [columnOrder, setColumnOrder] = useState<string[]>(
  columns.map((c) => c.id),
);

// dependiendo de tu solución dnd elegida, puede que necesites o no un estado como este
const [movingColumnId, setMovingColumnId] = useState<string | null>(null);
const [targetColumnId, setTargetColumnId] = useState<string | null>(null);

// función de utilidad para empalmar y reordenar el array columnOrder
const reorderColumn = <TData extends RowData>(
  movingColumnId: Column<TData>,
  targetColumnId: Column<TData>,
): string[] => {
  const newColumnOrder = [...columnOrder];
  newColumnOrder.splice(
    newColumnOrder.indexOf(targetColumnId),
    0,
    newColumnOrder.splice(newColumnOrder.indexOf(movingColumnId), 1)[0],
  );
  setColumnOrder(newColumnOrder);
};

const handleDragEnd = (e: DragEvent) => {
  if (!movingColumnId || !targetColumnId) return;
  setColumnOrder(reorderColumn(movingColumnId, targetColumnId));
};

// usa tu solución dnd preferida

Sugerencias para la Reordenación de Columnas con Arrastrar y Soltar (React)

Indudablemente hay muchas maneras de implementar funcionalidades de arrastrar y soltar junto con TanStack Table. Aquí hay algunas sugerencias para que no tengas una mala experiencia:

1. NO intentes usar "react-dnd" si estás usando React 18 o superior. React DnD fue una biblioteca importante en su momento, pero ahora no se actualiza muy a menudo y tiene incompatibilidades con React 18, especialmente en React Strict Mode. Todavía es posible hacerla funcionar, pero existen alternativas más nuevas que tienen mejor compatibilidad y se mantienen más activamente. El Proveedor de React DnD también puede interferir y entrar en conflicto con cualquier otra solución DnD que desees probar en tu aplicación.

2. Usa "@dnd-kit/core". DnD Kit es una biblioteca de arrastrar y soltar moderna, modular y ligera que es altamente compatible con el ecosistema moderno de React, y funciona bien con el marcado semántico <table>. Ambos ejemplos oficiales de TanStack DnD, Column DnD y Row DnD, ahora usan DnD Kit.

3. Considera otras bibliotecas DnD como "react-beautiful-dnd", pero ten en cuenta sus tamaños de paquete potencialmente grandes, el estado de mantenimiento y la compatibilidad con el marcado <table>.

4. Considera usar eventos nativos del navegador y gestión de estado para implementar funcionalidades ligeras de arrastrar y soltar. Sin embargo, ten en cuenta que este enfoque podría no ser el mejor para usuarios móviles si no haces un esfuerzo adicional para implementar eventos táctiles adecuados. Material React Table V2 es un ejemplo de una biblioteca que implementa TanStack Table solo con eventos de arrastrar y soltar del navegador, como onDragStart, onDragEnd, onDragEnter, y sin otras dependencias. Examina su código fuente para ver cómo se hace.