shadcn.io is not affiliated with official shadcn/ui
Pinned Columns Table Block for React
A vehicle log of ten columns whose first and last stay pinned while the rest scroll under them, with a shadow that appears only when there is something to scroll under and a switch that turns the pins off.
Installation
Overview
Keep the row's name and its actions in view while a wide table scrolls, with this pinned columns table for React with Base UI. A compact header holds a Switch, "Pin first and last columns". Inside a hairline frame with a plus mark on each corner, a native table of eight vehicles has ten columns (vehicle, plate, driver, odometer, service due, fuel, depot, status, notes and actions) in a labelled, focusable region that scrolls sideways. The vehicle and the Actions column are pinned to its edges and stay in view; a soft shadow on a pinned edge appears only while there is something to scroll under it, set from the scroll position so nothing shifts. Each row has one button, "Book service for Van 12", that marks its service date and says so in a polite line. The switch lets the pins go, to compare. Under the table a line says to scroll sideways. It's built from Switch, Badge and Guides, with a CSS entrance only. For fleet logs, wide reports and any table where a row's name and actions must not scroll away.
FAQ
How do I use my own columns and rows?
Edit VEHICLES and the heads and cells in VehicleRow. The first column is a th scope="row" pinned to the start and the last a cell pinned to the end; both take the PIN_START and PIN_END classes while the switch is on. Pinned cells need an opaque background, so they carry bg-card and, under a hovered row, a solid mix of the hover tint; a see-through pinned cell would show the columns passing under it.
How does the shadow know when to show?
The scroll region sets two attributes from its scroll position: data-before once it has scrolled away from the start and data-after while there is more to scroll to, on mount, on every scroll and when the region is resized. The pinned cells draw their shadow with a pseudo-element that fades in on those attributes, so it appears only where content really is sliding underneath and no layout moves. It works the same in a right-to-left page, where the shadow is mirrored.
What does the switch do?
It removes the sticky positioning from the first and last columns, so they scroll away with the rest, and says so in the polite line. The table's width and height don't change, so you can flip it back and forth to see what the pins are worth. The switch is named for what it does and works with Space.
How does it look on a phone?
The scroll is the point: the vehicle column (112 pixels) and a 64 pixel Actions column stay pinned, and the other columns slide between them, with the hint line below. The region is focusable, so it can be scrolled with the arrow keys, and the page itself never scrolls sideways. The Actions button is an icon with a name, "Book service for Van 12", and a title.
What stays local, and how do I book for real?
Booking marks the row in local state and says "Service booked for Van 12, in this demo."; nothing is sent. Replace book with a call to your service, set the row from its result and keep the polite line. The button is a toggle (aria-pressed), so pressing it again removes the booking, and its name stays the same either way.
Related
- Pro
Sticky Header Table
Columns and pagingA sixty-row cash ledger in a fixed-height region where the column heads and the day row stay at the top while you scroll, with a Jump to menu of weeks that scrolls the region and a band that names the day at the top.
- Pro
Baseline Comparison Table
Totals and comparisonFive camera bodies compared against one you pick: every figure shows its own value and, under it, a signed difference or Same or Different against the baseline, with sticky spec names and grouped rows.
- Pro
Resizable Columns Table
Columns and pagingA translation workbench table whose column dividers are focusable separators: drag them or use the arrow keys (Shift for bigger steps, Home to reset), with minimum and maximum widths, truncated cells and a Reset widths button.
- Pro
Column Visibility Table
Columns and pagingA shipment table with a Columns popover of checkboxes: tick a column to show or drop it, one always stays on, a badge counts what is hidden, and Reset restores the default six of eight.
- Pro
Density Table
Columns and pagingA page list with a three-way density toggle (Compact, Comfortable, Spacious) that sets row height and text size together, in a fixed-height region so the block never changes height, with a line that says what the mode does.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.