Shadcn.io is not affiliated with official shadcn/ui
React Table Block Pinned Columns
Table component with pinned left and right columns that stay fixed during horizontal scroll in React
Keep key columns visible on your Next.js dashboard with this pinned column table component. Features sticky left column for row identifiers, sticky right column for actions, horizontal scroll for middle columns, shadow indicators on pinned edges, and smooth scroll behavior. Built with shadcn/ui Table and Button components using Tailwind CSS and CSS sticky positioning. The fixed-column design maintains context during scroll—perfect for wide data grids, comparison tables, financial spreadsheets, or any React app with many columns requiring horizontal scroll.
React Table Block Pinned Columns preview
Installation
Related Components
Table with Resizable Columns
Resize pinned columns
Table with Column Visibility
Hide columns before pinning
Table with Sticky Header
Combined sticky header and columns
Table with Sortable Columns
Sort with pinned columns
Table with Row Selection
Pin selection column
Task Table with Actions
Pin actions column