feat(studio): drag-to-reorder experiment table columns with localStorage persistence [ASE-384]

[walston]

Closes #ASE-384

Screen.Recording.2026-07-08.at.10.05.20.mov

Summary

Experiment table columns had no user-controllable ordering. This adds drag-and-drop column reordering to the Experiments table, with the order persisted to localStorage per experiment group so it survives page refreshes.

TanStack's columnOrder state was already fully wired through the DataView stack (useDataViewState → useCustomReactTable → useReactTable), so the table layer needed only a DnD interaction layer on top.

What changed:

TableColumnHeader — accepts optional dragProps ({ attributes, listeners, isDragging }); renders a GripVertical handle when listeners are provided, separate from the sort button to avoid click conflicts.

TableContent — new enableColumnReordering?: boolean prop (off by default, so no other DataViews are affected). When enabled: wraps the full table in DndContext (closestCenter + restrictToHorizontalAxis), renders header cells via DraggableColumnHeader (useSortable + CSS.Translate to avoid squishing) and body cells via DragAlongCell so column data animates with the header during drag. Pinned columns are excluded from DnD.

ExperimentGroupDataView — opts in via attributes.DataViewTableContent. Uses the existing useLocalStorage hook keyed by nemo-studio:experiment-group-columns:${group.id} to seed and persist column order. Each experiment group has its own saved order.

Test plan

• Open an experiment group with multiple experiments
• Hover a non-pinned column header — grip icon (⠿) should appear
• Drag a column header left or right — column and its data cells should animate and land in the new position
• Refresh the page — column order should be restored from localStorage
• Open a different experiment group — should have its own independent column order
• Confirm the pinned Pin column (leftmost) has no drag handle and does not move
• Confirm clicking a sortable column header still sorts (drag handle and sort click are separate targets)
• Confirm Edit Columns visibility toggle still works alongside reordering

Summary by CodeRabbit

• New Features
  • Added optional drag-and-drop column reordering to data tables, including a vertical grip handle and visual drag feedback.
  • Introduced an enableColumnReordering setting to activate column reordering where supported.
  • Persisted each experiment group’s column order so the table layout is restored on return.
  • Enabled column reordering in the experiment group data view by default.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds dnd-kit column reordering to DataView tables, persists column order per experiment group, updates an internal export, and adds the needed package dependencies.

Changes

Column reordering feature

Layer / File(s)	Summary
dnd-kit dependencies web/packages/common/package.json	Adds @dnd-kit/core, @dnd-kit/modifiers, @dnd-kit/sortable, @dnd-kit/utilities; reorders peerDependencies.
Draggable column header web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx	Adds drag props, wires refs and listeners, and renders a grip button for dragging.
TableContent reordering flow web/packages/common/src/components/DataView/internal/TableContent.tsx	Adds enableColumnReordering, DnD sensors, drag-end reordering, sortable header/body rendering, and draggable header/cell wrappers.
Internal export change web/packages/common/src/components/DataView/internal/index.ts	Removes Table from the internal re-export block.
Persisted studio column order web/packages/studio/src/components/dataViews/ExperimentGroupDataView/index.tsx	Reads and writes column order with useLocalStorage, seeds useStudioDataViewState, and enables column reordering on StudioDataView.

Suggested reviewers: BrianNewsom

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: Studio experiment table column drag-reordering with localStorage persistence.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch nwalston/experiment-columns-reordering

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Suite	Lines Covered	Line Rate	Branch Rate
Unit Tests	23427/30608	76.5%	61.3%
Integration Tests	13692/29288	46.8%	19.8%

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/packages/common/src/components/DataView/internal/TableContent.tsx`:
- Around line 316-321: `DragAlongCell` is replacing the normal body-cell
rendering path and dropping width/pinning/a11y/tooltip/subrow styling for every
visible cell. Update the `TableContent` body branch that renders
`SortableContext`/`DragAlongCell` so pinned columns and any cells that need the
full `TableDataCell` behavior continue to use the existing `TableDataCell` path,
while non-pinned draggable cells receive the same `getCellStyle`, `data-pinned`,
`headers`, `title`, and subrow/shadow class handling as `TableDataCell`. Also
thread the row context and `autoCellTooltips` through this branch so the body
matches the header behavior and preserves sticky pinning and alignment.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 7e59bd1e-1542-4aa8-9955-d5f52f4baf64

📥 Commits

Reviewing files that changed from the base of the PR and between 8765450 and 9846b6e.

⛔ Files ignored due to path filters (1)

• web/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• web/packages/common/package.json
• web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx
• web/packages/common/src/components/DataView/internal/TableContent.tsx
• web/packages/common/src/components/DataView/internal/index.ts
• web/packages/studio/src/components/dataViews/ExperimentGroupDataView/index.tsx

💤 Files with no reviewable changes (1)

• web/packages/common/src/components/DataView/internal/index.ts

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

web/packages/common/src/components/DataView/internal/TableContent.tsx (2)

462-469: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Invalid CSS transition fallback.

'width transform 0.2s ease-in-out' isn't valid transition shorthand (two property tokens in one segment) — the browser ignores it, so no fallback transition applies.

🎨 Fix

-    transition: transition ?? 'width transform 0.2s ease-in-out',
+    transition: transition ?? 'transform 0.2s ease-in-out',

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/packages/common/src/components/DataView/internal/TableContent.tsx` around
lines 462 - 469, The default transition in TableContent’s cell style is invalid
because the fallback string combines two property names in one transition
segment, so it gets ignored by the browser. Update the style object in the
TableContent cell rendering logic to use a valid CSS transition fallback,
keeping the existing transition ?? fallback behavior but with a proper shorthand
value that animates both width and transform correctly.

