Phase 3: Data Grid Molecule

Objective

Port the core AG Grid wrapper molecule (DataGrid<T>), the SortMenuHeader internal component, and the useColumnPersistence hook into canary. Configure AG Grid native row selection to replace the vendored SelectAllHeaderComponent.

Corresponds to Wave 2 of the Porting Strategy.

Entry Criteria

Phases 1 and 2 must be complete. Verify by checking artifacts — do NOT re-run tests.

Verify before starting:

• Phase 1 shared artifacts present: ls src/types/canary/pagination.ts src/components/canary/atoms/shared/formatters.ts src/styles/canary/ag-theme-arda.css (all exist)
• Phase 2 cell atoms present — check all 7 type directories exist: ls src/components/canary/atoms/grid/ should show text/, number/, boolean/, date/, enum/, memo/, color/
• Each cell type has Display + Editor: spot-check one type, e.g., ls src/components/canary/atoms/grid/text/ shows text-cell-display.tsx, text-cell-editor.tsx, index.ts, test file, story file
• Phase 2 exit gate passed: check for npm run lint + npm run test success in the Phase 2 terminal output (do not re-run)

Tasks

T3.1 — Port useColumnPersistence

• Copy components/extras/molecules/data-grid/use-column-persistence.ts to components/canary/molecules/data-grid/use-column-persistence.ts
• Create the canary/molecules/data-grid/ directory
• AG Grid type imports remain ag-grid-community (no change needed)
• Copy and adapt any existing tests

T3.2 — Port SortMenuHeader

• Extract from vendored/arda-frontend/components/table/ArdaGrid.tsx (lines 153-257)
• Target: components/canary/molecules/data-grid/sort-menu-header.tsx
• This is an internal sub-component of DataGrid<T> — do NOT export from the barrel
• Dependencies: ag-grid-community (IHeaderParams), createPortal from react-dom
• CSS classes (.arda-sort-header, .arda-sort-header-text, .arda-sort-header-icon, .arda-sort-header-btn, .arda-sort-menu-dropdown) must be present in styles/canary/ag-theme-arda.css (ported in Phase 1)
• Create tests: verify sort state sync, dropdown open/close, sort direction application
• Create story demonstrating the sort menu interaction within a DataGrid story

T3.3 — Port DataGrid<T>

• Copy components/extras/molecules/data-grid/data-grid.tsx to components/canary/molecules/data-grid/data-grid.tsx
• Update imports:
  • PaginationData → @/types/canary/pagination
  • useColumnPersistence → ./use-column-persistence (canary local)
  • ag-theme-arda.css → @/styles/canary/ag-theme-arda.css
  • ag-grid-react and ag-grid-community — no change
• Add SortMenuHeader as defaultColDef.headerComponent (imported from ./sort-menu-header)
• Configure AG Grid native row selection (replaces vendored SelectAllHeaderComponent):

const rowSelection = useMemo(() => ({
  mode: 'multiRow' as const,
  headerCheckbox: true,
  selectAll: 'all' as const,
}), []);

const selectionColumnDef = useMemo(() => ({
  pinned: 'left' as const,
  width: 50,
  suppressHeaderMenuButton: true,
}), []);

See Appendix A: AG Grid Row Selection for rationale and reference links.

• Copy and adapt existing tests (note: the extras data-grid.test.tsx already has a localStorage mock fix applied earlier in this project)
• Copy and adapt existing stories. Critical: the Wave 2 verification requires that ALL cell atoms from Phase 2 are used in column definitions within the DataGrid stories, demonstrating rendering and editing in place in the grid.
• Create barrel: components/canary/molecules/data-grid/index.ts exporting DataGrid, DataGridRef, config types, PaginationData re-export

T3.4 — Verify Cell Atom Integration

• Create or update a DataGrid story that defines columns using every canary cell type: text, number, boolean, date, enum, memo, color
• Each column should demonstrate both display rendering and double-click-to-edit with the corresponding Editor atom
• Verify visually in Storybook that all cell types render and edit correctly within the grid

Acceptance Criteria

• components/canary/molecules/data-grid/ directory contains: data-grid.tsx, sort-menu-header.tsx, use-column-persistence.ts, index.ts, test files, story files
• SortMenuHeader renders sort indicators and portal dropdown menu
• AG Grid native rowSelection provides tri-state header checkbox and shift-click range selection
• All 7 canary cell atom types render correctly in DataGrid column definitions
• No imports from extras or vendored in any canary file
• npm run lint + npm run test pass