V9 Datagrid drag and drop

[vdsb]

Do you have any update regarding this feature or if it is on the roadmap for DataGrid v9?
There have been a few enquiries about column reordering with drag and drop support, but there does not appear to have been any updates for 2 years.

#26819
#32258

It would be helpful to get an update to understand whether it is planned for DataGrid v9 / under consideration, or if we should look to implement a custom solution.

Thanks.

[Suprovo Mallick (DYNO) (DYNOSuprovo)]

Hi vdsb!

To give you the direct status and a production-grade path forward:

---

1. Roadmap Status

Built-in Drag and Drop (DnD) column reordering is not currently planned for the core @fluentui/react-components DataGrid package.

The Fluent UI team has intentionally kept DataGrid focused on core grid virtualization, layout, selection, and keyboard navigation while avoiding bundling an opinionated, heavyweight DnD engine into the baseline library bundle.

Because column rendering in Fluent UI v9 is purely state-driven based on the order of items in your columns array, you should look to implement a custom solution using an external headless DnD library like @dnd-kit.

---

2. Implementation Guide: Drag & Drop Column Reordering with @dnd-kit

Because DataGrid v9 dynamically renders columns in the order of the columns array, reordering columns is as simple as reordering that state array on drag end.

Here is a complete, accessible implementation using @dnd-kit/core and @dnd-kit/sortable:

Step 1: Install @dnd-kit

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

Step 2: Sortable Header Cell Wrapper

import * as React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { DataGridHeaderCell } from '@fluentui/react-components';

export const DraggableHeaderCell = ({ columnId, children }: { columnId: string; children: React.ReactNode }) => {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: columnId,
  });

  const style: React.CSSProperties = {
    transform: CSS.Translate.toString(transform),
    transition,
    opacity: isDragging ? 0.6 : 1,
    cursor: 'grab',
    userSelect: 'none',
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <DataGridHeaderCell>{children}</DataGridHeaderCell>
    </div>
  );
};

Step 3: Wire into DataGrid

import * as React from 'react';
import {
  DataGrid,
  DataGridHeader,
  DataGridRow,
  DataGridBody,
  DataGridCell,
  TableColumnDefinition,
  createTableColumn,
} from '@fluentui/react-components';
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
} from '@dnd-kit/core';
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  horizontalListSortingStrategy,
} from '@dnd-kit/sortable';
import { DraggableHeaderCell } from './DraggableHeaderCell';

interface Item {
  id: string;
  name: string;
  status: string;
  owner: string;
}

const initialColumns: TableColumnDefinition<Item>[] = [
  createTableColumn<Item>({ columnId: 'name', renderHeaderCell: () => 'Name', renderCell: (i) => i.name }),
  createTableColumn<Item>({ columnId: 'status', renderHeaderCell: () => 'Status', renderCell: (i) => i.status }),
  createTableColumn<Item>({ columnId: 'owner', renderHeaderCell: () => 'Owner', renderCell: (i) => i.owner }),
];

export const ReorderableDataGrid = ({ items }: { items: Item[] }) => {
  const [columns, setColumns] = React.useState(initialColumns);

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      setColumns((prev) => {
        const oldIndex = prev.findIndex((c) => c.columnId === active.id);
        const newIndex = prev.findIndex((c) => c.columnId === over.id);
        return arrayMove(prev, oldIndex, newIndex);
      });
    }
  };

  return (
    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
      <SortableContext items={columns.map((c) => c.columnId)} strategy={horizontalListSortingStrategy}>
        <DataGrid items={items} columns={columns} getRowId={(item) => item.id}>
          <DataGridHeader>
            <DataGridRow>
              {({ renderHeaderCell, columnId }) => (
                <DraggableHeaderCell key={columnId} columnId={columnId as string}>
                  {renderHeaderCell()}
                </DraggableHeaderCell>
              )}
            </DataGridRow>
          </DataGridHeader>
          <DataGridBody<Item>>
            {({ item, rowId }) => (
              <DataGridRow<Item> key={rowId}>
                {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
              </DataGridRow>
            )}
          </DataGridBody>
        </DataGrid>
      </SortableContext>
    </DndContext>
  );
};

Why this approach is optimal:

1. Zero Hacks: It uses the public API of Fluent UI v9; changing column order simply updates React state.
2. Keyboard Accessible: sortableKeyboardCoordinates ensures users who rely on keyboards can reorder columns using Space and Arrow keys.
3. Preserves Selection & Virtualization: Cell selection and virtualization continue functioning seamlessly.

---

If this clarifies the roadmap status and gives you a clear path forward, please feel free to mark this as the accepted answer!