fix: data table changes and updates

[nuthanan06]

Implementation description

• fixed minor errors in hover colouring
• column filtering (by ascending and descending)
• filter button aligns with design system
• subtabs now added into datatable design
• readme (generated by claude) on how to use the table + added to CLAUDE.md and AGENTS.md

Steps to test

1. navigate to component showcase and see the data table

What should reviewers focus on?

1. verify component aligns with design system
2. component is easy to implement from a code perspective

Checklist

Format for branch, commit, and PR title: docs/GIT.md.

• My branch name includes the Jira ticket key
• My PR name is descriptive and in imperative tense
• My PR name includes the Jira ticket key
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• My commit messages include the Jira ticket key
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
home-again	Ready	Preview, Comment	Jul 27, 2026 2:06am

[Copilot]

Pull request overview

This PR updates the shared DataTable and related UI primitives to better match the design system, adding a segmented “subtabs” control, simplifying sorting interactions, and refining hover/toolbar styling. It also documents the DataTable API/usage and improves the component gallery demo for more representative presentation.

Changes:

• Adjust hover/selected styling for table rows and ghost buttons to avoid unintended brand-tinting.
• Add SubTabs UI component and integrate optional subtabs support into DataTableToolbar (with updated DataTable types/exports).
• Redesign faceted filter menu + simplify sortable column headers, and add a comprehensive DataTable README and updated showcase/demo.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/common/components/ui/table.tsx	Updates table row hover/selected styling tokens.
frontend/common/components/ui/subtabs.tsx	Introduces segmented subtabs UI components built on Base UI Tabs.
frontend/common/components/ui/index.ts	Re-exports newly added SubTabs components.
frontend/common/components/ui/button.tsx	Updates ghost button hover tokens to avoid green tint.
frontend/common/components/data-display/index.ts	Exports new DataTable subtabs config type.
frontend/common/components/data-display/data-table/README.md	Adds usage documentation for DataTable (sorting, filters, subtabs, states, etc.).
frontend/common/components/data-display/data-table/DataTableToolbar.tsx	Adds optional subtabs rendering and refactors toolbar layout.
frontend/common/components/data-display/data-table/DataTableFacetedFilter.tsx	Updates filter dropdown UI to match design system component.
frontend/common/components/data-display/data-table/DataTableColumnHeader.tsx	Simplifies sorting UX (direct toggle) and removes dropdown/hide behavior.
frontend/common/components/data-display/data-table/DataTable.tsx	Wires subtabs prop through to toolbar; tweaks header padding and re-exports types.
frontend/CLAUDE.md	Updates internal UI “map” docs to include DataTable/SubTabs and points to the new README.
frontend/app/component-gallery/page.tsx	Improves component gallery layout and expands DataTable demo (subtabs + row click).
frontend/AGENTS.md	Same as CLAUDE.md updates for agent guidance.
backend/requirements.txt	Updates pytest-asyncio version pin.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.