Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Basic Data Table with Checkboxes
A React data table with checkboxes and sorting using TanStack Table getSortedRowModel and shadcn/ui Checkbox for row selection
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Multi-select tables power bulk operations—checkboxes let users act on many rows at once. This React data table uses TanStack Table's getSortedRowModel with ArrowUpDown icon from Lucide React for column sorting plus Checkbox for selection with indeterminate state. Built with shadcn/ui Table components featuring data-state selected styling and selected row counter. The checkbox pattern improves efficiency—perfect for bulk deletion, batch exports, mass updates, or anywhere users need to select multiple rows for group actions reducing repetitive single-row operations.
| Category | Price | Stock | ||
|---|---|---|---|---|
Laptop | Electronics | $999.00 | 24 | |
Headphones | Audio | $199.00 | 156 | |
Keyboard | Accessories | $79.00 | 89 | |
Mouse | Accessories | $49.00 | 234 | |
Monitor | Electronics | $349.00 | 43 |
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Table with Filters
Column filtering inputs
Paginated Table
Page navigation controls
Column Visibility
Toggle column visibility
Table with Actions
Row action dropdown
Standard Checkbox
Basic checkbox component
Expandable Rows
Nested sub-row content
Questions you might have
React Data Table with Actions
A React data table with row action dropdown menus using TanStack Table and shadcn/ui DropdownMenu with MoreHorizontal trigger icon
React Data Table with Filters
A React data table with column filter inputs using TanStack Table getFilteredRowModel and shadcn/ui Input for real-time filtering