Sticky Pinning

The sticky prop keeps the table's three contextual layers in view while the rows scroll past them: the toolbar (L1), the column header (L2), and the group header (L3, when grouping is active). Each pinned layer sits below the one above it, so they stack instead of overlapping. If your app shell has a fixed top bar, stickyOffset moves the whole stack down by its height.

Columns scroll with their rows; nothing pins to the left or right edge. For a table 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.

sticky takes boolean | 'toolbar' | 'header' | 'both'. Which layers that pins:

"header" takes the group header with it: it is the section marker of the same header, and a group whose name scrolls away tells the reader nothing.

<Table
  {items}
  {columns}
  sticky
/>

<Table
  {items}
  {columns}
  sticky="header"
  stickyOffset={64}
/>

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, and the whole layout scrolls sideways.

fit picks between the two models. "content", the default, is the page-relative one above. "viewport" makes the table its own scroll container: it is height-capped to the viewport (measured for you, with no max-height of your own), the column and group headers pin to the top of the box, a total summary row pins to its bottom, and the toolbar and pagination stay fixed outside the scrolling area. Only the rows scroll, horizontally and vertically.

A total summary row pins to the bottom edge of whichever scroll box the table owns — this one, or a virtualized table's virtualHeight box. A page-relative table has no bottom edge of its own, so its summary stays in the flow behind the last row. Group summary rows belong to their group and never pin.

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

fit="viewport" supersedes sticky and stickyOffset (the measured top absorbs app-shell offsets), and it has no effect on a virtualized table, which already has a scroll box of its own — virtualHeight — and pins its header and its summary against that one.