feat(core/sortable-table): add click-to-sort table columns with runtime - #5292
Draft
marcoscaceres wants to merge 4 commits into
Draft
feat(core/sortable-table): add click-to-sort table columns with runtime#5292marcoscaceres wants to merge 4 commits into
marcoscaceres wants to merge 4 commits into
Conversation
Tables with class="sortable" gain sort buttons in each <th>. Click cycles through ascending, descending, and back to the original row order. Improvements over sidvishnoi's PR #3812: - Three-state toggle (ascending → descending → reset to original order) - Proper aria-sort attribute on <th> (WCAG 1.3.1) - Numeric sort when all cells in a column parse as numbers - Correct script id (respec-sortable-table, not a copy-paste of dfn-panel) - Clicking a new column resets sort state on all other columns - 15 Jasmine tests covering bootstrap, aria, text sort, numeric sort, and reset Based on sidvishnoi's work in #3812. Closes #3483
- Use ASC/DESC constants instead of string literals (a11y safety) - Replace nested ternary with NEXT_DIR lookup - Unify sort direction toggle via dir multiplier - Decide column sort type (numeric vs text) once per sort, not per pair - Stamp original row indices before both sort and reset paths - Replace append(...rows) spread with loop (avoids argument-count limit) - Remove redundant getThLabel function (inlined) - Fix test timing: flush iframe microtasks after makeRSDoc so the runtime's document.respec.ready.then() callback completes before button assertions
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an opt-in sortable table feature to ReSpec’s core pipeline by injecting CSS plus a small runtime script when table.sortable is present, enabling click-to-sort on header columns with aria-sort updates and numeric-aware sorting.
Changes:
- Introduces
core/sortable-tableplugin to inject sortable-table CSS and a persistent runtime script. - Adds the runtime implementation for cycling sort states (ascending/descending/reset) and numeric vs text sorting.
- Adds a dedicated spec test suite for bootstrap behavior, button/ARIA behavior, and sorting outcomes.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/spec/core/sortable-table-spec.js | Adds coverage for runtime/script injection, button creation, aria-sort, and text/numeric sorting behavior. |
| src/styles/sortable-table.css.js | Adds styling for sortable header buttons and aria-sort visual states. |
| src/core/sortable-table.runtime.js | Implements the exported-spec runtime for click-to-sort behavior and DOM updates. |
| src/core/sortable-table.js | Implements the ReSpec plugin that injects the CSS and inlined runtime script only when needed. |
| profiles/w3c.js | Enables the module in the W3C profile plugin list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
parseFloat('10px') returns 10, causing mixed columns to sort
numerically. Number('10px') returns NaN, correctly falling back
to lexicographic sort. Also add radix 10 to parseInt calls.
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
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.
Closes #3483
Adds a
class="sortable"opt-in for tables. Each<th>gets a sort button (⇕/▲/▼) with aria-sort attributes. Clicking cycles through ascending, descending, and original order. Numeric columns are detected automatically and sorted by value, not lexicographically. The sort runtime is injected as a<script>so it persists in exported/saved specs.Written with AI: this change was generated by Claude. Per AI_POLICY.md.