Skip to content

feat(BaseTable): add column reordering feature#155

Merged
kseniya57 merged 3 commits into
mainfrom
column-reordering
Jul 6, 2026
Merged

feat(BaseTable): add column reordering feature#155
kseniya57 merged 3 commits into
mainfrom
column-reordering

Conversation

@kseniya57

Copy link
Copy Markdown
Contributor

feat(BaseTable): add column reordering

Adds drag-and-drop column reordering for BaseTable / Table via a new opt-in ColumnReorderingProvider wrapper, built on top of @dnd-kit. The feature is fully additive — nothing changes unless you wrap your table in the provider.

What's new

  • ColumnReorderingProvider — wrap <Table> / <BaseTable> to enable dragging column headers to reorder columns.
  • Pinning-aware — pinned columns can be reordered too, but only within their own group (left-pinned, right-pinned, or center). A drag never crosses a pin boundary.
  • Uncontrolled by default — with no onReorder, the provider updates the table itself (setColumnOrder for center columns, setColumnPinning within a pinned group). Pass onReorder to control/persist state yourself.
  • Drag overlay — a floating preview of the dragged column (header + first rows) follows the pointer; customizable via renderDragOverlay / dragOverlayRowCount, or return null to disable.
  • Visual feedback while dragging — the dragged column's content dims and a blue insertion line marks the drop position.
  • Edge auto-scroll — dragging near the horizontal edges auto-scrolls the nearest scroll container (toggle with autoScroll).
  • Per-column opt-outenableColumnReordering: false in a column def; grouped/placeholder columns aren't draggable.
  • activationDistance (default 8px) so header clicks (sorting, etc.) keep working.
  • Theming via CSS variables — insertion line color/width, dragged opacity, and drag-overlay background/shadow/radius.

API

  • New exports: ColumnReorderingProvider, ColumnReorderingContext, ColumnDragOverlay, and the ColumnReorderResult / provider prop types.
  • New column-def flag: enableColumnReordering?: boolean.
  • onReorder(result) returns { columnOrder, columnPinning, pinned, draggedColumnId, targetColumnId }.
<ColumnReorderingProvider
  table={table}
  onReorder={({columnOrder, columnPinning, pinned}) => {
    if (pinned) setColumnPinning(columnPinning);
    else setColumnOrder(columnOrder);
  }}
>
  <Table table={table} />
</ColumnReorderingProvider>

@kseniya57 kseniya57 requested a review from beliarh as a code owner July 1, 2026 07:42
@kseniya57 kseniya57 self-assigned this Jul 1, 2026
@gravity-ui-bot

Copy link
Copy Markdown
Contributor

Preview is ready.

@kseniya57 kseniya57 force-pushed the column-reordering branch from 69bbf19 to cb558a7 Compare July 1, 2026 07:45
Comment thread src/components/BaseDraggableHeaderCell/BaseDraggableHeaderCell.tsx Outdated
Comment thread src/components/BaseDraggableHeaderCell/BaseDraggableHeaderCell.tsx
@kseniya57 kseniya57 force-pushed the column-reordering branch from cb558a7 to 0608477 Compare July 2, 2026 07:00
@kseniya57 kseniya57 requested a review from beliarh July 2, 2026 07:03
beliarh
beliarh previously approved these changes Jul 6, 2026
@kseniya57 kseniya57 merged commit 8755177 into main Jul 6, 2026
3 checks passed
@kseniya57 kseniya57 deleted the column-reordering branch July 6, 2026 10:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants