Svelte Headless Table

Unopinionated and extensible data tables for Svelte

Build and design powerful datagrid experiences while retaining 100% control over styles and markup.

Visit the documentation for code examples and API reference, and get started with the quick start guide!

Why Svelte Headless Table?

Svelte Headless Table is designed to work seamlessly with Svelte. If you love Svelte, you will love Svelte Headless Table.

• Full TypeScript support
• Compatible with SvelteKit and SSR
• Manage state with Svelte stores
• Headless and fully customizable
• Intuitive column-first declarative model
• Highly performant
• Feature-rich

All the features you could ever need

Svelte Headless Table comes with an extensive suite of plugins.

Easily extend Svelte Headless Table with complex sorting, filtering, grouping, pagination, and much more.

Plugin roadmap

• addSortBy
• addColumnFilters
• addTableFilter
• addColumnOrder
• addHiddenColumns
• addPagination
• addSubRows
• addGroupBy
• addExpandedRows
• addSelectedRows
• addResizedColumns
• addGridLayout
• addVirtualScroll

Examples

<script>
  const data = readable([
    { name: 'Ada Lovelace', age: 21 },
    { name: 'Barbara Liskov', age: 52 },
    { name: 'Richard Hamming', age: 38 },
  ]);

  const table = createTable(data);

  const columns = table.createColumns([
    table.column({
      header: 'Name',
      accessor: 'name',
    }),
    table.column({
      header: 'Age',
      accessor: 'age',
    }),
  ]);

  const {
    headerRows,
    rows,
    tableAttrs,
    tableBodyAttrs,
  } = table.createViewModel(columns);
</script>

<table {...$tableAttrs}>
  <thead>
    {#each $headerRows as headerRow (headerRow.id)}
      <Subscribe rowAttrs={headerRow.attrs()} let:rowAttrs>
        <tr {...rowAttrs}>
          {#each headerRow.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <th {...attrs}>
                <Render of={cell.render()} />
              </th>
            </Subscribe>
          {/each}
        </tr>
      </Subscribe>
    {/each}
  </thead>
  <tbody {...$tableBodyAttrs}>
    {#each $rows as row (row.id)}
      <Subscribe rowAttrs={row.attrs()} let:rowAttrs>
        <tr {...rowAttrs}>
          {#each row.cells as cell (cell.id)}
            <Subscribe attrs={cell.attrs()} let:attrs>
              <td {...attrs}>
                <Render of={cell.render()} />
              </td>
            </Subscribe>
          {/each}
        </tr>
      </Subscribe>
    {/each}
  </tbody>
</table>

For more complex examples with advanced features, visit the documentation site.

Svelte 5 ecosystem

Part of the Humanspeak family of runes-native Svelte 5 packages:

Package	Description
@humanspeak/svelte-markdown	Runtime markdown renderer for Svelte
@humanspeak/svelte-virtual-list	Virtual scrolling for Svelte
@humanspeak/svelte-motion	Framer Motion for Svelte 5
@humanspeak/svelte-headless-table — this package	Headless data tables for Svelte
@humanspeak/svelte-diff	Diff comparison for Svelte
@humanspeak/svelte-purify	HTML sanitisation for Svelte
@humanspeak/svelte-virtual-chat	Virtual chat viewport for Svelte 5
@humanspeak/memory-cache	In-memory cache for TypeScript
@humanspeak/svelte-json-view-lite	JSON tree viewer for Svelte 5
@humanspeak/svelte-scoped-props	Scoped class props for Svelte

License

MIT © Humanspeak, Inc.

Credits

Made with ❤️ by Humanspeak