👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Sortable Columns
Sortable data table with column headers showing sort indicators and ascending/descending order toggle functionality
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Need sortable columns in your data tables? This React table implements click-to-sort on column headers with visual indicators showing sort direction. Built with shadcn/ui Table and Lucide React icons, it displays ascending/descending arrows next to sorted columns and maintains data state with useState. The table includes user data with name, email, role, and status fields—perfect for admin panels, user directories, or any dataset where sorting by different attributes helps users find information quickly.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-sortable-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-sortable-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-sortable-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-sortable-01.jsonRelated 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