Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Pinned Columns
Table component with pinned left and right columns that stay fixed during horizontal scroll in React
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
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.
6 inventory items. Scroll horizontally to see pinned columns.
SKU and Actions columns stay fixed
| SKU | Product Name | Category | Supplier | Location | Qty | Reserved | Available | Min | Max | Unit Cost | Total Value | Restocked | Status | Actions |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| WH-001 | Wireless Headphones | Electronics | TechSupply Co | A-12-3 | 250 | 45 | 205 | 50 | 500 | $45.99 | $11,497.50 | 2024-01-10 | In Stock | |
| KB-002 | Mechanical Keyboard | Electronics | KeyCraft Ltd | A-15-1 | 120 | 30 | 90 | 40 | 200 | $89.99 | $10,798.80 | 2024-01-08 | In Stock | |
| MS-003 | Ergonomic Mouse | Electronics | TechSupply Co | A-12-5 | 35 | 20 | 15 | 50 | 300 | $34.99 | $1,224.65 | 2024-01-05 | Low Stock | |
| MN-004 | 27" Monitor | Electronics | DisplayPro | B-03-2 | 0 | 0 | 0 | 20 | 100 | $299.99 | $0.00 | 2023-12-20 | Out of Stock | |
| CH-005 | Office Chair | Furniture | ComfortSeating | C-08-1 | 180 | 12 | 168 | 30 | 150 | $199.99 | $35,998.20 | 2024-01-12 | Overstock | |
| DS-006 | Standing Desk | Furniture | ErgoDesk Inc | C-10-4 | 45 | 8 | 37 | 15 | 80 | $449.99 | $20,249.55 | 2024-01-09 | In Stock |
Installation
Related blocks you will also like
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
Questions you might have
React Table Block Permission Matrix
Table component with role-permission matrix showing access levels across features for React admin dashboards
React Table Block Pricing Comparison
Table component with feature comparison across pricing tiers showing checkmarks and plan highlights for React SaaS pricing pages