feat(collections): gridJS table with pagination and column sorting#1270
Open
fhennig wants to merge 5 commits into
Open
feat(collections): gridJS table with pagination and column sorting#1270fhennig wants to merge 5 commits into
fhennig wants to merge 5 commits into
Conversation
…+ sorting) Closes #1269 - Installs gridjs and gridjs-react - Replaces the hand-rolled DaisyUI table with a GridJS <Grid> component - All four columns (ID, Name, Description, Variants) are sortable client-side - Pagination at 20 rows per page - Cells wrapped in <a> tags via gridjs h() formatter for proper link behaviour - Aliases gridjs-react to its ESM dist file in Vite config to work around Vite's CJS package scanner misidentifying the named exports - Temporarily disables excludeSystemCollections filter for testing (TODO to restore) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
… appearance - Remove rounded corners and drop shadow - Add outer left/right border to frame the table - Remove horizontal row lines, keep vertical column separators - Add zebra striping using DaisyUI theme colour - Reduce cell and header padding and font sizes - Scale sort arrow buttons to match smaller header - Tighten pagination footer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…sponsive fix - Fix ID, Name, Variants column widths using percentages (7/25/10%) - Remove manual 80-char description truncation; use CSS ellipsis on the td instead - Switch gridjs-container from inline-block to block so table squishes on narrow screens Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ter params Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
fhennig
changed the title
…ridJS role
- Restore excludeSystemCollections: true (was temporarily commented out for testing)
- Update test to use getByRole('grid') — GridJS renders <table role="grid"> for
sortable grids, so getByRole('table') no longer matches
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the collections overview UI to use GridJS for richer client-side table functionality (sorting + pagination) and adds a Vite alias workaround to ensure gridjs-react is consumed as ESM in the Astro/Vite build.
Changes:
- Replaces the DaisyUI
<table>implementation with a GridJS<Grid>configured with sorting and 20-row pagination. - Adds inline CSS overrides to restyle the Mermaid theme to better match the site’s design.
- Adds
gridjs/gridjs-reactdependencies and a Vite alias to force the ESM build ofgridjs-react.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| website/src/components/collections/overview/CollectionsOverview.tsx | Replaces hand-rolled table with GridJS, adds pagination/sorting, and applies style overrides. |
| website/src/components/collections/overview/CollectionsOverview.browser.spec.tsx | Updates the rendered-table assertion to target the GridJS output. |
| website/package.json | Adds gridjs and gridjs-react dependencies. |
| website/package-lock.json | Locks newly added GridJS dependencies. |
| website/astro.config.mjs | Adds a Vite alias to route gridjs-react imports to its ESM dist file. |
Files not reviewed (1)
- website/package-lock.json: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+75
to
+78
| <style>{` | ||
| /* Remove the mermaid theme's rounded corners and drop shadow; add outer left/right border to frame the table */ | ||
| .gridjs-wrapper, .gridjs-footer { border-radius: 0; box-shadow: none; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; } | ||
|
|
Comment on lines
+76
to
+77
| /* Remove the mermaid theme's rounded corners and drop shadow; add outer left/right border to frame the table */ | ||
| .gridjs-wrapper, .gridjs-footer { border-radius: 0; box-shadow: none; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; } |
Comment on lines
+91
to
+92
| /* Tighten up cell padding and reduce font to match the rest of the UI */ | ||
| td.gridjs-td { padding: 6px 16px; font-size: 0.875rem; } |
Comment on lines
+137
to
+139
| cell != null | ||
| ? h('span', { className: 'text-gray-500' }, cell as string) | ||
| : h('span', { className: 'text-gray-300' }, '—'), |
Comment on lines
+150
to
+152
| data={collections.map((c) => [c.id, c.name, c.description, c.variantCount])} | ||
| pagination={{ limit: 20 }} | ||
| sort={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
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 #1269
Summary
CollectionsOverview.tsxwith a GridJS<Grid>component<a>tags via GridJSh()formatter, preserving proper link behaviour (hover cursor, right-click, middle-click)gridjs-reactat its ESM dist file directly, working around Vite's CJS package scanner misidentifying the named exportsStyling
Overrides the mermaid theme via an inline
<style>block to match the site's design language:--color-base-200(theme-aware, works in dark mode)display: blockon.gridjs-containerso the table squishes on narrow screens instead of scrollingColumn widths: ID 7%, Name 25%, Variants 10%, Description takes the rest. Long descriptions are truncated with a CSS ellipsis.
Screenshot
Test plan
npm run test🤖 Generated with Claude Code