feat: update to table v9 and redesign table landing page - #1102
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (6)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughTanStack Table is pinned to V9 beta. The landing workbench and example use V9 feature plugins and ChangesTanStack Table V9 adoption
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant User
participant TableWorkbench
participant useTable
participant table.state
participant table.FlexRender
User->>TableWorkbench: Select or navigate cells
TableWorkbench->>useTable: Update registered feature state
useTable->>table.state: Read selection and pagination state
TableWorkbench->>table.FlexRender: Render headers and cells
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tanstack-com | eb7de93 | Commit Preview URL Branch Preview URL |
Aug 04 2026, 03:52 AM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
src/routes/admin/roles.index.tsx (2)
1-1: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winMissing lint-suppression comment on two of six migrated admin tables.
Four admin route files (
audit.tsx,github-stats.tsx,logins.tsx,roles.$roleId.tsx) precede theiruseReactTablecall with// eslint-disable-next-line react-hooks/incompatible-librarybecause the aliaseduseLegacyTable as useReactTablehook shape trips this lint rule. Two files migrated to the same hook shape but did not carry over the comment:
src/routes/admin/roles.index.tsx#L386-391: add// eslint-disable-next-line react-hooks/incompatible-libraryimmediately above theconst table = useReactTable({call at line 387.src/routes/admin/users.tsx#L752-762: add// eslint-disable-next-line react-hooks/incompatible-libraryimmediately above theconst table = useReactTable({call at line 757.If lint is enforced in CI, both call sites are likely to fail lint the same way the other four files would without the comment.
🤖 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/routes/admin/roles.index.tsx` at line 1, Add the eslint-disable-next-line react-hooks/incompatible-library comment immediately above each const table = useReactTable({ call in the roles index and users admin route components, matching the suppression already used by the other migrated admin tables.
386-391: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd the missing lint-suppression comment for the legacy table hook.
Every other admin route that calls the aliased
useLegacyTable as useReactTablehook (audit.tsx, github-stats.tsx, logins.tsx, roles.$roleId.tsx) precedes the call with// eslint-disable-next-line react-hooks/incompatible-library. This file omits it before theuseReactTablecall at line 387. If the rule fires on this hook shape elsewhere, it will likely also fire here and can fail lint in CI.See the consolidated comment for the shared fix across this file and
src/routes/admin/users.tsx.🤖 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/routes/admin/roles.index.tsx` around lines 386 - 391, Add the eslint-disable-next-line react-hooks/incompatible-library suppression immediately before the useReactTable call that creates the table instance in the roles route, matching the existing legacy-table hook usage in the other admin routes.src/routes/admin/users.tsx (1)
752-762: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winAdd the missing lint-suppression comment for the legacy table hook.
This file's
useReactTablecall at line 757 lacks the// eslint-disable-next-line react-hooks/incompatible-librarycomment that precedes the same call shape in every other admin route file. See the consolidated comment for the shared fix across this file andsrc/routes/admin/roles.index.tsx.🤖 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/routes/admin/users.tsx` around lines 752 - 762, Add the `// eslint-disable-next-line react-hooks/incompatible-library` suppression immediately before the `useReactTable` call in the relevant admin users route, matching the existing pattern used by other admin routes. Do not alter the table configuration or pagination logic.
🤖 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 `@src/components/landing/TableLanding.tsx`:
- Around line 391-424: Add a focusable tabIndex to the gridRef container used as
the useHotkeys target, ensuring the grid can receive keyboard events before any
cell is clicked while preserving the existing cell-level tabIndex behavior.
In `@src/libraries/libraries.ts`:
- Around line 313-315: Update the table metadata around latestVersion,
latestBranch, and availableVersions only after verifying that the TanStack Table
v9 documentation branch exists; use the resolved branch configuration to ensure
latest and explicit versions validate correctly, and rename or remove beta so
/table/beta cannot serve unintended content.
In `@src/libraries/table.tsx`:
- Around line 69-82: Update the “Reactive by Design” description to qualify the
fine-grained rendering claim: state that unrelated table parts avoid
re-rendering when narrow selectors or isolated subscriptions are used, rather
than presenting it as the default behavior of TanStack Table React hooks. Keep
the surrounding reactivity explanation unchanged.
---
Outside diff comments:
In `@src/routes/admin/roles.index.tsx`:
- Line 1: Add the eslint-disable-next-line react-hooks/incompatible-library
comment immediately above each const table = useReactTable({ call in the roles
index and users admin route components, matching the suppression already used by
the other migrated admin tables.
- Around line 386-391: Add the eslint-disable-next-line
react-hooks/incompatible-library suppression immediately before the
useReactTable call that creates the table instance in the roles route, matching
the existing legacy-table hook usage in the other admin routes.
In `@src/routes/admin/users.tsx`:
- Around line 752-762: Add the `// eslint-disable-next-line
react-hooks/incompatible-library` suppression immediately before the
`useReactTable` call in the relevant admin users route, matching the existing
pattern used by other admin routes. Do not alter the table configuration or
pagination logic.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 09d163dc-fbfd-46cd-99ea-e700774d2a6c
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (12)
package.jsonsrc/components/landing/TableLanding.tsxsrc/components/landing/codeExamples.tssrc/libraries/libraries.tssrc/libraries/maintainers.tssrc/libraries/table.tsxsrc/routes/admin/audit.tsxsrc/routes/admin/github-stats.tsxsrc/routes/admin/logins.tsxsrc/routes/admin/roles.$roleId.tsxsrc/routes/admin/roles.index.tsxsrc/routes/admin/users.tsx
| useHotkeys( | ||
| [ | ||
| { hotkey: 'ArrowUp', callback: () => table.moveCellSelection('up') }, | ||
| { hotkey: 'ArrowDown', callback: () => table.moveCellSelection('down') }, | ||
| { hotkey: 'ArrowLeft', callback: () => table.moveCellSelection('left') }, | ||
| { | ||
| hotkey: 'ArrowRight', | ||
| callback: () => table.moveCellSelection('right'), | ||
| }, | ||
| { | ||
| hotkey: 'Shift+ArrowUp', | ||
| callback: () => table.extendCellSelection('up'), | ||
| }, | ||
| { | ||
| hotkey: 'Shift+ArrowDown', | ||
| callback: () => table.extendCellSelection('down'), | ||
| }, | ||
| { | ||
| hotkey: 'Shift+ArrowLeft', | ||
| callback: () => table.extendCellSelection('left'), | ||
| }, | ||
| { | ||
| hotkey: 'Shift+ArrowRight', | ||
| callback: () => table.extendCellSelection('right'), | ||
| }, | ||
| { hotkey: 'Mod+A', callback: () => table.selectAllCells() }, | ||
| { hotkey: 'Escape', callback: () => table.resetCellSelection(true) }, | ||
| ], | ||
| { preventDefault: true, target: gridRef }, | ||
| ) | ||
|
|
||
| const filteredRows = table.getFilteredRowModel().rows.length | ||
| const selectedRows = table.getSelectedRowModel().rows.length | ||
| const selectedCells = table.getSelectedCellCount() |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Add tabIndex to the cell-navigation target so hotkeys work before the first click.
useHotkeys scopes arrow-key, Shift+arrow, Mod+A, and Escape handling to target: gridRef (line 419). The TanStack Hotkeys documentation states: "Set tabIndex on elements used as target refs so they can receive keyboard events." The gridRef container (lines 509-514) has no tabIndex.
Individual <td> cells do get tabIndex through cell.getTabIndex(), so keydown events bubble to the target once a cell has been focused by mouse. Before any cell is focused (for example, right after the page loads), nothing inside gridRef has focus, so the arrow-key and Mod+A/Escape hotkeys will not fire until the user first clicks a cell.
⌨️ Proposed fix to make the grid focusable
<div
ref={gridRef}
aria-label="Issue table with selectable cells"
className="mt-3 overflow-x-auto rounded-lg border border-border-subtle"
role="region"
+ tabIndex={0}
>🤖 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/landing/TableLanding.tsx` around lines 391 - 424, Add a
focusable tabIndex to the gridRef container used as the useHotkeys target,
ensuring the grid can receive keyboard events before any cell is clicked while
preserving the existing cell-level tabIndex behavior.
| latestVersion: 'v9', | ||
| latestBranch: 'main', | ||
| availableVersions: ['v8', 'beta'], | ||
| availableVersions: ['v9', 'v8', 'beta'], |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
rg -n --glob '*.ts' --glob '*.tsx' \
'latestVersion|availableVersions|/table/(latest|v9|beta|v8)' .Repository: TanStack/tanstack.com
Length of output: 9583
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo "== libraries.ts table library excerpt =="
sed -n '280,340p' src/libraries/libraries.ts
echo
echo "== route files mentioning current library id around routes =="
rg -n '(^\s*id:\s*|export default|redirects|versions=|version\.routes|availableVersions|/\w+/docs|docs\.framework|table/') src/routes src/components src/libraries tests/docs-route-smoke.test.ts -g '*.ts' -g '*.tsx' | sed -n '1,220p'
echo
echo "== package references =="
rg -n '`@tanstack/table`|tanstack-table|Table' package.json README.md src -g '*.ts' -g '*.tsx' -g '*.md' | sed -n '1,200p'Repository: TanStack/tanstack.com
Length of output: 1773
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
p = Path('src/libraries/libraries.ts')
text = p.read_text()
needle = "latestVersion: 'v9'"
idx = text.find(needle)
if idx < 0:
raise SystemExit('v9 latest not found')
# Print compact context without relying on exact line count outside.
start = text.rfind('\nexport const libraries', 0, idx)
end = idx + 2000
print(text[start:end])
PYRepository: TanStack/tanstack.com
Length of output: 160
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo "== candidate route files =="
git ls-files 'src/routes/**/table*' 'src/routes/*-library*' 'src/routes/_library*' 'tests/docs-route-smoke.test.ts' | sed -n '1,120p'
echo
echo "== precise route/id/redirect searches =="
rg -n --glob '*.ts' --glob '*.tsx' \
"id: ['\"]table['\"]|\\$libraryId|\\$version|availableVersions|redirects|latestVersion|/table/(v9|beta|v8|latest)" \
src/routes tests/docs-route-smoke.test.ts | sed -n '1,260p'Repository: TanStack/tanstack.com
Length of output: 2609
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo "== library index metadata =="
sed -n '1,140p' src/routes/_library/$libraryId/index.tsx
echo
echo "== route metadata and version routing =="
sed -n '1,140p' src/routes/_library/$libraryId/$version.tsx
sed -n '1,150p' src/routes/_library/$libraryId/route.tsx
echo
echo "== smoke test routing expectations =="
sed -n '1,120p' tests/docs-route-smoke.test.ts
echo
echo "== docs cache headers version handling =="
sed -n '1,120p' src/utils/docs-cache-headers.ts
echo
echo "== redirect banner handling =="
sed -n '1,140p' src/components/RedirectVersionBanner.tsx
sed -n '1,140p' src/components/VersionSelect.tsxRepository: TanStack/tanstack.com
Length of output: 230
🏁 Script executed:
#!/usr/bin/env bash
set -euo pfile
find src/routes/_library -maxdepth 2 -type f | sort
echo "== library metadata =="
find src/routes/_library -maxdepth 2 -type f \( -name "index.tsx" -o -name "route.tsx" -o -name "\\$version.tsx" \) -print | sort | while read -r f; do
echo "--- $f"
sed -n '1,180p' "$f"
done
echo "== smoke test =="
sed -n '1,120p' tests/docs-route-smoke.test.tsRepository: TanStack/tanstack.com
Length of output: 205
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
find src/routes/_library -maxdepth 2 -type f | sort
echo "== library metadata =="
find src/routes/_library -maxdepth 2 -type f \( -name "index.tsx" -o -name "route.tsx" -o -name "\$version.tsx" \) -print | sort | while read -r f; do
echo "--- $f"
sed -n '1,180p' "$f"
done
echo "== smoke test =="
sed -n '1,120p' tests/docs-route-smoke.test.tsRepository: TanStack/tanstack.com
Length of output: 9244
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo "== docs config loader =="
rg -n --glob '*.ts' --glob '*.tsx' "docsConfigQueryOptions|docsConfigs|docsConfigsQuery" src -A30 -B10
echo
echo "== route config/build output for docs files =="
rg -n --glob 'configs.*ts' --glob '*.config.*ts' --glob '*.mts' "validateLibraryVersion|createDocsConfig|docs_configs|docsConfig" . -A20 -B10 | sed -n '1,260p'
echo
echo "== find docs config source files =="
git ls-files | rg 'docs?config|docs-config|config|docs_contents|generated|docs_configs|version' | sed -n '1,200p'Repository: TanStack/tanstack.com
Length of output: 11950
🏁 Script executed:
#!/usr/bin/env bash
set -Eu pipefail
echo "== validateLibraryVersion implementation =="
rg -n --glob '*.ts' --glob '*.tsx' "function validateLibraryVersion|export function validateLibraryVersion|const validateLibraryVersion" src -A60 -B10
echo
echo "== docs config client/fetch implementation =="
rg -n --glob '*.ts' --glob '*.tsx' "function getTanstackDocsConfig|async function getTanstackDocsConfig|getTanstackDocsConfig|getDocsConfigRequest" src -A60 -B10
echo
echo "== table docs config files/content refs =="
git ls-files | rg 'table|docs' | rg -i 'table|docs|content|config|source|src' | sed -n '1,300p'Repository: TanStack/tanstack.com
Length of output: 17655
🏁 Script executed:
#!/usr/bin/env bash
set -u pipefail
echo "== library config branch/resolution helpers =="
rg -n --glob '*.ts' --glob '*.tsx' "function getBranch|const getBranch|export function getBranch|export const getBranch" src -A80 -B10
echo
echo "== cache headers =="
sed -n '1,120p' src/utils/docs-cache-headers.ts
echo
echo "== docs redirect handling =="
rg -n --glob '*.ts' --glob '*.tsx' "getDocsRedirect|redirects|handleRedirects|availableVersions|available" src/utils docs src/components src/routes -A30 -B10 | sed -n '1,320p'Repository: TanStack/tanstack.com
Length of output: 22518
🏁 Script executed:
#!/usr/bin/env bash
set -u pipefail
echo "== remote tanstack/table branch existence for v9, beta, main =="
for branch in v9 beta main; do
branch_url="https://api.github.com/repos/TanStack/table/git/ref/refs/heads/$branch"
echo "--- $branch"
curl -fsSL "$branch_url" | jq '{ref, object_type: .object.type, sha}' || echo "missing or not JSON"
done
echo
echo "== remote docs/config.json for current branches =="
for branch in v9 beta main; do
echo "--- $branch"
curl -fsSL "https://raw.githubusercontent.com/TanStack/table/$branch/docs/config.json" | jq '{version: .version}' || { echo "missing"; curl -fsSLI "https://raw.githubusercontent.com/TanStack/table/$branch/docs/config.json"; }
doneRepository: TanStack/tanstack.com
Length of output: 565
Resolve the V9 docs branch before changing table metadata.
latestVersion now points to v9, and availableVersions includes v9 and beta, but the route model only validates latest plus explicit versions once docs/config.json is fetched for the resolved branch. Confirm that TanStack Table has a v9 docs branch and rename or drop beta so /table/beta does not become unexpected content.
🤖 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/libraries/libraries.ts` around lines 313 - 315, Update the table metadata
around latestVersion, latestBranch, and availableVersions only after verifying
that the TanStack Table v9 documentation branch exists; use the resolved branch
configuration to ensure latest and explicit versions validate correctly, and
rename or remove beta so /table/beta cannot serve unintended content.
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/landing/TableLanding.tsx (1)
368-375: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAlign the global search copy with its behavior.
globalFilterFnsearchesproject,owner, andstatus, but the input copy only says “Search projects or owners.” A user can search foractiveand receive results without the UI documenting that behavior. Include status in the label and placeholder, or removerow.original.statusfrom the search fields. (raw.githubusercontent.com)🤖 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/landing/TableLanding.tsx` around lines 368 - 375, Align the global search UI copy with globalFilterFn by including status in both the search label and placeholder, preserving the existing project, owner, and status search behavior.src/components/Navbar.tsx (1)
632-634: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winKeep
ThemeToggleavailable on mobile.
DESKTOP_NAV_CLASShidesThemeToggleoutside desktop navigation.MobileNavigationdoes not render another theme control. Mobile users therefore lose the only theme switch. Keep this control visible on mobile or add it to the mobile utility actions.🤖 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/Navbar.tsx` around lines 632 - 634, Update the Navbar rendering around ThemeToggle so it remains available on mobile; remove the desktop-only visibility constraint from DESKTOP_NAV_CLASS or render ThemeToggle through MobileNavigation’s utility actions, while preserving desktop theme-toggle behavior.
🤖 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.
Outside diff comments:
In `@src/components/landing/TableLanding.tsx`:
- Around line 368-375: Align the global search UI copy with globalFilterFn by
including status in both the search label and placeholder, preserving the
existing project, owner, and status search behavior.
In `@src/components/Navbar.tsx`:
- Around line 632-634: Update the Navbar rendering around ThemeToggle so it
remains available on mobile; remove the desktop-only visibility constraint from
DESKTOP_NAV_CLASS or render ThemeToggle through MobileNavigation’s utility
actions, while preserving desktop theme-toggle behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: e027c881-0e54-4fab-bb82-1793dad012fa
📒 Files selected for processing (3)
src/components/Footer.tsxsrc/components/Navbar.tsxsrc/components/landing/TableLanding.tsx
2 participants
Summary by CodeRabbit
New Features
Improvements