# svelte-simple-datatables

> A Datatable component for Svelte

Latest version **0.3.1** (published 2023-01-21) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install svelte-simple-datatables
pnpm add svelte-simple-datatables
yarn add svelte-simple-datatables
bun add svelte-simple-datatables
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2023-01-21 |
| First published | 2020-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 264.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 260 |
| Author | vincjo |
| Maintainers | vincjo |
| Keywords | svelte table datatable simple-datatables |

## Links

- npm: https://www.npmjs.com/package/svelte-simple-datatables
- Repository: https://github.com/vincjo/svelte-simple-datatables
- Homepage: https://vincjo.fr/svelte-simple-datatables
- Issues: https://github.com/vincjo/svelte-simple-datatables/issues
- npm.io page: https://npm.io/package/svelte-simple-datatables

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2023-01-21
- 0.3.0 — 2023-01-16
- 0.2.3 — 2022-02-13
- 0.2.2 — 2022-02-13
- 0.2.1 — 2022-02-13
- 0.2.0 — 2022-02-13
- 0.1.27 — 2021-11-14
- 0.1.26 — 2021-11-14
- 0.1.25 — 2020-11-16
- 0.1.24 — 2020-11-15
- 0.1.23 — 2020-11-15
- 0.1.22 — 2020-11-14
- 0.1.21 — 2020-11-12
- 0.1.20 — 2020-11-09
- 0.1.19 — 2020-11-04
- … 25 more at https://npm.io/package/svelte-simple-datatables/versions

## README

<div align="center">
	<img align="center" src="./example/public/logo.svg" alt="logo" width="172"/>
	<p align="center">
		<h1 align="center" style="font-size:32px;margin:0;border:none;">svelte-simple-datatables</h1>
		<img src="https://img.shields.io/npm/v/svelte-simple-datatables?color=%23b71540" alt="npm version"/>
		<img src="https://img.shields.io/github/license/vincjo/svelte-simple-datatables?color=b71540" alt="last commit"/>
	</p>
</div>



## New version ([new repo](https://github.com/vincjo/datatables))

A new, more mature and controllable version is available here :

**[https://github.com/vincjo/datatables](https://github.com/vincjo/datatables)**

It has typescript support, headless UI, SSR, and provides a data handler.

It is a complete rewrite involving a few breaking changes but the concept is the same.

<br>

This package is still maintained.

<br>

# Presentation
`Datatable` component default behavior :
- Fits in its container
- The table has fixed header
- Scrolls vertically and horizontally
- Responsive design

:point_right: **[Live Demo](https://vincjo.fr/svelte-simple-datatables)**


<br>


# Install
:white_check_mark: Install as a dev dependency to avoid a SSR errors.
````apache
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](#expression).<br>
 Settings definition is optionnal.
````svelte
<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](https://vincjo.fr/svelte-simple-datatables/#/demo/column-filter) 

# i18n
Labels can be defined in the settings :
````js
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](https://vincjo.fr/svelte-simple-datatables/#/demo/i18n) 

# Optional blocks
The Datatable includes 3 optional blocks
- PaginationButtons
- PaginationRowCount
- SearchInput

These can be disabled in the settings, imported as components and placed anywhere :
````svelte
<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](https://vincjo.fr/svelte-simple-datatables/#/demo/blocks) 

# <a name="expression"></a> Use of expressions in `key` dataset
````svelte
<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](https://vincjo.fr/svelte-simple-datatables/#/demo/expression) 

# Breaking changes
<br>

## 2022-02-13 / v0.2.3 - Nested stores :
You can now set an `id` prop to the datatables :
````svelte
    <Datatable {settings} bind:dataRows={rows} id={'my-datatable'}>
````
This is **required** for using multiple datatables on the same page.<br>
 **[Code example](https://vincjo.fr/svelte-simple-datatables/#/test/multiple-dt)** <br>

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/>`<br>
**[Code example](https://vincjo.fr/svelte-simple-datatables/#/test/optional-blocks)** 
<br><br><br>

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

```svelte-simple-datatables``` now supports **multiple instances** on the same page.<br>
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`` (row<u>**s**</u>)

Special thanks to [@pangweisan](https://github.com/pangweisan) for his help

---
_Source: https://npm.io/package/svelte-simple-datatables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._