feat(design-system): improve table docs#41215
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
7 Skipped Deployments
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
🎭 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 |
dce13f6 to
13e086c
Compare
| | `TableHeader` | `<thead>` | | ||
| | `TableRow` | `<tr>` | | ||
|
|
||
| These components follow standard HTML semantics and best practices. For example, `TableCaption` (just like `<caption>`) should only ever contain inline elements as children, and be placed at the start of a `<table>` irrespective of visual positioning. |
There was a problem hiding this comment.
I found this quite helpful to know when doing #41217, so figured I’d add it to the docs.
There was a problem hiding this comment.
I plan to expand this in a future PR. Probably the same one where I expand upon DataTable itself.
| <Card className="w-full"> | ||
| <Table> | ||
| <TableCaption>A list of your recent invoices</TableCaption> | ||
| <TableCaption className="border-0">A list of your recent invoices</TableCaption> |
There was a problem hiding this comment.
I tried adding this to the TableCaption component itself via a has selector, but I think our Tailwind version is too old to support it. Or I otherwise couldn’t get it to work.
In other words: when there is a <tfoot>, don’t show a border. Since they are shown together visually.
This comment has been minimized.
This comment has been minimized.
# Conflicts: # apps/design-system/config/docs.ts
|
Warning Rate limit exceeded@dnywh has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 0 minutes and 26 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (3)
WalkthroughAdds six new table example components and registry entries, updates table documentation and sidebar navigation, tweaks existing table examples and docs links, and exposes two table-related exports ( Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
apps/design-system/registry/examples.ts (1)
800-816: Consider addingregistryDependenciesfortable-iconsfor consistency
table-actions,table-sort, andtable-demoall declareregistryDependencies: ['table'], buttable-iconsdoes not. If this example also relies on thetablecomponent in the registry, you may want to add the same dependency for consistency and tooling behavior.{ name: 'table-icons', type: 'components:example', - files: ['example/table-icons.tsx'], + registryDependencies: ['table'], + files: ['example/table-icons.tsx'], },Not critical, but it keeps the table examples aligned.
apps/design-system/registry/default/example/table-actions.tsx (1)
1-63: Actions column example is accessible and matches the documented patternThe Icon/Actions headers use
sr-only, the primary vs. overflow actions pattern is clear, and the icon-only button has anaria-label, which is great for screen readers. This is a solid reference snippet for action columns.If you wire this up to an actual menu later, consider adding
aria-haspopup="menu"(and related ARIA attributes) to the ellipsis button to better signal its behavior to assistive tech.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/design-system/__registry__/index.tsx(1 hunks)apps/design-system/config/docs.ts(1 hunks)apps/design-system/content/docs/accessibility.mdx(1 hunks)apps/design-system/content/docs/components/dropdown-menu.mdx(0 hunks)apps/design-system/content/docs/components/table.mdx(1 hunks)apps/design-system/content/docs/ui-patterns/tables.mdx(1 hunks)apps/design-system/registry/default/example/empty-state-zero-items-table.tsx(1 hunks)apps/design-system/registry/default/example/table-actions.tsx(1 hunks)apps/design-system/registry/default/example/table-demo.tsx(3 hunks)apps/design-system/registry/default/example/table-icons.tsx(1 hunks)apps/design-system/registry/default/example/table-sort.tsx(1 hunks)apps/design-system/registry/examples.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/design-system/content/docs/components/dropdown-menu.mdx
🧰 Additional context used
🧬 Code graph analysis (4)
apps/design-system/registry/default/example/table-icons.tsx (1)
packages/ui/index.tsx (1)
Card(13-13)
apps/design-system/registry/default/example/table-demo.tsx (2)
packages/ui/index.tsx (1)
Card(13-13)packages/ui/src/components/shadcn/ui/table.tsx (4)
Table(171-171)TableCaption(173-173)TableCell(174-174)TableFooter(175-175)
apps/design-system/registry/default/example/table-actions.tsx (1)
packages/ui/index.tsx (1)
Card(13-13)
apps/design-system/registry/default/example/table-sort.tsx (3)
packages/shared-data/index.ts (1)
products(21-21)packages/ui/index.tsx (1)
Card(13-13)packages/ui/src/components/shadcn/ui/table.tsx (1)
TableHeadSort(178-178)
⏰ 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). (2)
- GitHub Check: typecheck
- GitHub Check: test
🔇 Additional comments (10)
apps/design-system/registry/default/example/empty-state-zero-items-table.tsx (1)
9-11: LGTM! Improved header labels.The updated table headers are more concise and follow a consistent naming pattern ("Name", "Created", "Updated"). This improves the clarity of the example component.
apps/design-system/registry/default/example/table-demo.tsx (1)
67-97: Presentation tweaks to table demo look goodCaption placement, monospaced invoice IDs, and footer styling changes keep semantics intact while refining layout. No issues from a code or a11y standpoint.
apps/design-system/content/docs/components/table.mdx (1)
70-178: Expanded Table docs are coherent and aligned with component behaviorThe layout, positioning, empty-state, sortable-columns, row-icons, and actions guidance is clear and matches the component API and semantics (e.g., caption at DOM start,
caption-bottomvisually,sr-onlyheaders for icon/action columns). This should significantly improve discoverability and correct usage.apps/design-system/config/docs.ts (1)
86-90: Tables UI Pattern nav entry wired correctlyThe new
Tablesitem under UI Patterns points to/docs/ui-patterns/tablesand matches the existing navigation structure.apps/design-system/content/docs/ui-patterns/tables.mdx (1)
1-30: New Tables UI pattern doc is clear and consistentNicely distinguishes
TablevsDataTableuse cases and aligns with the component docs and navigation. Good foundation for future expansion.apps/design-system/registry/default/example/table-icons.tsx (1)
1-36: Row icons example is well-aligned with docs and accessibility guidanceGood use of an
sr-onlyheader for the icon column and subdued icon styling; the example closely matches the “Row icons” recommendations in the Table docs.apps/design-system/registry/default/example/table-sort.tsx (4)
1-12: LGTM!All necessary imports are present and correctly structured.
14-51: LGTM!The hardcoded product data is appropriate for a documentation example component.
53-61: LGTM!Type definitions are well-structured and provide good type safety for the sorting logic.
82-143: LGTM!The sorting logic is correctly implemented with proper memoization. The table rendering includes good responsive design (hiding Description on small screens) and appropriate formatting. Using
product.nameas the key is acceptable for this demo component with static data.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/design-system/content/docs/components/table.mdx (1)
45-50: Resolve column count mismatch in footer example.The footer row creates a structural mismatch: the header and body define 3 columns, but the footer row has
colSpan={3}plus an additionalTableCell, resulting in 4 logical columns. This violates HTML table semantics and could cause layout/accessibility issues.Adjust the footer to match the 3-column structure of the header and body.
<TableFooter> <TableRow> - <TableCell colSpan={3}>Total</TableCell> - <TableCell>Value</TableCell> + <TableCell colSpan={2}>Total</TableCell> + <TableCell>Value</TableCell> </TableRow> </TableFooter>Alternatively, if you intend a 4-column layout, adjust the header and body to also define 4 columns.
🧹 Nitpick comments (1)
apps/design-system/content/docs/components/table.mdx (1)
86-91: Improve sentence structure in Table Footer section.Lines 88–89 begin successive sentences with "Table Footer," which affects readability. Consider rewording one of these sentences to vary the opening.
### Table Footer Table Footer is a semantic grouping for the final rows of a table, typically used for column summaries, totals, or footnotes that relate to the data in the body of the table. - Table Footer typically contains the same child elements as a regular Table Row, such as Table Row and Table Cell. + It typically contains the same child elements as a regular Table Row, such as Table Row and Table Cell.This is a minor style improvement; the current content is accurate and clear.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/design-system/content/docs/components/table.mdx(1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/design-system/content/docs/components/table.mdx
[style] ~89-~89: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... to the data in the body of the table. Table Footer typically contains the same chil...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ 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: format
- GitHub Check: typecheck
🔇 Additional comments (2)
apps/design-system/content/docs/components/table.mdx (2)
1-26: Frontmatter and usage updates align well with the Card-wrapped pattern.The additions of the
shadcn: truesource flag and updated imports (Card, TableFooter from 'ui') properly document the opinionated nature of the component and its integration pattern.
92-180: Examples section is comprehensive and well-structured.The newly expanded examples—empty states, sortable columns, row icons, and actions—provide clear, actionable guidance with appropriate accessibility annotations (sr-only labels, semantic notes). Cross-references to related components and patterns are helpful.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/design-system/content/docs/components/table.mdx (1)
86-90: Reduce sentence repetition for readability.Three consecutive sentences at lines 86, 88, and 90 all begin with "Table Footer," which affects readability. Consider rewording the second or third sentence to vary the opening.
Example refactor:
### Table Footer - Table Footer is a semantic grouping for the final rows of a table, typically used for column summaries, totals, or footnotes that relate to the data in the body of the table. + A semantic grouping for the final rows of a table, it is typically used for column summaries, totals, or footnotes that relate to the data in the body of the table. - Table Footer typically contains the same child elements as a regular Table Row, such as Table Row and Table Cell. + It typically contains the same child elements as a regular Table Row, such as Table Row and Table Cell.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/design-system/content/docs/components/table.mdx(1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/design-system/content/docs/components/table.mdx
[style] ~89-~89: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... to the data in the body of the table. Table Footer typically contains the same chil...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ 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). (2)
- GitHub Check: test
- GitHub Check: typecheck
🔇 Additional comments (2)
apps/design-system/content/docs/components/table.mdx (2)
28-53: Column count mismatch resolved. ✅The footer example now correctly uses
colSpan={2}(resulting in 3 total columns: 2 + 1 cell), matching the header and body definitions. The previous column misalignment has been fixed.
1-188: Comprehensive documentation improvements. ✅The expanded documentation provides excellent coverage of Table component usage, semantics, and accessibility:
- Clear explanation of component purpose and structure with HTML element mappings
- Well-organized examples covering empty states, sorting, icon columns, and actions
- Strong accessibility guidance (sr-only for icon columns, empty state presentation)
- Appropriate cross-references to Data Table and Tables UI patterns
- Proper guidance on column width management and responsive behavior via ShadowScrollArea
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/design-system/content/docs/components/table.mdx (1)
86-91: Reduce repetitive sentence beginnings in Table Footer subsection.Both sentences in this subsection begin with "Table Footer", which creates awkward prose. Consider restructuring one sentence to vary the opening and improve readability.
Apply this diff to improve flow:
-### Table Footer - -Table Footer is a semantic grouping for the final rows of a table, typically used for column summaries, totals, or footnotes that relate to the data in the body of the table. - -Table Footer typically contains the same child elements as a Table Body, such as Table Row and Table Cell, and is a sibling of Table Body. +### Table Footer + +Table Footer is a semantic grouping for the final rows of a table, typically used for column summaries, totals, or footnotes that relate to the data in the body of the table. It typically contains the same child elements as a Table Body, such as Table Row and Table Cell, and is a sibling of Table Body.Alternatively, if you prefer to keep them separate:
-### Table Footer - -Table Footer is a semantic grouping for the final rows of a table, typically used for column summaries, totals, or footnotes that relate to the data in the body of the table. - -Table Footer typically contains the same child elements as a Table Body, such as Table Row and Table Cell, and is a sibling of Table Body. +### Table Footer + +Table Footer is a semantic grouping for the final rows of a table, typically used for column summaries, totals, or footnotes that relate to the data in the body of the table. + +It typically contains the same child elements as a Table Body, such as Table Row and Table Cell, and functions as a sibling to Table Body.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/design-system/content/docs/components/table.mdx(1 hunks)apps/design-system/content/docs/ui-patterns/tables.mdx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/design-system/content/docs/ui-patterns/tables.mdx
🧰 Additional context used
🪛 LanguageTool
apps/design-system/content/docs/components/table.mdx
[style] ~89-~89: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... to the data in the body of the table. Table Footer typically contains the same chil...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ 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: format
- GitHub Check: typecheck
- GitHub Check: test
🔇 Additional comments (2)
apps/design-system/content/docs/components/table.mdx (2)
28-52: Column count mismatch in footer example is now resolved.The footer example correctly defines 3 logical columns using
colSpan={2}plus one additional cell, matching the header and body structure. This addresses the prior feedback and maintains consistent column alignment across all table rows.
1-188: Documentation expansion is well-structured and comprehensive.The redesigned documentation provides clear guidance on table usage, layout, structure (with HTML mappings), accessibility concerns, and practical examples. The addition of sections on empty states, sortable columns, row icons, and actions gives developers concrete patterns to follow. The Related section appropriately directs users to Data Table for complex scenarios and the Tables UI patterns page for broader guidance.
SaxonF
left a comment
There was a problem hiding this comment.
Nice work, much improved. Approved.
In future might be nice to add some content around how to handle primary actions/links since its such a common use case e.g. database tables, functions, triggers, policies, branches etc. When a row is an object and that object has a detail page or similar, how should we approach it?
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (4)
apps/design-system/registry/default/example/table-row-link-actions.tsx (1)
25-35: Consider renaming the navigation handler for clarity.The function
handleBucketNavigationis named for buckets but used in a policies table context. For a documentation example, renaming tohandlePolicyNavigationor a generichandleRowNavigationwould be clearer.apps/design-system/registry/default/example/table-cross-link.tsx (1)
43-45: Consider addingaria-hiddenoraria-labelto the icon.Other table examples include
aria-labelon row icons. For consistency with the accessibility documentation patterns, consider either:
aria-label="trigger icon"if the icon conveys meaning, oraria-hidden={true}if purely decorative (since the column has ansr-only"Icon" header)<TableCell className="w-1"> - <DatabaseZap size={16} className="text-foreground-muted" /> + <DatabaseZap aria-hidden={true} size={16} className="text-foreground-muted" /> </TableCell>apps/design-system/registry/default/example/table-actions.tsx (1)
38-40: Consider addingaria-hiddento the decorative icon.For consistency with the accessibility documentation, consider adding
aria-hidden={true}to the User icon since the column already has ansr-only"Icon" header label.<TableCell className="w-1"> - <User size={16} className="text-foreground-muted" /> + <User aria-hidden={true} size={16} className="text-foreground-muted" /> </TableCell>apps/design-system/content/docs/components/table.mdx (1)
86-91: Minor: Consider varying sentence structure.Static analysis notes three sentences beginning with "Table Footer". Consider rewording for better flow, e.g., "This component typically contains..." or "It is a sibling of Table Body."
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/design-system/__registry__/index.tsx(2 hunks)apps/design-system/content/docs/accessibility.mdx(2 hunks)apps/design-system/content/docs/components/table.mdx(1 hunks)apps/design-system/registry/default/example/table-actions.tsx(1 hunks)apps/design-system/registry/default/example/table-cross-link.tsx(1 hunks)apps/design-system/registry/default/example/table-icons.tsx(1 hunks)apps/design-system/registry/default/example/table-row-link-actions.tsx(1 hunks)apps/design-system/registry/default/example/table-row-link.tsx(1 hunks)apps/design-system/registry/examples.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/design-system/registry/default/example/table-icons.tsx
🧰 Additional context used
🧠 Learnings (2)
📚 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/accessibility.mdxapps/design-system/content/docs/components/table.mdx
📚 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: 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.
Applied to files:
apps/design-system/__registry__/index.tsx
🧬 Code graph analysis (4)
apps/design-system/registry/default/example/table-cross-link.tsx (1)
packages/ui/index.tsx (1)
Card(13-13)
apps/design-system/registry/default/example/table-row-link.tsx (1)
packages/ui/index.tsx (1)
Card(13-13)
apps/design-system/registry/default/example/table-row-link-actions.tsx (1)
packages/ui/index.tsx (1)
Card(13-13)
apps/design-system/registry/default/example/table-actions.tsx (1)
packages/ui/index.tsx (1)
Card(13-13)
🪛 LanguageTool
apps/design-system/content/docs/components/table.mdx
[style] ~89-~89: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ... to the data in the body of the table. Table Footer typically contains the same chil...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ 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). (2)
- GitHub Check: typecheck
- GitHub Check: test
🔇 Additional comments (8)
apps/design-system/content/docs/accessibility.mdx (1)
30-52: LGTM!The documentation improvements look good:
- Link paths correctly use
components/format for this root-level doc (based on learnings from previous discussion).- Code example simplified appropriately by removing the unnecessary
<p>wrapper insideTableCell.- Added cross-reference to Table examples improves discoverability.
apps/design-system/registry/default/example/table-row-link-actions.tsx (1)
37-99: Good accessibility implementation.The component correctly implements keyboard navigation with
tabIndex,Enter/Spacekey handling, modifier key support for new tabs, and appropriatesr-onlylabels for screen readers. This aligns well with the accessibility documentation.apps/design-system/registry/default/example/table-cross-link.tsx (1)
23-91: LGTM!The cross-link pattern is well implemented with proper event handling (
preventDefaultandstopPropagation) to prevent navigation conflicts. The discrete link styling withtext-link-table-cellfollows the documented guidance.apps/design-system/registry/default/example/table-actions.tsx (1)
19-61: LGTM!The actions pattern demonstrates proper placement of primary action buttons alongside an overflow menu for secondary actions. The
aria-labelon the More actions button provides good screen reader support.apps/design-system/content/docs/components/table.mdx (1)
1-220: Comprehensive documentation expansion.The table documentation is thorough and well-organized, covering structure, semantics, accessibility patterns, and practical examples. The HTML element mapping table and the various usage patterns (icons, actions, cross-links, row navigation) provide excellent guidance for developers.
apps/design-system/registry/default/example/table-row-link.tsx (1)
35-88: LGTM!This is a well-implemented row-level navigation example that correctly demonstrates:
- Keyboard accessibility with
tabIndex,Enter/Spacehandling- Modifier key support for opening in new tabs
- Proper
aria-labelon the icon andaria-hiddenon the chevron- Screen reader-only "Go to bucket" button for assistive technology
This serves as a good reference implementation for the documented pattern.
apps/design-system/registry/examples.ts (1)
794-835: New table example registry entries look consistent and correctThe six new table example entries follow the existing pattern (name/type/registryDependencies/files), correctly declare
['table']as a dependency, and are placed coherently next totable-demo. No issues from the registry side.apps/design-system/__registry__/index.tsx (1)
1361-1437: Autogenerated table registry entries are in sync and correctly wiredThe new table-related entries use the same shape as
table-demo(lazy imports,registryDependencies: ["table"], file paths underregistry/default/example/…) and appear correctly ordered with the other table examples. Given this file is generated, the underlying config/script looks aligned with the new examples.
…ions.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…ions.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/table-row-link-actions.tsx (1)
25-35: Align naming with domain (bucket vs policy).
handleBucketNavigationandbucketIdread like a carry-over from a bucket example, while this table models policies. Renaming improves clarity, especially in docs meant as canonical patterns:-const handleBucketNavigation = ( - bucketId: string, +const handlePolicyNavigation = ( + policyId: string, event: React.MouseEvent | React.KeyboardEvent ) => { - const url = `/${bucketId}` + const url = `/${policyId}` if (event.metaKey || event.ctrlKey) { @@ - onClick={(event) => handleBucketNavigation(policy.id, event)} + onClick={(event) => handlePolicyNavigation(policy.id, event)} @@ - handleBucketNavigation(policy.id, event) + handlePolicyNavigation(policy.id, event)Not required for functionality, but helps future readers of the design docs.
Also applies to: 55-64
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/design-system/registry/default/example/table-row-link-actions.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
apps/design-system/registry/default/example/table-row-link-actions.tsx (1)
packages/ui/index.tsx (1)
Card(13-13)
⏰ 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). (2)
- GitHub Check: typecheck
- GitHub Check: test
* 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>
* 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?
What is the current behavior?
Tablecomponent is limited.What is the new behavior?
Tabledocumentation in design systemAdditional context
More documentation to come in separate PRs.
Summary by CodeRabbit
New Features
Documentation
Presentation
✏️ Tip: You can customize this high-level summary in your review settings.