feat(ui): TableView component aligned with React-Spectrum S2#18
Merged
Conversation
- Markup-compositional API (Root / Header / Body / Column / Row / Cell). Columns and rows register on mount via context; no data-via-props alternative. - Selection (none / single / multiple) and sort with controlled / uncontrolled lock-in. Once a consumer passes a defined value the component stays controlled for its lifetime — sort cycling (asc → desc → undefined) and other state cycles can't quietly fall back to internal state on later clicks. - 2D keyboard nav via a pure-function TableKeyboardDelegate. Row mode, cell mode (ArrowRight to enter, ArrowLeft / Esc to exit), and column-header mode (ArrowDown into the cell grid, Enter / Space to toggle sort). Page Up / Down, Home / End, typeahead all follow RAC semantics. - Column visibility and per-column filters via a chevron-anchored menu. Filter UI dispatches on filterType: text (contains), number (between), enum (in). Filter state participates in the same controlled / uncontrolled lock-in. - Linked rows render a stretched `<a>::after` over the rowheader cell, so cmd / middle / right-click context-menu and SvelteKit client-side nav all flow through a real anchor. `linkBehavior='override'` — plain click on a linked row does not toggle selection. - Loading / empty states (loading, loadingMore, renderEmptyState snippet) and onLoadMore infinite scroll via a 50 px threshold. - Live-region announcements for selection / sort / filter changes piped through the shared announcer utility. - Focus styling centralised on `<TableView.Root>` to match S2's cellFocus (2 px focus-ring inset -2, 6 px border-radius). Row leading-edge accent rendered as a real element inside the leading cell so it survives Svelte's CSS scope hashing across components. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
commit: |
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 a
TableViewcomponent with a markup-compositional API mirroring React-Spectrum S2 (<TableView.Root>/Header/Body/Column/Row/Cell).TableKeyboardDelegate: row mode, cell mode (ArrowRight to enter, ArrowLeft / Esc to exit), and column-header mode. Page Up / Down, Home / End, typeahead all follow RAC semantics.<a>::afterso cmd / middle / right-click context-menu and SvelteKit client-side nav all flow through a real anchor.onLoadMoreinfinite scroll.cellFocus(2 px focus ring, 6 px corner radius); row leading-edge accent rendered as a real element inside the leading cell so it survives Svelte's per-component CSS scope hashing.Test plan
🤖 Generated with Claude Code