Svelte Renderer

The Svelte renderer brings STL support to the Svelte 4 and 5 ecosystem. It provides native Svelte components for rendering and interacting with complex tables seamlessly.

Installation

Use the stl-cli to add the Svelte components to your project.

bash
npx stl-cli add svelte

Basic Usage

Import the Table component and pass the parsed STL data as a prop.

svelte
<script>
  import Table from './components/svelte/Table.svelte'
  import { STL } from 'structured-table'

  // Example STL data
  const stlString = '#table\ncols: 2\n[body]\nHello | World\n#endtable'
  const tableData = STL.parse(stlString)
</script>

<div class="custom-container">
  <Table data={tableData} class="simple" />
</div>

Custom Action Events

The Svelte renderer supports custom actions via buttons. You can listen to the st-action event dispatched by the table component when a user interacts with a button cell.

svelte
<script>
  import Table from './components/svelte/Table.svelte'
  // ... prepare tableData

  function handleAction(event) {
    const detail = event.detail;
    console.log('Action name:', detail.action);
    console.log('Action data:', detail.data); // Optional passed arguments
  }
</script>

<Table data={tableData} on:st-action={handleAction} />