poc: Add various examples of rich tables#503
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive set of rich table examples demonstrating various interactive table features including sorting, filtering, pagination, and cell interactions. The implementation creates a dedicated section with multiple pages showcasing different table functionalities using the Amsterdam Design System components.
Key changes include:
- Creation of a new "rijke-tabellen" (rich tables) section with 7 different example pages
- Implementation of table sorting via select dropdown and column header buttons
- Addition of text filtering, pagination, and interactive cell features (links and buttons)
- Shared common components and utilities for table data management
Reviewed Changes
Copilot reviewed 17 out of 18 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/app/rijke-tabellen/layout.tsx |
Layout wrapper with theme switching and navigation |
src/app/rijke-tabellen/page.tsx |
Main index page with links to all table examples |
src/app/rijke-tabellen/sorteren-via-select/page.tsx |
Table sorting using dropdown select component |
src/app/rijke-tabellen/sorteren-via-buttons/page.tsx |
Table sorting using column header buttons |
src/app/rijke-tabellen/filteren-op-tekst/page.tsx |
Text-based table filtering functionality |
src/app/rijke-tabellen/pagineren/page.tsx |
Table pagination with page size controls |
src/app/rijke-tabellen/link-in-cel/page.tsx |
Clickable links within table cells |
src/app/rijke-tabellen/knop-in-cel/page.tsx |
Interactive buttons within table cells |
src/app/rijke-tabellen/common/ |
Shared data types, sorting logic, and reusable table components |
src/app/rijke-tabellen/overrides.css |
Custom CSS styles for table theming and interactions |
src/app/page.tsx |
Added navigation link to the rich tables section |
package.json |
Added new npm scripts and dependencies for linting |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const range = `${(page - 1) * pageSize + 1}–${Math.min(page * pageSize, ranking.length)}` | ||
|
|
||
| const paginatedRanking = ranking.slice((page - 1) * pageSize, page * pageSize) | ||
| const LinkComponent = (props: any) => <NextLink {...props} /> |
There was a problem hiding this comment.
The 'any' type should be replaced with a proper type definition. Consider using React.ComponentProps or defining a specific interface for the expected props.
| <Table.HeaderCell scope="row">{position}</Table.HeaderCell> | ||
| <Table.Cell className="ams-table__cell--align-start ams-table__cell--nowrap">{name}</Table.Cell> | ||
| <Table.Cell> | ||
| <Row gap="none"> |
There was a problem hiding this comment.
The onClick handler 'void 0' is a no-op placeholder. This should either implement actual functionality or be documented as a placeholder for demonstration purposes.
| <Row gap="none"> | |
| <Row gap="none"> | |
| {/* Placeholder: onClick handler for "Bewerken" is a no-op for demonstration purposes */} |
dlnr
left a comment
dlnr
left a comment
There was a problem hiding this comment.
I'd like to get started applying some of these rich table techniques.
There was a problem hiding this comment.
Should we apply overrides with CSS modules like suggested in the developer docs?
2 participants
No description provided.