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!

Svelte Headless Table has full TypeScript support and is compatible with SvelteKit!

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
• addEditable
• addRowLabel

Why Svelte Headless Table?

Svelte First

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

Headless

Beauty is subjective – everybody wants components to match their own theme! That's why Svelte Headless Table is headless by design. You are in full control of how your table looks, down to the very last component, class, and style.

Declarative

Just describe how you want your tables to behave and let Svelte Headless Table handle the rest! It is designed with full TypeScript support and an intuitive API that lets you get started immediately.

Extensible

Svelte Headless Table comes with a stable plugin system that allows you to transform and modify every step under the hood. If you want extra functionality, you can build it!

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.