docs(floating-actions): add row-selection pattern with DataTable#747
docs(floating-actions): add row-selection pattern with DataTable#747paanSinghCoder wants to merge 11 commits intofeat/floating-actionsfrom
Conversation
Adds a new "Row selection" section in the DataTable docs showing the recommended pattern for integrating FloatingActions with TanStack row selection: - leading checkbox column wired via row.toggleSelected / getIsSelected - SelectionBar that reads useDataTable().table.getSelectedRowModel() - FloatingActions overlay with dismissible count chip (onDismiss → table.resetRowSelection) Ships a live demo (DataTableSelectionDemo) registered in the Demo scope, plus a cross-reference from the FloatingActions docs. Also adds matching horizontal padding on DataTable's toolbar so filter / display controls align with cell content. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
|
||
| export const rowSelectionDemo = { | ||
| type: 'code', | ||
| code: `<DataTableSelectionDemo />` |
There was a problem hiding this comment.
we can use codePreview prop in the demo here to show the code directly in Markdown. Example here
That way we don't need to show the codeblock in .mdx file
|
@paanSinghCoder Also the selection state should be handled internally from the DataTable. Right now the user is supposed to handle the selection model, which is not ideal. Let's think this through separately cc @ravisuhag |
…/floating-actions-datatable
…/floating-actions-datatable
…context demo - Collapse the separate ### Floating and ### Inline subsections into a single ## Variants section with a tabbed demo (matches the sidebar/ navbar/tabs pattern). - Floating tab is scoped to a 200px transform: translateZ(0) container so the bar pins to that area instead of the docs page. - Scrolling-context demo: replace 20 dummy rows with a single dashed- border placeholder (sidebar precedent), make the scroll wrapper full width, drop the inner padding/border so rows go edge to edge. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…/floating-actions-datatable
…igation in documentation
…/floating-actions-datatable # Conflicts: # apps/www/src/content/docs/components/floating-actions/index.mdx
2 participants
Summary
FloatingActionswith TanStack row selection (leading checkbox column +useDataTable()+ dismissible count chip wired totable.resetRowSelection()).DataTableSelectionDemoregistered in the Demo scope so the pattern is visible in the docs, not just copy-pasted code.FloatingActionsdocs pointing at the new section..toolbarso filter/display controls align with cell content.Test plan
/components/datatable→ scroll to "Row selection" — live demo renders, clicking checkboxes updates the "N selected" chip; dismissing clears selection./components/floating-actions→ see cross-reference at "Use with DataTable".🤖 Generated with Claude Code