jonbitgood/svelte-simple-datatables

A Datatable component for Svelte

svelte-simple-datatables

2021-11-14 Breaking changes - 0.1.27

Hello,
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

--- The demo site will be back soon ---

Below is the updated documentation :

Presentation

Datatable component default behavior :

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

👉 Live Demo

Todos :

• Sort columns programmatically
• Server side data

Install

✅ 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

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'
    let rows
</script>

<SearchInput/>
<PaginationButtons/>
<PaginationRowCount/>

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

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