fix: header sort is a no-op on first click for default-sorted columns#681
fix: header sort is a no-op on first click for default-sorted columns#681Silex wants to merge 2 commits into
Conversation
Header cells only receive their column, not the table instance, so they cannot force a full-sort replace. Add a lightweight context that exposes the table to anything rendered inside DataTable (mirrors the existing ServerPaginationProvider pattern), avoiding threading the table through ~40 DataTableHeader call sites.
Clicking a header called column.toggleSorting(), which in tanstack's normal (non-multi) mode only toggles a column in place when it is the lowest-priority entry of an existing multi-sort (existingIndex === old.length - 1) instead of replacing the sort. The peers tables default to [connected, last_seen, name], so the first click on Name only flipped its desc behind the dominant connected/last_seen sorts and appeared to do nothing until another column was clicked first. Use the table instance from context to setSorting() to a single column, forcing a replace regardless of the column's position. Falls back to the previous toggleSorting() when no provider is present.
|
|
📝 WalkthroughWalkthroughDataTable now provides its table instance through context, and DataTableHeader uses that context when applying sort changes. When no table instance is available, the existing column-toggle fallback remains. ChangesContext and sorting flow
Sequence DiagramsequenceDiagram
participant DataTable
participant DataTableInstanceProvider
participant DataTableHeader
participant useOptionalDataTable
participant TanStackTable
participant column
DataTable->>DataTableInstanceProvider: render table={table}
DataTableHeader->>DataTableHeader: handleSort()
DataTableHeader->>useOptionalDataTable: read table context
useOptionalDataTable-->>DataTableHeader: table or null
alt table present
DataTableHeader->>TanStackTable: setSorting([{ id, desc }])
else no table
DataTableHeader->>column: toggleSorting(...)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/components/table/DataTable.tsxOops! Something went wrong! :( ESLint: 9.39.3 TypeError: Converting circular structure to JSON src/components/table/DataTableContext.tsxOops! Something went wrong! :( ESLint: 9.39.3 TypeError: Converting circular structure to JSON src/components/table/DataTableHeader.tsxOops! Something went wrong! :( ESLint: 9.39.3 TypeError: Converting circular structure to JSON 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/table/DataTableContext.tsx (1)
3-3: 📐 Maintainability & Code Quality | 🔵 TrivialImport
Tablefrom@tanstack/react-tableto ensure stability with strict package managers.While
@tanstack/react-tablere-exports theTabletype, importing directly from@tanstack/table-corerelies on a transitive dependency. To prevent potential build failures with strict package managers (like pnpm) and ensure consistency with the rest of the codebase, explicitly use the@tanstack/react-tablepackage for all TanStack Table interactions in this React project.♻️ Suggested change
-import type { Table as TanStackTable } from "`@tanstack/table-core`"; +import type { Table as TanStackTable } from "`@tanstack/react-table`";🤖 Prompt for 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. In `@src/components/table/DataTableContext.tsx` at line 3, The DataTableContext import is pulling the Table type from the transitive `@tanstack/table-core` package instead of the React-facing package. Update the TanStack type import in DataTableContext to use `@tanstack/react-table` so it stays consistent with the rest of the React table code and avoids strict package manager issues; keep the Table alias usage in the context/types unchanged so any references to TanStackTable continue to work.
🤖 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.
Nitpick comments:
In `@src/components/table/DataTableContext.tsx`:
- Line 3: The DataTableContext import is pulling the Table type from the
transitive `@tanstack/table-core` package instead of the React-facing package.
Update the TanStack type import in DataTableContext to use `@tanstack/react-table`
so it stays consistent with the rest of the React table code and avoids strict
package manager issues; keep the Table alias usage in the context/types
unchanged so any references to TanStackTable continue to work.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d09ba431-f8b7-45ca-a312-a31c57428abf
📒 Files selected for processing (3)
src/components/table/DataTable.tsxsrc/components/table/DataTableContext.tsxsrc/components/table/DataTableHeader.tsx
2 participants
Summary
Clicking a column header that is part of a table's default multi-sort does
nothing on the first click. To reproduce: open a Group → Peers, then click
the Name header — the list does not reorder. Clicking Address first,
and then Name, makes Name sorting work.
Root cause
The peers tables (
MinimalPeersTable) default to a multi-sort of[connected desc, last_seen desc, name asc]. A header click callscolumn.toggleSorting(), whose non-multi branch in@tanstack/table-core8.21.3 only replaces the sort when the clicked column is not the last
entry of the current sort:
nameis the last entry, so ittoggles in place — only flipping itsdescbehind the dominant
connected/last_seensorts — and the order appearsunchanged. Any column that is the lowest-priority entry of a default sort is
affected.
Fix
(
DataTableContext) mounted byDataTable, mirroring the existingServerPaginationProviderpattern. This avoids threadingtablethroughthe ~40
DataTableHeadercall sites.DataTableHeadernow forces a single-column sort viatable.setSorting([{ id, desc }]), replacing the sort regardless of thecolumn's position. It falls back to
column.toggleSorting()when no provideris present.
This makes every column behave consistently (single-column sort on click,
which is already the de-facto behaviour for non-last columns).
Issue ticket number and link
N/A — reported internally, no public issue.
Documentation
Select exactly one:
Internal table sort-behaviour bug fix with no user-facing API or UI surface
change to document.
E2E tests
management-cloud-tag: main
reverse-proxy-tag: main
Summary by CodeRabbit
New Features
Bug Fixes