Pinned Columns Table
Wide pipeline table with the name column visually pinned via sticky positioning while remaining columns scroll horizontally.
Wide pipeline table with the name column visually pinned via sticky positioning while remaining columns scroll horizontally.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Pinned Columns Table is the sales pipeline view for five active deals: Thornfield Media, Kelp Robotics, Sable Logistics, Ironvine Capital, and Wavefront Labs. The Name column is visually pinned with a sticky left-0 position, a right border, and a bg-background fill so the company name stays readable as the nine remaining columns scroll horizontally: Company, Stage, Value, Probability, Close date, Owner, Last contact, Source, and Created.
Deals are one typed array covering the full column set. The footnote confirms that the table scrolls horizontally and names why the pinned column exists, so you always know which row you are reading.
Reach for this block whenever a table has more columns than the viewport comfortably fits and one column acts as the key identifier for every row: CRM pipelines, financial ledgers, employee records with many HR fields, or infrastructure inventories. No extra libraries are needed; CSS sticky handles the pin.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the CRM deal pipeline. Other wide pinned tables:
Tip: match the pinned cell background to the row background on hover; a mismatched bg makes the seam visible and breaks the illusion of stickiness.