Sticky Header Table
A background jobs table inside a fixed height scroll viewport with the column header pinned by sticky positioning, so headers stay readable as rows scroll.
A background jobs table inside a fixed height scroll viewport with the column header pinned by sticky positioning, so headers stay readable as rows scroll.
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
Sticky Header Table is the background jobs list for the worker fleet, fourteen recent jobs with their id, queue, status, attempt count, run duration, and enqueue time. The table sits inside a fixed height scroll viewport, and the column header row stays pinned to the top as the body scrolls beneath it. Statuses cover Running, Completed, Failed, and Queued, with Failed rows carrying the destructive outline. The count line reads the recent slice against the full day of jobs.
The viewport caps the table container height and the header uses sticky positioning with an opaque background, so rows pass under it rather than over it. A bottom rule rendered as a box shadow keeps the header edge crisp while it floats above the scrolling body. The footnote notes failed jobs retry up to three times before landing in the dead letter queue.
Reach for this block on any long list you would rather scroll than paginate, where the column labels must stay readable the whole way down: job queues, event streams, or a raw record dump. Wire the rows to your list endpoint and keep the viewport height tuned to the surrounding layout.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the background jobs monitor. Other sticky header tables:
Tip: give the sticky header an opaque background and a shadow rule; a transparent header lets scrolling rows bleed through and the labels lose their edge.