Subscribe

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

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.

Usage

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>

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

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

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

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