svelte-headless-datatable Svelte Themes

Svelte Headless Datatable

Headless datatable component for Svelte

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

Top categories

Loading Svelte Themes