👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Sticky Header
Data table with sticky header that remains fixed at top while scrolling through long lists of rows
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Scrolling through 100 rows and losing context of what each column means? This React table keeps the header fixed at the top while you scroll through data. Built with shadcn/ui Table and CSS position sticky, the header stays visible no matter how far down you scroll—maintaining context for every column. Works seamlessly with sorting and other interactions—perfect for long datasets, reports, admin tables, or any interface where users need to reference column names while viewing data deep in the list.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-sticky-header-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-sticky-header-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-sticky-header-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-sticky-header-01.jsonRelated blocks you will also like
Table with Sortable Columns
Click headers to sort data
Table with Page Navigation
Paginate long data lists
Searchable Filterable Data Table
Search and filter functionality
Table with Density Toggle
Adjust row spacing modes
Table with Column Visibility
Show/hide columns dynamically
Table with Row Selection
Select rows with checkboxes