feat(data-table): sticky columns, column settings, and accessible row navigation#382
Draft
itsprade wants to merge 4 commits into
Draft
feat(data-table): sticky columns, column settings, and accessible row navigation#382itsprade wants to merge 4 commits into
itsprade wants to merge 4 commits into
Conversation
… navigation Adds three DataTable capabilities driven by the "too many columns / hard to reach the View button" feedback (platform-planning#1489): - Pinned/sticky columns via `pin: "left" | "right"` (selection auto-pins left, row-actions auto-pins right) with a scroll-aware freeze shadow. - `DataTable.ColumnSettings` popover: show/hide, drag-reorder, and pin columns by dragging between Fixed left / Scrollable / Fixed right zones. - Per-user column layout (visibility, order, pinning) persisted to localStorage via a new `tableId` option. - `rowHref` for accessible whole-row navigation (primary cell as a real <Link>), replacing per-row "View" buttons; `onClickRow` kept for non-navigation. Also: `Table.Root` gains an optional `containerRef`; docs, catalogue skill, and a demo lab page updated; changeset added. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…e dragging The insertion line was a flow element, so inserting it shifted the rows under the cursor, which recomputed the drop target on every reflow — a flicker loop. Draw the indicator as an inset box-shadow on the row instead (no reflow), and remove the inter-row gap so the end-of-section handler no longer fires as the cursor passes between rows. Empty zones get a dashed placeholder. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Hovering a column's checkbox shows "Hide column" (when visible) or "Show column" (when hidden). Adds showColumn/hideColumn i18n keys (en + ja). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds column controls and accessible row navigation to
DataTable, driven by the "too many columns / constant scroll-right to reach the View button" feedback in platform-planning#1489.pin: "left" | "right"on aColumn(requireswidth). Selection auto-pins left, row-actions auto-pins right, with a scroll-aware freeze shadow that only appears once content scrolls under the edge.DataTable.ColumnSettings— a "Columns" toolbar popover with three drop zones (Fixed left / Scrollable / Fixed right): show/hide via checkboxes, drag to reorder, and drag between zones to pin/unpin.tableIdto persist each user's visibility/order/pinning tolocalStorage(per-user preference; not URL). Omit for in-memory only.rowHref— accessible whole-row navigation. The primary cell renders as a real<Link>(keyboard/SR reachable, cmd/middle-click → new tab); the whole row is still clickable. Replaces per-row "View" buttons.onClickRowretained for non-navigation side effects.Table.Rootgains an optionalcontainerRef.Docs (
docs/components/data-table.md), the catalogue skill (list-dense-scan,components.md→ regeneratedapp-shell-patterns), a demo DataTable Lab page, tests, and aminorchangeset are included.Try it
Run
pnpm dev→ DataTable Lab in the sidebar. Scroll a table horizontally to see pinned columns + freeze shadow; open Columns to drag/pin/hide; click a row to navigate.🙋 Open question for the team (persistence)
Column layout is currently persisted to
localStoragepertableId— treated as a per-user preference, deliberately not in the URL like filters/sort/pagination. Before we commit to this, I'd like to align:localStorageto a persisted user-settings store rather than the browser?The current localStorage approach is good enough for the prototype; flagging so we pick the long-term direction intentionally.
Notes / follow-ups (not in this PR)
ColumnSettingsreorder + pin are drag-only (mouse). Deferred per discussion; visibility checkboxes remain keyboard-accessible.dashboard/ordersexample still uses a "View" button — separate cleanup.🤖 Generated with Claude Code