docs(design-system): Data Table and Data Grid documentation#41252
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
7 Skipped Deployments
|
|
Note Reviews pausedUse the following commands to manage reviews:
WalkthroughReplaces a legacy empty-state registry entry with three examples (data-grid-demo, data-grid-empty-state, data-table-demo), adds demo components (react-data-grid and TanStack Table), removes the old Data Table MDX and sidebar entry, updates UI-pattern docs/links, and adds Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
| }, | ||
| "dependencies": { | ||
| "@hookform/resolvers": "^3.1.1", | ||
| "@tanstack/react-table": "^8.21.3", |
There was a problem hiding this comment.
Required to show off DataTable in all its glory via examples.
🎭 Playwright Test Results
Details
Flaky testsFeatures › database.spec.ts › Database › Schema Visualizer › actions works as expected Skipped testsFeatures › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
apps/design-system/registry/default/example/data-table-demo.tsx (3)
137-137: Add error handling for clipboard operation.The clipboard write operation can fail (e.g., due to permissions or browser security). Consider handling potential errors gracefully.
Apply this diff to add error handling:
- <DropdownMenuItem onClick={() => navigator.clipboard.writeText(payment.id)}> + <DropdownMenuItem onClick={() => { + navigator.clipboard.writeText(payment.id).catch(() => { + // Optionally show a toast/notification on failure + }) + }}> Copy payment ID </DropdownMenuItem>
150-195: Consider using TanStack Table's built-in sorting.The current implementation manually handles sorting logic, but TanStack Table provides built-in sorting via
getSortedRowModeland sorting state. Using the built-in features would simplify the code and leverage the library's optimizations.Here's how you could refactor to use TanStack Table's built-in sorting:
-type ColumnSort = - | 'email:asc' - | 'email:desc' - | 'status:asc' - | 'status:desc' - | 'amount:asc' - | 'amount:desc' - export default function DataTableDemo() { - const [sort, setSort] = React.useState<ColumnSort | ''>('') + const [sorting, setSorting] = React.useState<SortingState>([]) const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]) const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({}) const [rowSelection, setRowSelection] = React.useState({}) - const handleSortChange = (column: string) => { - const [currentCol, currentOrder] = sort.split(':') as [string, 'asc' | 'desc' | ''] - if (currentCol === column) { - // Cycle through: asc -> desc -> no sort - if (currentOrder === 'asc') { - setSort(`${column}:desc` as ColumnSort) - } else { - setSort('') - } - } else { - // New column, start with asc - setSort(`${column}:asc` as ColumnSort) - } - } - - const sortedData = React.useMemo(() => { - if (!sort) return data - - const [sortCol, sortOrder] = sort.split(':') as [string, 'asc' | 'desc'] - const orderMultiplier = sortOrder === 'asc' ? 1 : -1 - - return [...data].sort((a, b) => { - if (sortCol === 'email') { - return a.email.localeCompare(b.email) * orderMultiplier - } else if (sortCol === 'status') { - return a.status.localeCompare(b.status) * orderMultiplier - } else if (sortCol === 'amount') { - return (a.amount - b.amount) * orderMultiplier - } - return 0 - }) - }, [sort]) - const table = useReactTable({ - data: sortedData, + data, columns, + onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), getPaginationRowModel: getPaginationRowModel(), getFilteredRowModel: getFilteredRowModel(), onColumnVisibilityChange: setColumnVisibility, onRowSelectionChange: setRowSelection, state: { + sorting, columnFilters, columnVisibility, rowSelection, }, })Then update the columns to include sorting configuration:
{ accessorKey: 'status', header: 'Status', enableSorting: true, cell: ({ row }) => <div className="capitalize">{row.getValue('status')}</div>, },And use TanStack's column API in the render:
- {header.isPlaceholder ? null : isSortableColumn ? ( - <TableHeadSort - column={columnId} - currentSort={sort} - onSortChange={handleSortChange} - className={columnId === 'amount' ? 'justify-end' : undefined} - > - {columnId === 'email' - ? 'Email' - : columnId === 'status' - ? 'Status' - : 'Amount'} - </TableHeadSort> - ) : ( - flexRender(header.column.columnDef.header, header.getContext()) - )} + {flexRender(header.column.columnDef.header, header.getContext())}
255-287: Hardcoded sortable columns check.The sortable columns are hardcoded at line 257. If you add or remove sortable columns, this array must be manually updated, which is error-prone.
If you adopt TanStack Table's built-in sorting (per the previous comment), this check becomes unnecessary as the library handles it. Otherwise, consider deriving this from column configuration:
// At the column definition level const sortableColumns = columns .filter(col => col.enableSorting !== false && col.accessorKey) .map(col => col.id || col.accessorKey)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
apps/design-system/__registry__/index.tsx(1 hunks)apps/design-system/config/docs.ts(0 hunks)apps/design-system/content/docs/components/data-table.mdx(0 hunks)apps/design-system/content/docs/components/table.mdx(1 hunks)apps/design-system/content/docs/ui-patterns/empty-states.mdx(1 hunks)apps/design-system/content/docs/ui-patterns/tables.mdx(1 hunks)apps/design-system/package.json(1 hunks)apps/design-system/registry/default/example/data-grid-demo.tsx(1 hunks)apps/design-system/registry/default/example/data-grid-empty-state.tsx(1 hunks)apps/design-system/registry/default/example/data-table-demo.tsx(1 hunks)apps/design-system/registry/examples.ts(1 hunks)
💤 Files with no reviewable changes (2)
- apps/design-system/config/docs.ts
- apps/design-system/content/docs/components/data-table.mdx
🧰 Additional context used
🧠 Learnings (9)
📓 Common learnings
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
📚 Learning: 2025-12-11T00:21:01.839Z
Learnt from: dnywh
Repo: supabase/supabase PR: 41215
File: apps/design-system/content/docs/accessibility.mdx:30-30
Timestamp: 2025-12-11T00:21:01.839Z
Learning: MDX link paths in apps/design-system/content/docs depend on the file's location. For root-level docs, link components as 'components/button'; for docs in subdirectories (ui-patterns/, components/), link as '../components/button'. Apply this pattern consistently to all MDX files under apps/design-system/content/docs and verify that relative links resolve correctly from each file's location.
Applied to files:
apps/design-system/content/docs/ui-patterns/empty-states.mdxapps/design-system/content/docs/ui-patterns/tables.mdxapps/design-system/content/docs/components/table.mdx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
Applied to files:
apps/design-system/content/docs/ui-patterns/tables.mdxapps/design-system/registry/default/example/data-table-demo.tsxapps/design-system/content/docs/components/table.mdxapps/design-system/registry/default/example/data-grid-demo.tsxapps/design-system/registry/examples.ts
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : For simple lists of objects, use ResourceList with ResourceListItem instead of tables
Applied to files:
apps/design-system/content/docs/ui-patterns/tables.mdxapps/design-system/registry/default/example/data-table-demo.tsxapps/design-system/content/docs/components/table.mdxapps/design-system/registry/examples.ts
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Place table search or filters on the left-hand side above the table
Applied to files:
apps/design-system/content/docs/ui-patterns/tables.mdxapps/design-system/registry/default/example/data-table-demo.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Place table-associated actions on the right-hand side above the table
Applied to files:
apps/design-system/content/docs/ui-patterns/tables.mdxapps/design-system/registry/default/example/data-table-demo.tsxapps/design-system/content/docs/components/table.mdx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Read packages/ui/index.tsx file for full list of available components before composing interfaces
Applied to files:
apps/design-system/content/docs/ui-patterns/tables.mdx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Build forms with react-hook-form + zod
Applied to files:
apps/design-system/registry/default/example/data-grid-demo.tsxapps/design-system/package.json
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use Card component to group related pieces of information
Applied to files:
apps/design-system/registry/default/example/data-grid-demo.tsxapps/design-system/registry/examples.ts
🧬 Code graph analysis (2)
apps/design-system/registry/default/example/data-table-demo.tsx (4)
apps/www/internals/generate-sitemap.mjs (1)
formatted(199-202)apps/docs/components/Navigation/Navigation.types.ts (1)
DropdownMenuItem(30-32)packages/ui/index.tsx (1)
Card(13-13)packages/ui/src/components/shadcn/ui/table.tsx (1)
TableHeadSort(183-183)
apps/design-system/registry/default/example/data-grid-demo.tsx (2)
apps/design-system/registry/default/example/data-table-demo.tsx (1)
columns(76-148)blocks/vue/registry/default/lib/utils.ts (1)
cn(5-7)
🪛 LanguageTool
apps/design-system/content/docs/ui-patterns/tables.mdx
[style] ~16-~16: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...eractive, spreadsheet-like surfaces and very large datasets. Use Table when: - You need ...
(EN_WEAK_ADJECTIVE)
[style] ~48-~48: Consider replacing this word to strengthen your wording.
Context: ...able Data Table is a pattern component and is not exposed as a Design System compo...
(AND_THAT)
[style] ~60-~60: This phrasing can be wordy, so consider using a more descriptive and concise alternative.
Context: ...="data-table-demo" peekCode wide /> As you can see from the above example, Data Table’s composi...
(AS_YOU_CAN_SEE)
[style] ~66-~66: Consider replacing this word to strengthen your wording.
Context: ... Grid Data Grid is a pattern component and is not exposed as a Design System compo...
(AND_THAT)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test (1)
- GitHub Check: typecheck
- GitHub Check: test
- GitHub Check: format
🔇 Additional comments (10)
apps/design-system/content/docs/ui-patterns/tables.mdx (2)
1-83: Documentation structure and content look good.The documentation clearly distinguishes between Table, Data Table, and Data Grid patterns with appropriate use cases. The "Future" section provides helpful context about consolidation plans. Links to external resources (TanStack Table, Shadcn, React Data Grid) are appropriately included.
45-47: Inconsistent link reference for DataGrid.Line 47 links DataGrid to
../components/data-table, but Data Table and Data Grid are distinct patterns per this documentation. The DataGrid section (line 66) references React Data Grid. Consider updating this link to point to the correct section or documentation.#### DataGrid -[DataGrid](../components/data-table) typically spans the full height and width of a container. A classic example is [Users](https://supabase.com/dashboard/project/_/auth/users), which (as it sounds) displays a list of the project's registered users. Any instance with zero results should display a more prominent empty with a clear title, description, and supporting illustration. +[DataGrid](../ui-patterns/tables#data-grid) typically spans the full height and width of a container. A classic example is [Users](https://supabase.com/dashboard/project/_/auth/users), which (as it sounds) displays a list of the project's registered users. Any instance with zero results should display a more prominent empty with a clear title, description, and supporting illustration.Note: This change should be applied to the
empty-states.mdxfile, not this file. The reference appears inapps/design-system/content/docs/ui-patterns/empty-states.mdxat line 47.⛔ Skipped due to learnings
Learnt from: dnywh Repo: supabase/supabase PR: 41215 File: apps/design-system/content/docs/accessibility.mdx:30-30 Timestamp: 2025-12-11T00:21:01.839Z Learning: In apps/design-system/content/docs/, MDX files use different relative path formats based on their location: root-level docs use `components/button` format, while subdirectory docs (ui-patterns/, components/) use `../components/button` format for linking to components.Learnt from: CR Repo: supabase/supabase PR: 0 File: .cursor/rules/studio-ui.mdc:0-0 Timestamp: 2025-12-11T02:40:11.135Z Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Cardapps/design-system/content/docs/components/table.mdx (1)
218-218: Link update is correct.The updated link to
../ui-patterns/tables#data-tablealigns with the new documentation structure that consolidates table-related guidance under the tables pattern page. Based on learnings, relative links fromcomponents/subdirectory correctly use../to navigate to sibling directories.apps/design-system/package.json (1)
21-21: Dependency addition is appropriate.The
@tanstack/react-tabledependency is correctly added to support the newdata-table-democomponent. The caret version range (^8.21.3) follows the existing pattern in this package.json.apps/design-system/registry/examples.ts (1)
1478-1491: Registry entries are well-structured.The three new entries (
data-grid-demo,data-grid-empty-state,data-table-demo) follow the established pattern for registry examples. File paths correctly reference the corresponding files inexample/.apps/design-system/registry/default/example/data-grid-empty-state.tsx (1)
6-6: Component rename is appropriate.The rename from
EmptyStateZeroItemsDataGridtoDataGridEmptyStatefollows a clearer naming convention and aligns with the new registry entry name.apps/design-system/registry/default/example/data-grid-demo.tsx (3)
23-25: Hook usage in renderCell is intentional but worth noting.The
useRowSelectionhook from react-data-grid is designed to be called withinrenderCell, which is why the eslint-disable comment is necessary. This is the documented pattern for react-data-grid selection. The comment appropriately signals this intentional deviation.
140-151: Row styling logic is well-implemented.The
rowClassfunction properly computes conditional classes for selection state, borders, and row position. The use ofcnutility ensures clean class composition. The border styling with[&>.rdg-cell]selectors provides fine-grained control over cell appearance.
1-157: Demo component is comprehensive and well-structured.The
DataGridDemocomponent effectively demonstrates:
- Row selection with checkboxes
- Column configuration with resizing
- Custom styling and class composition
- State management for selected rows
The sample data and column definitions provide a realistic example of DataGrid usage.
apps/design-system/__registry__/index.tsx (1)
2725-2757: LGTM! New registry entries follow the established pattern.The three new registry entries (
data-grid-demo,data-grid-empty-state,data-table-demo) are structured consistently with existing entries and point to the correct file paths.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/design-system/content/docs/ui-patterns/empty-states.mdx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
📚 Learning: 2025-12-11T00:21:01.839Z
Learnt from: dnywh
Repo: supabase/supabase PR: 41215
File: apps/design-system/content/docs/accessibility.mdx:30-30
Timestamp: 2025-12-11T00:21:01.839Z
Learning: MDX link paths in apps/design-system/content/docs depend on the file's location. For root-level docs, link components as 'components/button'; for docs in subdirectories (ui-patterns/, components/), link as '../components/button'. Apply this pattern consistently to all MDX files under apps/design-system/content/docs and verify that relative links resolve correctly from each file's location.
Applied to files:
apps/design-system/content/docs/ui-patterns/empty-states.mdx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
Applied to files:
apps/design-system/content/docs/ui-patterns/empty-states.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test (1)
- GitHub Check: test
- GitHub Check: typecheck
🔇 Additional comments (1)
apps/design-system/content/docs/ui-patterns/empty-states.mdx (1)
45-51: Link and ComponentPreview updates correctly address prior review feedback.The link target has been properly updated to
../ui-patterns/tables#data-grid, and the ComponentPreview name has been changed to the registereddata-grid-empty-state. Both changes align with the PR objectives and resolve the prior review comments. The relative link paths correctly resolve from the subdirectory file location.
|
@coderabbitai generate docstrings |
✅ Actions performedInitiated docstring generation; will generate only if new commits exist. |
|
Note Docstrings generation - SUCCESS |
Docstrings generation was requested by @MildTomato. * #41252 (comment) The following files were modified: * `apps/design-system/registry/default/example/data-grid-demo.tsx` * `apps/design-system/registry/default/example/data-grid-empty-state.tsx` * `apps/design-system/registry/default/example/data-table-demo.tsx`
Docstrings generation was requested by @MildTomato. * #41252 (comment) The following files were modified: * `apps/design-system/registry/default/example/data-grid-demo.tsx` * `apps/design-system/registry/default/example/data-grid-empty-state.tsx` * `apps/design-system/registry/default/example/data-table-demo.tsx` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/design-system/registry/default/example/data-table-demo.tsx (1)
310-316: Consider using a structured empty state component.The empty state currently uses two separate
<p>tags. For consistency with the design system, consider using anEmptyStatecomponent if one exists in the UI library, or at minimum wrap the messages in a container div for better semantic structure.- <TableRow> - <TableCell colSpan={columns.length}> - <p className="text-sm text-foreground">No results found</p> - <p className="text-sm text-foreground-lighter"> - Your search did not return any results - </p> - </TableCell> - </TableRow> + <TableRow> + <TableCell colSpan={columns.length}> + <div className="flex flex-col gap-1"> + <p className="text-sm text-foreground">No results found</p> + <p className="text-sm text-foreground-lighter"> + Your search did not return any results + </p> + </div> + </TableCell> + </TableRow>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/design-system/__registry__/index.tsx(1 hunks)apps/design-system/content/docs/ui-patterns/empty-states.mdx(1 hunks)apps/design-system/registry/default/example/data-grid-demo.tsx(1 hunks)apps/design-system/registry/default/example/data-grid-empty-state.tsx(2 hunks)apps/design-system/registry/default/example/data-table-demo.tsx(1 hunks)apps/design-system/registry/examples.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/design-system/registry/default/example/data-grid-demo.tsx
- apps/design-system/registry/default/example/data-grid-empty-state.tsx
- apps/design-system/registry/index.tsx
- apps/design-system/content/docs/ui-patterns/empty-states.mdx
🧰 Additional context used
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
Applied to files:
apps/design-system/registry/examples.tsapps/design-system/registry/default/example/data-table-demo.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use Card component to group related pieces of information
Applied to files:
apps/design-system/registry/examples.ts
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Read packages/ui/index.tsx file for full list of available components before composing interfaces
Applied to files:
apps/design-system/registry/examples.ts
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Place table-associated actions on the right-hand side above the table
Applied to files:
apps/design-system/registry/default/example/data-table-demo.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Place table search or filters on the left-hand side above the table
Applied to files:
apps/design-system/registry/default/example/data-table-demo.tsx
🧬 Code graph analysis (1)
apps/design-system/registry/default/example/data-table-demo.tsx (4)
apps/www/internals/generate-sitemap.mjs (1)
formatted(199-202)apps/docs/components/Navigation/Navigation.types.ts (1)
DropdownMenuItem(30-32)packages/ui/index.tsx (1)
Card(13-13)packages/ui/src/components/shadcn/ui/table.tsx (1)
TableHeadSort(183-183)
🪛 GitHub Actions: Check Code with Prettier
apps/design-system/registry/default/example/data-table-demo.tsx
[error] 1-1: Prettier formatting check failed in this file. Run 'prettier --write' to fix code style issues.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: typecheck
- GitHub Check: test
- GitHub Check: test (1)
🔇 Additional comments (9)
apps/design-system/registry/examples.ts (1)
1478-1492: LGTM! Registry entries align with PR objectives.The three new registry entries correctly replace the legacy data-grid entry and establish clear distinctions between DataGrid and DataTable examples. The
data-table-demoappropriately declares its dependency on thetablecomponent.apps/design-system/registry/default/example/data-table-demo.tsx (8)
3-36: LGTM! Imports are well-organized.The imports correctly include all necessary TanStack Table hooks, UI components, and utilities. The structure is clean and follows best practices.
38-76: LGTM! Data structure is appropriate for a demo.The hardcoded sample data and exported
Paymenttype are well-suited for demonstration purposes. Exporting the type enables reusability in documentation examples.
78-153: LGTM! Column definitions are well-implemented.The column configuration correctly implements:
- Row selection with proper accessibility labels
- Sortable columns with appropriate flags
- Currency formatting using
Intl.NumberFormat- Action dropdown with screen reader support via
sr-only
195-212: LGTM! TanStack Table configuration is correct.The
useReactTablesetup properly includes all necessary row models (core, sorted, paginated, filtered) and correctly wires state management for sorting, filtering, column visibility, and row selection.
217-249: LGTM! Control layout follows design patterns.The filter input on the left and column visibility dropdown on the right correctly align with the learned patterns for table controls.
Based on learnings: filters on the left, actions on the right.
251-321: LGTM! Table structure follows best practices.The table is properly wrapped in a
Cardcomponent and includes appropriate empty state handling. The implementation aligns with the learned pattern: "Use generic ui table components for most tables, contained within a Card."Based on learnings: tables should be contained within Cards.
323-346: LGTM! Pagination controls are well-implemented.The row selection count and pagination buttons are properly implemented with disabled states and clear UX.
169-193: TableHeadSort integration is correct, but the empty string handling is implicit.The sorting logic correctly implements the
"columnId:asc"/"columnId:desc"format expected byTableHeadSort. WhengetSortStringreturns an empty string (no active sort), the component's split on':'produces[""], which safely results inisActive = falseand displays the neutral sort indicator. However, this behavior relies on an undocumented edge case—theTableHeadSortcomponent doesn't explicitly handle empty strings, making the API contract less clear than it could be.
|
@coderabbitai ignore |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/design-system/registry/default/example/data-grid-empty-state.tsx (1)
14-21: Align row type with thephonecolumn for clearer typingThe grid defines a
phonecolumn, but the row type androwsarray only includeid,name, androwsis empty, aligning the types with the visible columns will avoid confusion and potential type warnings.You could tighten this up with something like:
- const columns: Column<{ id: string; name: string; email: string }>[] = [ + type User = { id: string; name: string; email: string; phone: string } + + const columns: Column<User>[] = [ @@ - const rows: { id: string; name: string; email: string }[] = [] + const rows: User[] = []apps/design-system/registry/default/example/data-grid-demo.tsx (2)
25-53: Consider aligning checkbox handler withonCheckedChangepatternIn this selection column,
Checkbox_Shadcn_is wired viaonClickwithstopPropagation, while elsewhere (for example indata-table-demo.tsx) it’s used withonCheckedChange. For consistency with the rest of the design system and with typical Checkbox semantics, consider routing the selection toggle throughonCheckedChangeand keepingonClickonly forstopPropagation, e.g.:- <Checkbox_Shadcn_ - checked={isRowSelected} - onClick={(e) => { - e.stopPropagation() - onRowSelectionChange({ - row, - type: 'ROW', - checked: !isRowSelected, - isShiftClick: e.shiftKey, - }) - }} - /> + <Checkbox_Shadcn_ + checked={isRowSelected} + onClick={(e) => e.stopPropagation()} + onCheckedChange={(checked) => + onRowSelectionChange({ + row, + type: 'ROW', + checked: !!checked, + // If shift-select support is important, you could extend this later + isShiftClick: false, + }) + } + />That keeps the row-selection behavior while matching the Checkbox API used in other demos.
77-165: Optional: lift staticrowsout of the component to avoid re-allocationSince
rowsis static demo data, you could define it (and optionallycolumns) outside the component. This avoids recreating the arrays on every render and makes it clearer that they’re constant example data, e.g.:-type User = { +type User = { id: string name: string email: string phone: string } +const DEMO_ROWS: User[] = [/* ... */] + export default function DataGridDemo() { const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set()) @@ - const rows: User[] = [ - // ... - ] + const rows = DEMO_ROWSNot required for correctness, but it’s a small cleanliness/perf win for a shared demo.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/design-system/registry/default/example/data-grid-demo.tsx(1 hunks)apps/design-system/registry/default/example/data-grid-empty-state.tsx(1 hunks)apps/design-system/registry/default/example/data-table-demo.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/design-system/registry/default/example/data-table-demo.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
Applied to files:
apps/design-system/registry/default/example/data-grid-demo.tsx
🧬 Code graph analysis (1)
apps/design-system/registry/default/example/data-grid-demo.tsx (2)
apps/design-system/registry/default/example/data-table-demo.tsx (1)
columns(78-153)blocks/vue/registry/default/lib/utils.ts (1)
cn(5-7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test
- GitHub Check: test (1)
- GitHub Check: typecheck
🔇 Additional comments (2)
apps/design-system/registry/default/example/data-grid-empty-state.tsx (1)
6-13: Docstring and component rename are clear and accurateThe JSDoc nicely captures the behavior of this example, and the
DataGridEmptyStatename matches the new registry entry naming. No functional concerns here.apps/design-system/registry/default/example/data-grid-demo.tsx (1)
6-22: Data grid demo structure and typing look solidThe
Usertype, hard-coded sample data, and JSDoc all line up with how the grid is configured. The component clearly demonstrates row selection and basic grid usage in a way that fits the design-system docs.
✅ Actions performedReviews paused. |
* basic differentiation * docs * data-grid examples * data-grid-demo * data-table * demo * use existing components * improvements * markup * docs * remove data table * lint * Update apps/design-system/content/docs/ui-patterns/empty-states.mdx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix ref * use TanStack sorting * grammar * dependency * 📝 Add docstrings to `dnywh/docs/data-table-data-grid` (#41255) Docstrings generation was requested by @MildTomato. * #41252 (comment) The following files were modified: * `apps/design-system/registry/default/example/data-grid-demo.tsx` * `apps/design-system/registry/default/example/data-grid-empty-state.tsx` * `apps/design-system/registry/default/example/data-table-demo.tsx` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* wip * wip * single page * new sections and polishing up * reponsive * nits * semantic titles * optimize imgs * nits * wup * hero bubbles * Update apps/www/components/Wrapped/Pages/SupabaseSelect.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: Use `amaro` for stripping types in code samples (#41229) * Fix the error for babel/preset-typescript in docs. * Unfix the version. * Try using amaro for type stripping. * Run prettier after stripping types. * Fix tests. --------- Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> * fix: Fix minor issue in the foreign key selector (#41235) Change the isPending state to isLoading. * docs: Remove empty troubleshooting fields (#41236) * Remove emoty fields * Fix lock file * chore: update self-hosted image versions (#41234) * Feature: show index advisor in table editor (#41166) * added table advisor query * updated to include table editor performance * updated JSON B * added side panel * updated query indexes to show highlights context * show index advisor in table editor * updated invalidation logic * added color updates * added query indexes * updated query performance type * updated overflow and title * put behind flag * remove gap * added on close * Update apps/studio/data/database/table-index-advisor-query.ts Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * updated styling --------- Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * fix: useFlag to update initial check of flag store (#41209) * fix flag lib * updated uneeded logic * updated logic * remove line * updated comment * fix: Hide favourites and share snippets on self-hosted variant (#41227) * Hide favorite and share actions for self-hosted version. * Rename the query on save only on platform. * Simplify useCheckOpenAiKeyQuery. * Rename with AI now depends if the OPENAI_API_KEY is set. * Minor fixes. * Fix the tests to use .skip for skipping tests. Remove extra port params. * Make the test for favourites work only on platform variant. * feat(reports): support new database report granularity FE-2221 (#41228) * handle new granularity * undo unnecessary type change * rm console log * fix: blog auto scroll post app router migration for blog (#41220) Enhance TOC highlighting and anchor scroll in blog posts Refactored useActiveAnchors hook to support smooth hash scrolling and improved TOC highlighting based on scroll position. Added options for custom selectors and offset, and updated BlogPostClient to enable scroll-to-anchor and TOC highlight functionality. * fix: remove flakiness with launch options and default timeouts (#41245) * attempt to make table editor tests less flaky * updated race conditions for table editor * updated playwright config with optimized launch options * reduce workers * updated timeouts for tests * updated config to have a global timeout of 20 seconds * updated to be visible * chore: update changelog and image versions file (#41244) * feat(design-system): improve table docs (#41215) * docs updates * docs expansion * minor docs fix * improvements * fix dependencies * docs expansion * more table examples * map over data * improve copy * Update apps/design-system/registry/default/example/table-row-link-actions.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/design-system/registry/default/example/table-row-link-actions.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fixes * fix --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore(studio): improve table presentation (#41217) * billing improvements * wrapper improvements * border fix * Nit adjustments * fixes * fix aria * fix loading * fixes * fix --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> * Save opened side bar in local storage, and init on new session (#41224) * Save opened side bar in local storage, and init on new session * Fix test * Fix * Nit * docs(design-system): Data Table and Data Grid documentation (#41252) * basic differentiation * docs * data-grid examples * data-grid-demo * data-table * demo * use existing components * improvements * markup * docs * remove data table * lint * Update apps/design-system/content/docs/ui-patterns/empty-states.mdx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix ref * use TanStack sorting * grammar * dependency * 📝 Add docstrings to `dnywh/docs/data-table-data-grid` (#41255) Docstrings generation was requested by @MildTomato. * #41252 (comment) The following files were modified: * `apps/design-system/registry/default/example/data-grid-demo.tsx` * `apps/design-system/registry/default/example/data-grid-empty-state.tsx` * `apps/design-system/registry/default/example/data-table-demo.tsx` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * docs: fix grammatical error in generate-text-embeddings guide (#41187) * docs: fix grammatical error in generate-text-embeddings guide * Update generate-text-embeddings.mdx Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> --------- Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> * chore: uniform card and panel padding-x (#41237) * docs: Fix typo in API introduction documentation (#41251) * chore(billing): regenerate api-types to include vanity subdomain entitlement (#41257) chore(billing: regenerate api-types to include vanity subdomain entitlement * Add liam to humans.txt (#41169) * docs: Add link to restoring backup to new Supabase project (#39108) Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> * feat(code-block): add word wrap functionality and controls to code bl… (#39689) * feat(code-block): add word wrap functionality and controls to code blocks * feat(code-block): enhance layout of code block with improved line number display and structure * fix h-full issue * fix Prettier issue --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> * wip * wip * single page * optimize imgs * revert * pkg * update new content * rm overflow * new data * nits * nits * og * border * fix: improve AnimatedCounter and FloatingStatBubbles/Intro components - Update AnimatedCounter to correctly reflect value changes in the DOM. - Add lifetime management for timers in FloatingStatBubbles and FloatingBoxes to prevent memory leaks. - Ensure cleanup of timers on component unmount for better resource management. * dbs * minify images * text-brand-link on light mode * fix grid * max-width on images * address comments * fixes * faster image rotation * upd og * new launch * nitsgs * last nits --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> Co-authored-by: Andrey A. <56412611+aantti@users.noreply.github.com> Co-authored-by: Ali Waseem <waseema393@gmail.com> Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Dinesh Dawonauth <dineshddawo@gmail.com> Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com> Co-authored-by: 李子衿 <160584929+hhhez@users.noreply.github.com> Co-authored-by: Kanishk Dudeja <kanishk@kanishkdudeja.com> Co-authored-by: lch-supa <liam.hogan@supabase.io> Co-authored-by: Timothy Lim <tim.lim@supabase.io> Co-authored-by: Priyanshu Thapliyal <114170980+Priyanshuthapliyal2005@users.noreply.github.com>
What kind of change does this PR introduce?
Design documentation. Resolves DEPR-270.
What is the current behavior?
We don’t reference reference
DataGridin the design system. We do referenceDataTablebut it just uses the Shadcn source. Neither of these are trueuicomponents. The difference between these two (andTable) is confusing.What is the new behavior?
DataTableandDataGridDataTablecomponent page (which wasn’t actually a component)DataTablecomponents addedSummary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.