How to implement dnd for both columns and rows at the same time.

[Stobles]

In the documentation I saw examples of implementing DND only for columns or only rows. I haven't seen the implementation of both at the same time in the code.

The difficulty lies in working with the DNDContext, because it creates a DIV, which is why it can't be inside a table tag. You have to take it to the top level to the main table component, where you need to define two types of functions: one type for DND to work with rows and the other type for working with columns.

I can only think of a code like this, where I determine by the active state which callback to pass to DndContext

function CustomTable() {
  const [activeDndRow, setActiveDndRow] = useState<UniqueIdentifier | null>(null);
  const [activeDndColumn, setActiveDndColumn] = useState<UniqueIdentifier | null>(null);

  // Functions for columns dnd

  function handleColumnDragStart({ active }: DragStartEvent) {
    // ...
  }

  function handleColumnDragCancel() {
    // ...
  }

  function handleColumnDragEnd({ over }: DragEndEvent) {
    // ...
  }

  // Functions for rows dnd

  function handleRowDragStart({ active }: DragStartEvent) {
    // ...
  }

  function handleRowDragCancel() {
    // ...
  }

  function handleRowDragEnd({ over }: DragEndEvent) {
    // ...
  }

  return (
    <DndContext onDragStart={activeDndRow ? handleRowDragStart : handleColumnDragStart}>
      <table>
        <TableHeader /> {/* <--- Dnd columns are here */}
        <TableContent /> {/* <--- Dnd rows are here */}
      </table>
    </DndContext>
  );
}