[ntucker]

Requested by Nathaniel · project thread

Motivation

Improvement. The useQuery Sorting & Filtering demo was three names in plain divs, sorted once. It did not show the point: a Query re-sorts and filters what the store already holds, so a user's choice never refetches.

Solution

• Demo: a team table (name, role, posts, joined). Click a column header to sort by it, click again to reverse. A segmented control shows All, Admins or Members. One Query over All(User) filters and sorts; the page passes the choice as useQuery args. The demo plays itself once in view (Posts, Posts again, Admins, Joined). Same shape in the Vue example.
• Design system (DesignSystem/design-system.css):
  • table: rule-free rows on the sheet, a rounded row band under the pointer, headers styled as group labels, value cells end-aligned. Infima's borders and stripes are dropped.
  • button.sort in a th: label plus an arrow; aria-sort on the th shows and turns the arrow. The arrow shares the upvote's shape.
  • buttonGroup buttons with aria-pressed="true" show the chosen segment.
  • New --ds-accent-pressed token replaces four copies of the pressed wash.
• The Scalar demo's table drops its inline style and align attributes for the shared table style and value cells.

Assumptions and validation

• yarn check:doc-examples react and vue pass (high).
• Checked in a local dev site with Playwright: desktop light and dark, iPhone 13 light and dark; sorting, filtering, and the full auto-run sequence; the Scalar demo table (high).
• Translated Scalar pages keep align until the weekly translation run, so their header cells left-align until then (medium: not checked in a browser).
• The auto-run targets header and filter text (hasText), not aria-labels; a copy edit to those labels needs the script updated (low risk, accepted to keep the demo code free of test hooks).

---

Generated by Claude Code

---

Note

Low Risk
Documentation, playground CSS, and demo fixtures only; no runtime library or API behavior changes.

Overview
Replaces the Sorting & Filtering useQuery examples (docs, agent skills, React and Vue) with an interactive team table: column-header sort (with reverse), a segmented All / Admins / Members filter, and copy that stresses Query re-sorts/filters cached data without refetching. Examples now use useSuspense plus split components (UsersTable, RoleFilter, etc.); the docs playground gets teamFixtures, sortDemo auto-run, and default tab UsersTable.

Extends the playground design system with table layout, segmented filter track, pill / button.sort / aria-sort, initials Avatar (name without src), and shared --ds-accent-pressed / --ds-raised tokens. Scalar table snippets drop inline styles and align in favor of value cells and the shared table styles; Playground README and Monaco Avatar types are updated to match.

^{Reviewed by Cursor Bugbot for commit f57b53b. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: f57b53b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-27T04:20:53.433443Z	c3011e9	New commits

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[github-actions]

Docs preview: https://docs-site-pr-4493-data-client.vercel.app

Built from f57b53b merged into master (this build). Locales: en (the merge queue builds every locale).

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2173c77ce0

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.37%. Comparing base (25dfbcc) to head (f57b53b).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4493   +/-   ##
=======================================
  Coverage   98.37%   98.37%           
=======================================
  Files         161      161           
  Lines        3080     3080           
  Branches      605      605           
=======================================
  Hits         3030     3030           
  Misses         10       10           
  Partials       40       40           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.