Add column-click sorting to dataset table

[MMeteorL]

Clicking a column header cycles through ascending → descending → unsorted. The sort is client-side: TanStack Table's getSortedRowModel reorders the rows array that react-window renders, so no extra Convex queries are needed.

Implementation:

• DatasetTable: adds SortingState + getSortedRowModel; sets sortingFn "alphanumeric" on every data column so numeric strings (e.g. "42", "$1,234") sort numerically and text sorts case-insensitively.
• ColumnHeader: makes the cell content area clickable via header.column.getToggleSortingHandler(); shows ▲/▼ when sorted and a faint ⇅ hint on hover when unsorted; sets aria-sort for accessibility. The resize-handle zone is unaffected (it fires onMouseDown, not onClick).

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e09f590f-ed0a-4204-b1b8-b776360eb823

📥 Commits

Reviewing files that changed from the base of the PR and between c75ccfe and c4c07df.

📒 Files selected for processing (2)

• frontend/components/table/ColumnHeader.tsx
• frontend/components/table/DatasetTable.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• frontend/components/table/DatasetTable.tsx
• frontend/components/table/ColumnHeader.tsx

---

📝 Walkthrough

Walkthrough

This PR adds sortable columns to the dataset table. DatasetTable imports and registers TanStack sorting (getSortedRowModel, SortingState), keeps local sorting state, and supplies a numeric-aware sortingFn for data columns. ColumnHeader now derives isSorted/canSort/toggleSort from the TanStack header, applies button semantics and aria-sort, and renders a SortIndicator SVG when the column is sortable.

Sequence Diagram

sequenceDiagram
  participant User
  participant ColumnHeader
  participant DatasetTable
  participant useReactTable
  User->>ColumnHeader: click sort toggle
  ColumnHeader->>DatasetTable: invoke toggleSort / onSortingChange
  DatasetTable->>useReactTable: set sorting state / request getSortedRowModel
  useReactTable->>DatasetTable: return sorted rows
  DatasetTable->>ColumnHeader: re-render with updated aria-sort / indicator

Loading

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Add column-click sorting to dataset table' directly and clearly describes the main change: implementing column header click functionality for sorting the dataset table.
Description check	✅ Passed	The description is closely related to the changeset, explaining the sorting mechanism (client-side via TanStack Table), the user interaction (clicking column header cycles through sort states), and implementation details in both modified files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/sort-rows-by-column

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[MMeteorL]

@coderabbitai
Please try to review this PR again.

[coderabbitai]

@MMeteorL Sure! I'll kick off a full review of this PR right away.

✅ Actions performed

Full review triggered.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/components/table/ColumnHeader.tsx`:
- Around line 83-97: The header element in ColumnHeader.tsx uses role="button"
and onClick but lacks keyboard support; update the element that uses canSort,
toggleSort and isSorted to be keyboard-accessible by adding tabIndex={canSort ?
0 : undefined} and an onKeyDown handler that calls toggleSort when the user
presses Enter or Space (for Space call preventDefault() to avoid page scroll),
ensuring the handler only runs when canSort is true; keep role and aria-sort
as-is so screen readers still announce sorting state.

In `@frontend/components/table/DatasetTable.tsx`:
- Around line 48-50: The current sortingFn set to "alphanumeric" in
DatasetTable.tsx does natural-text sort which misorders formatted numeric values
like "$1,234" or "1,234.56"; replace the string name with a custom comparator
function for the column(s) that: strips currency symbols, commas/locale group
separators, parentheses for negatives, percent signs, and whitespace from cell
values, attempts to parse both values to numbers (Number/parseFloat) and
compares numerically when both parse to finite numbers, and falls back to a
locale/string comparison when parsing fails; locate the column definition that
uses sortingFn and replace it with this custom comparator to ensure formatted
numeric strings sort by numeric value.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2d62c1e6-2d00-485b-9eaa-16299bb968a9

📥 Commits

Reviewing files that changed from the base of the PR and between be82be5 and c75ccfe.

📒 Files selected for processing (2)

• frontend/components/table/ColumnHeader.tsx
• frontend/components/table/DatasetTable.tsx