feat: Tanstack Table + virtual scroll with column picker and URL state#1016
Open
gianpaj wants to merge 9 commits intoanomalyco:devfrom
Open
feat: Tanstack Table + virtual scroll with column picker and URL state#1016gianpaj wants to merge 9 commits intoanomalyco:devfrom
gianpaj wants to merge 9 commits intoanomalyco:devfrom
Conversation
Replaces imperative sort/filter/render with declarative Tanstack Table (createTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel) and virtual row rendering via Virtualizer class. Adds column picker dropdown, URL state sync (search/sort/order/cols), and keyboard shortcut Cmd+K to focus search. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…n-id to tds - Add #table-scroll-container with full-viewport scroll height - Make thead th sticky at top:0 within scroll container - Replace nth-child column selectors with data-column-id attribute selectors - Add column picker dropdown styles (.picker-group, .picker-item, etc.) - Add .provider-logo img style; remove stale .provider-cell svg rule - Add #table-loading style - Add data-column-id to each td in renderRows() Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
In vanilla JS, Virtualizer._willUpdate() must be called manually to initialize scroll element observation (frameworks call it automatically via lifecycle hooks like useLayoutEffect). Without it, scrollElement stays null, observers are never set up, and getVirtualItems() always returns an empty array. Also added /api.json route to the dev server so the client-side fetch succeeds in development mode. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Adding virtual scroll eliminates the possibility to use the search of a browser, without showing this the user. From a usability point of perspective, this is not recommended. If the number of rows is an issue, paging would be a viable solution to this problem, with the possibility to override the number of rows shown. |
Author
|
@kylhuk that's not true |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes: #977
It's so much fast now!
modes.dev-fast-tabele.mp4
Summary
@tanstack/virtual-coreWhat changed
packages/web/src/data.ts— newRowtype andflattenProviders()to convertapi.json→ flat row arraypackages/web/src/url-state.ts—parseUrlState/serializeUrlStatefor?search=&sort=&order=&cols=packages/web/src/columns.ts— 24ColumnDef<Row>definitions with safe DOM cell renderers (no innerHTML)packages/web/src/index.ts— full rewrite usingcreateTable+new Virtualizer(); only ~35 DOM rows rendered at a time regardless of dataset sizepackages/web/src/render.tsx— stripped to HTML shell (empty<thead>/<tbody>); no more server-baked rowspackages/web/src/index.css— virtual scroll container, sticky thead, column picker styles,data-column-idbased column styling (replaces fragilenth-childselectors)Test Plan
bun test)bun run buildproduces clean dist with no baked-in<tr>rows in HTML/api.jsonin browserCmd+Kfocuses search inputcols=param updates/logos/{id}.svg🤖 Generated with Claude Code