Skip to content

docs(floating-actions): add row-selection pattern with DataTable#747

Open
paanSinghCoder wants to merge 1 commit intofeat/floating-actionsfrom
docs/floating-actions-datatable
Open

docs(floating-actions): add row-selection pattern with DataTable#747
paanSinghCoder wants to merge 1 commit intofeat/floating-actionsfrom
docs/floating-actions-datatable

Conversation

@paanSinghCoder
Copy link
Copy Markdown
Contributor

@paanSinghCoder paanSinghCoder commented Apr 21, 2026 •
edited
Loading

Screenshot 2026-04-21 at 9 13 53 AM

Summary

  • Adds a "Row selection" section to DataTable docs showing how to integrate FloatingActions with TanStack row selection (leading checkbox column + useDataTable() + dismissible count chip wired to table.resetRowSelection()).
  • Ships a live DataTableSelectionDemo registered in the Demo scope so the pattern is visible in the docs, not just copy-pasted code.
  • Cross-reference added in the FloatingActions docs pointing at the new section.
  • Small DataTable fix: horizontal padding on .toolbar so filter/display controls align with cell content.

Test plan

  • Visit /components/datatable → scroll to "Row selection" — live demo renders, clicking checkboxes updates the "N selected" chip; dismissing clears selection.
  • Visit /components/floating-actions → see cross-reference at "Use with DataTable".
  • Confirm toolbar padding shift looks fine across other DataTable demos.

🤖 Generated with Claude Code

@paanSinghCoder @claude
docs(floating-actions): add row-selection pattern with DataTable
fe75605 
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>
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 21, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
apsara Ready Ready Preview, Comment Apr 21, 2026 3:38am

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 21, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 04077342-0950-4060-9c47-799a67c37c8e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@paanSinghCoder paanSinghCoder self-assigned this Apr 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rohanchkrabrty rohanchkrabrty Awaiting requested review from rohanchkrabrty

Assignees

@paanSinghCoder paanSinghCoder

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@paanSinghCoder