svelte-simple-datatables

Presentation

Datatable component default behavior :

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

:point_right: Live Demo

Install

:white_check_mark: Install as a dev dependency to avoid a SSR errors.

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>

<SearchInput id={"my-datatable"}/>
<PaginationButtons id={"my-datatable"}/>
<PaginationRowCount id={"my-datatable"}/>

<Datatable {settings} {data} bind:dataRows={rows} id={"my-datatable"}>
    (...)
</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

2022-02-13 / v0.2.3 - Nested stores :

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.
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/>
Code example

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 (rows)

Special thanks to @pangweisan for his help