Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bryanmylee/svelte-headless-table

Unopinionated and extensible data tables for Svelte
https://github.com/bryanmylee/svelte-headless-table

datagrid datatable expanding filtering flattening grouping headless hiding ordering plugin resizing selecting sorting svelte sveltejs table

Last synced: about 1 hour ago
JSON representation

Unopinionated and extensible data tables for Svelte

Host: GitHub
URL: https://github.com/bryanmylee/svelte-headless-table
Owner: bryanmylee
Created: 2022-04-12T09:30:33.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2024-10-28T12:33:49.000Z (3 months ago)
Last Synced: 2025-01-16T14:24:32.216Z (7 days ago)
Topics: datagrid, datatable, expanding, filtering, flattening, grouping, headless, hiding, ordering, plugin, resizing, selecting, sorting, svelte, sveltejs, table
Language: TypeScript
Homepage: https://svelte-headless-table.bryanmylee.com/
Size: 2.17 MB
Stars: 490
Watchers: 10
Forks: 32
Open Issues: 39
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        


  



Svelte Headless Table




[![npm version](http://img.shields.io/npm/v/svelte-headless-table.svg)](https://www.npmjs.com/package/svelte-headless-table)

[![npm downloads](https://img.shields.io/npm/dm/svelte-headless-table.svg)](https://www.npmjs.com/package/svelte-headless-table)

![license](https://img.shields.io/npm/l/svelte-headless-table)

![build](https://img.shields.io/github/actions/workflow/status/bryanmylee/svelte-headless-table/publish.yml)



## 🚧 Deprecation

> I've really appreciated all the support this project has received over the years, but I've been struggling to juggle my full-time job and this project simultaneously.

>

> There are no current plans to work on a Svelte 5 port of this project nor is there a maintenance schedule for Svelte 3/4. I'll merge fixes and PRs as they arrive, but I'd highly recommend seeking an alternative library for your future projects or forking this one.

**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://svelte-headless-table.bryanmylee.com/) for code examples and API reference, and get started with the [quick start guide](https://svelte-headless-table.bryanmylee.com/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://svelte-headless-table.bryanmylee.com/docs/plugins/add-sort-by)

- [x] [addColumnFilters](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-column-filters)

- [x] [addTableFilter](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-table-filter)

- [x] [addColumnOrder](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-column-order)

- [x] [addHiddenColumns](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-hidden-columns)

- [x] [addPagination](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-pagination)

- [x] [addSubRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-sub-rows)

- [x] [addGroupBy](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-group-by)

- [x] [addExpandedRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-expanded-rows)

- [x] [addSelectedRows](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-selected-rows)

- [x] [addResizedColumns](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-resized-columns)

- [x] [addGridLayout](https://svelte-headless-table.bryanmylee.com/docs/plugins/add-grid-layout)

## 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://svelte-headless-table.bryanmylee.com/docs/plugins/overview).