13/02/2022 - svelte-simple-datatable v0.2.3 :

You can now set an id prop to the datatables :

    <Datatable {settings} bind:dataRows={rows} id={'my-datatable'}>

This is required for using multiple datatables on the same page.
:eyes: Code example

The Context API has been removed for the benefit of nested stores, in particular to allow the use of remote components such as <PaginationRowCount/>, <SearchInupt/>
:eyes: Code example

Presentation

Datatable component default behavior :

• Fits in its container
• The table has fixed header
• Scrolls vertically and horizontally
• Responsive design

:point_right: Live Demo

Todos :

• Sort columns programmatically
• Server side data

Install

:white_check_mark: Install as a dev dependency if using Sapper to avoid a SSR error.

npm i -D svelte-simple-datatables

Sample code

To enable the filter and sort functions, you have to specify the data-key in the <th> tag. You can set an expression in plain javascript.
Settings definition is optionnal.

<script>
    import { data } from './data.example.js'  
    import { Datatable } from 'svelte-simple-datatables'

    const settings = {
        sortable: true,
        pagination: true,
        rowsPerPage: 50,
        columnFilter: true,
    }
    let rows
</script>

<Datatable settings={settings} data={data} bind:dataRows={rows}>
    <thead>
        <th data-key="id">ID</th>
        <th data-key="first_name">First Name</th>
        <th data-key="last_name">Last Name</th>
        <th data-key="email">Email</th>
        <th data-key="ip_address">IP Adress</th>
    </thead>
    <tbody>
    {#if rows}
        {#each $rows as row}
            <tr>
                <td>{row.id}</td>
                <td>{row.first_name}</td>
                <td>{row.last_name}</td>
                <td>{row.email}</td>
                <td>{row.ip_address}</td>
            </tr>
        {/each}
    {/if}
    </tbody>
</Datatable>

See demo here

i18n

Labels can be defined in the settings :

const settings = {
    labels: {
        search: 'Search...',    // search input placeholer
        filter: 'Filter',       // filter inputs placeholder
        noRows: 'No entries to found',
        info: 'Showing {start} to {end} of {rows} entries',
        previous: 'Previous',
        next: 'Next',       
    }
}

See demo here

Optional blocks

The Datatable includes 3 optional blocks

• PaginationButtons
• PaginationRowCount
• SearchInput

These can be disabled in the settings, imported as components and placed anywhere :

<script>
    import { data } from './data.example.js' 
    import { SearchInput, PaginationButtons, PaginationRowCount, Datatable } from 'svelte-simple-datatables'

    const settings = {
        blocks: {
            searchInput: false, 
            paginationButtons: false,
            paginationRowCount: false,
        }
    }
    let rows
</script>

{#if rows}
    <SearchInput/>
    <PaginationButtons/>
    <PaginationRowCount/>
{/if}

<Datatable {settings} {data} bind:dataRows={rows}>
    (...)
</Datatable>

See demo here

Use of expressions in key dataset

<script>
    import { data } from './data.example.js'  
    import { Datatable } from 'svelte-simple-datatables'
    let rows
</script>

<Datatable {data} bind:dataRows={rows}>
    <thead>
        <th data-key="id">ID</th>

        <!-- Function that will be used for sorting and filtering -->
        <th data-key="(row) => row.first_name + ' ' + row.last_name">User</th>

        <th data-key="email">Email</th>
        <th data-key="ip_address">IP Adress</th>
    </thead>
    <tbody>
    {#if rows}
        {#each $rows as row}
            <tr>
                <td>{row.id}</td>

                <!-- This allows for example to concatenate values -->
                <td>{row.first_name} {row.last_name}</td>

                <td>{row.email}</td>
                <td>{row.ip_address}</td>
            </tr>
        {/each}
    {/if}
    </tbody>
</Datatable>

See demo here

Breaking changes

2021-11-14 / v0.1.27 - Multiple datatables

svelte-simple-datatables now supports multiple instances on the same page.
This brought some breaking changes in the way of mounting the component :

• $rows store is no longer exported but requires a declaration let rows in your code
• The data are binded to a new prop : dataRows
• To retreive the $rows store, we need to add a {#if} block before the loop
• Something else :
  • rowPerPage option becomes rowsPerPage (rowsPerPage)

Special thanks to @pangweisan for his help