https://github.com/humanspeak/svelte-headless-table
A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opinions.
https://github.com/humanspeak/svelte-headless-table
column-sorting customizable datagrid datatable expanding filtering grouping headless ordering pagination plugin row-selection sorting svelte sveltekit table table-component typescript
Last synced: 8 days ago
JSON representation
A powerful, headless table library for Svelte that provides complete control over table UI while handling complex data operations like sorting, filtering, pagination, grouping, and row expansion. Build custom, accessible data tables with zero styling opinions.
- Host: GitHub
- URL: https://github.com/humanspeak/svelte-headless-table
- Owner: humanspeak
- License: mit
- Created: 2024-11-10T21:26:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-18T10:55:35.000Z (about 1 year ago)
- Last Synced: 2025-06-10T00:37:43.813Z (12 months ago)
- Topics: column-sorting, customizable, datagrid, datatable, expanding, filtering, grouping, headless, ordering, pagination, plugin, row-selection, sorting, svelte, sveltekit, table, table-component, typescript
- Language: TypeScript
- Homepage: https://table.svelte.page
- Size: 4.63 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Headless Table
[](https://www.npmjs.com/package/@humanspeak/svelte-headless-table)
[](https://github.com/humanspeak/svelte-headless-table/actions/workflows/npm-publish.yml)
[](https://coveralls.io/github/humanspeak/svelte-headless-table?branch=main)
[](https://github.com/humanspeak/svelte-headless-table/blob/main/LICENSE)
[](https://www.npmjs.com/package/@humanspeak/svelte-headless-table)
[](https://github.com/humanspeak/svelte-headless-table/actions/workflows/codeql.yml)
[](https://packagephobia.com/result?p=@humanspeak/svelte-headless-table)
[](https://trunk.io)
[](http://www.typescriptlang.org/)
[](https://www.npmjs.com/package/@humanspeak/svelte-headless-table)
[](https://github.com/humanspeak/svelte-headless-table/graphs/commit-activity)
## Unopinionated and extensible data tables for Svelte
> Build and design powerful datagrid experiences while retaining 100% control over styles and markup.
Visit the [documentation](https://table.svelte.page/) for code examples and API reference, and get started with the [quick start guide](https://table.svelte.page/docs/getting-started/quick-start)!
## 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
- [x] [addSortBy](https://table.svelte.page/docs/plugins/add-sort-by)
- [x] [addColumnFilters](https://table.svelte.page/docs/plugins/add-column-filters)
- [x] [addTableFilter](https://table.svelte.page/docs/plugins/add-table-filter)
- [x] [addColumnOrder](https://table.svelte.page/docs/plugins/add-column-order)
- [x] [addHiddenColumns](https://table.svelte.page/docs/plugins/add-hidden-columns)
- [x] [addPagination](https://table.svelte.page/docs/plugins/add-pagination)
- [x] [addSubRows](https://table.svelte.page/docs/plugins/add-sub-rows)
- [x] [addGroupBy](https://table.svelte.page/docs/plugins/add-group-by)
- [x] [addExpandedRows](https://table.svelte.page/docs/plugins/add-expanded-rows)
- [x] [addSelectedRows](https://table.svelte.page/docs/plugins/add-selected-rows)
- [x] [addResizedColumns](https://table.svelte.page/docs/plugins/add-resized-columns)
- [x] [addGridLayout](https://table.svelte.page/docs/plugins/add-grid-layout)
- [x] [addVirtualScroll](https://table.svelte.page/docs/plugins/add-virtual-scroll)
## Examples
```svelte
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);
{#each $headerRows as headerRow (headerRow.id)}
{#each headerRow.cells as cell (cell.id)}
{/each}
{/each}
{#each $rows as row (row.id)}
{#each row.cells as cell (cell.id)}
{/each}
{/each}
```
For more complex examples with advanced features, visit the [documentation site](https://table.svelte.page/docs/plugins/overview).