1. API Reference
  2. Subscribe

API Reference


<Subscribe/> lets you subscribe to non top-level stores in the Svelte template.


<Subscribe/> is based on svelte-subscribe.

Granular stores

Svelte Headless Table is able to remain performant by using granular derived stores for each table component; this reduces the work required to update the view model when state changes. However, stores can only be subscribed to with the $ auto-subscription syntax if they are defined in the top level of the <script/> tag.

<Subscribe/> cleverly gets around this limitation by using slot props.


For every Svelte store prop that <Subscribe/> receives, it exposes a slot prop of the same name with the subscribed value.

<Subscribe age={writable(21)} let:age>
  {age} <!-- 21 -->

<Subscribe/> is most commonly used with .attrs() and .props().

  {#each headerRow.cells as cell (cell.id)}
      attrs={cell.attrs()} let:attrs
      props={cell.props()} let:props
      <th {...attrs} on:click={props.sort.toggle}>
        <Render of={cell.render()} />
        {#if props.sort.order === 'asc'}
        {:else if props.sort.order === 'desc'}