shd

svelte-headless-datatable

Headless datatable component for Svelte

Showing:

Popularity

Downloads/wk

7

GitHub Stars

9

Maintenance

Last Commit

1yr ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

1.9KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

svelte-headless-datatable

Headless (UI-less) datatable component for Svelte.

Motivation

Main goal for this library is to create fully featured datatable component, but without UI implementation. Component only consists of data and methods common to datatable. I hope, this could speed up develpment of datatable for someone, regardless of its design.

Installation

With npm:

$ npm i svelte-headless-datatable

or with yarn:

$ yarn add svelte-headless-datatable

Usage

<script>
  import createDatatable from 'svelte-headless-datatable'

  const data = [
    {
      'id': '5e837815fcd5249efa8e4d85',
      'firstName': 'Castro',
      'lastName': 'Hewitt',
      'age': 30
    },
    ...
  ]

  const columns = ['ID', 'Name', 'Surname', 'Age']

  const datatable = createDatatable(data)
  const { items, page, pages } = datatable
</script>

<table>
  <thead>
    <tr>
      {#each columns as column}
        <td>{column}</td>
      {/each}
    </tr>
  </thead>
  <tbody>
    {#each $items as { id, firstName, lastName, age }}
      <tr>
        <td>{id}</td>
        <td>{firstName}</td>
        <td>{lastName}</td>
        <td>{age}</td>
      </tr>
    {/each}
  </tbody>
</table>

<div>
  <button
    disabled={!$page}
    on:click={() => page.set($page - 1)}
  >
    Prev
  </button>
  <button
    disabled={$page === $pages - 1}
    on:click={() => page.set($page + 1)}
  >
    Next
  </button>
  Page {$page + 1} of {$pages}
</div>

Examples

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100