Sticky Pinning

The sticky prop pins one or more of the table's three contextual layers — toolbar (L1), column header (L2), and group header (L3 when grouping is active). The pin position is offset by the height of each preceding layer using CSS custom properties, so the layers stack naturally below your app shell's top bar.

For tables wider than the viewport, reach for fit="viewport" (see below) — it contains both axes of scroll inside the table, so the page never scrolls sideways.

Scroll the page to see the pinned layer(s). Adjust stickyOffset to simulate a fixed app-shell top bar.

The default toolbar is the SmartFilterBar. Override it with the toolbar snippet — the custom content inherits the same sticky wrapper.

<Table {items} {columns} sticky enableSmartFilter={false}>
  {#snippet toolbar()}
    <div class="flex items-center justify-between p-3">
      <h3 class="text-base font-semibold">Active employees</h3>
      <button class="...">Export CSV</button>
    </div>
  {/snippet}
</Table>

Page-relative sticky pinning and in-table horizontal scroll are mutually exclusive: a single element cannot be both a sticky-pin host and a scroll ancestor. So with sticky="header", a table wider than the viewport pushes its horizontal overflow onto the page — the whole layout scrolls sideways.

fit="viewport" resolves this by making the table its own scroll container. It is height-capped to the viewport (measured automatically — no magic max-height), the column and group headers pin to the top of the box, and the toolbar + pagination stay fixed outside the scrolling area. Only the rows scroll, horizontally and vertically.

<Table
  {items}
  {columns}
  fit="viewport"
/>

fit="viewport" supersedes sticky and stickyOffset (the measured top absorbs app-shell offsets). It is mutually exclusive with virtualized, which keeps its own virtualHeight scroll box.