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

• Simple - Simple example with pagination
• Sorting - Example with sorting
• Checking - Example with row checking
• Opening/Selecting - Example with row opening and selecting