---

160-194: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Filter pinned ids out of SortableContext. Pinned headers/cells render without useSortable, so items no longer matches the mounted sortable nodes. Apply the same filter in the body branch too.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/packages/common/src/components/DataView/internal/TableContent.tsx` around
lines 160 - 194, Filter pinned columns out of the SortableContext items in
TableContent so the context only includes headers/cells that actually mount
DraggableColumnHeader/useSortable. Update the header rendering branch where
SortableContext consumes columnOrder, and apply the same pinned-id filtering in
the body branch as well so the sortable item list stays aligned with mounted
draggable nodes.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@web/packages/common/src/components/DataView/internal/TableContent.tsx`:
- Around line 120-124: Add sortable keyboard support in the sensors setup inside
TableContent by updating the KeyboardSensor configuration to use
sortableKeyboardCoordinates as its coordinateGetter, and import
sortableKeyboardCoordinates from `@dnd-kit/sortable`. Keep the change localized to
the useSensors/useSensor block so keyboard-based column reordering works
correctly.

---

Outside diff comments:
In `@web/packages/common/src/components/DataView/internal/TableContent.tsx`:
- Around line 462-469: The default transition in TableContent’s cell style is
invalid because the fallback string combines two property names in one
transition segment, so it gets ignored by the browser. Update the style object
in the TableContent cell rendering logic to use a valid CSS transition fallback,
keeping the existing transition ?? fallback behavior but with a proper shorthand
value that animates both width and transform correctly.
- Around line 160-194: Filter pinned columns out of the SortableContext items in
TableContent so the context only includes headers/cells that actually mount
DraggableColumnHeader/useSortable. Update the header rendering branch where
SortableContext consumes columnOrder, and apply the same pinned-id filtering in
the body branch as well so the sortable item list stays aligned with mounted
draggable nodes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: e78faf02-12ed-4a91-999f-1e4ba68d7e0b

📥 Commits

Reviewing files that changed from the base of the PR and between ecd08b7 and 635f9ca.

📒 Files selected for processing (2)

• web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx
• web/packages/common/src/components/DataView/internal/TableContent.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx (2)

43-69: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Move dnd-kit attributes onto the grip button. dragProps.attributes needs to live on the same node as dragProps.listeners; putting it on <th> adds a stray tab stop/role to the header cell and leaves the actual handle without dnd-kit’s a11y props. Thread setActivatorNodeRef through and attach it to the button too.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx`
around lines 43 - 69, The drag-and-drop accessibility props are attached to the
wrong element in TableColumnHeader, leaving the grip button without dnd-kit
semantics and adding unwanted behavior to the header cell. Move
dragProps.attributes from the <th> onto the same button that already receives
dragProps.listeners, and also wire dragProps.setActivatorNodeRef to that button
alongside the existing drag handle setup. Keep the table header itself limited
to layout/column props and use the grip button as the sole drag activator.

---

13-32: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use DraggableSyntheticListeners for dragProps.listeners. Record<string, unknown> is too broad for the <button {...dragProps.listeners} /> spread and doesn’t match dnd-kit’s listener type.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx`
around lines 13 - 32, Update TableColumnHeader’s DragProps so
dragProps.listeners uses dnd-kit’s DraggableSyntheticListeners instead of
Record<string, unknown>, and keep the button spread in TableColumnHeader
type-safe. Locate the DragProps interface and the TableColumnHeader component,
then adjust the listener prop type to match what dnd-kit provides so <button
{...dragProps.listeners} /> is correctly typed.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx`:
- Around line 43-69: The drag-and-drop accessibility props are attached to the
wrong element in TableColumnHeader, leaving the grip button without dnd-kit
semantics and adding unwanted behavior to the header cell. Move
dragProps.attributes from the <th> onto the same button that already receives
dragProps.listeners, and also wire dragProps.setActivatorNodeRef to that button
alongside the existing drag handle setup. Keep the table header itself limited
to layout/column props and use the grip button as the sole drag activator.
- Around line 13-32: Update TableColumnHeader’s DragProps so dragProps.listeners
uses dnd-kit’s DraggableSyntheticListeners instead of Record<string, unknown>,
and keep the button spread in TableColumnHeader type-safe. Locate the DragProps
interface and the TableColumnHeader component, then adjust the listener prop
type to match what dnd-kit provides so <button {...dragProps.listeners} /> is
correctly typed.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: a9b35e05-862c-446c-aa42-d12ce9ef7f53

📥 Commits

Reviewing files that changed from the base of the PR and between 635f9ca and fc54d1b.

📒 Files selected for processing (2)

• web/packages/common/src/components/DataView/internal/TableColumnHeader.tsx
• web/packages/common/src/components/DataView/internal/TableContent.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• web/packages/common/src/components/DataView/internal/TableContent.tsx