Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Sortable Columns
Sortable table component with clickable column headers and direction indicators for React data displays
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Sort table data on your Next.js dashboard with this sortable column component. Features clickable column headers, ascending/descending arrow indicators, unsorted column indicator (up-down arrows), toggle sort direction on click, and localeCompare for proper alphabetical sorting. Built with shadcn/ui Table component with Lucide React icons using Tailwind CSS. The sorting-enabled design helps users find data quickly—perfect for user directories, admin panels, analytics reports, or any React app with sortable tabular data.
| Alice Johnson | [email protected] | Admin | Active |
| Bob Smith | [email protected] | User | Active |
| Carol Williams | [email protected] | Manager | Inactive |
| David Brown | [email protected] | User | Pending |
| Eve Davis | [email protected] | Admin | Active |
| Frank Miller | [email protected] | User | Inactive |
| Grace Wilson | [email protected] | Manager | Active |
| Henry Moore | [email protected] | User | Pending |
Installation
Related blocks you will also like
Task Table with Actions
Table with status badges and action buttons
Searchable Filterable Data Table
Search and filter functionality
Table with Row Selection
Row selection with checkboxes
Table with Page Navigation
Navigate through pages
Table with Quick Filters
Filter chips for categories
Table with Column Visibility
Show/hide columns