Datatable
component default behavior :
- Fits in its container
- The table has fixed header
- Scrolls vertically and horizontally
- Responsive design
Todos :
- Sort columns programmatically
- Server side data
✅ Install as a dev dependency if using Sapper to avoid a SSR error.
npm i -D svelte-simple-datatables
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, rows } from 'svelte-simple-datatables'
const settings = {
sortable: true,
pagination: true,
rowPerPage: 50,
columnFilter: true,
}
</script>
<Datatable settings={settings} data={data}>
<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>
{#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}
</tbody>
</Datatable>
See demo here
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
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, rows } from 'svelte-simple-datatables'
const settings = {
blocks: {
searchInput: false,
paginationButtons: false,
paginationRowCount: false,
}
}
</script>
<SearchInput/>
<PaginationButtons/>
<PaginationRowCount/>
<Datatable {settings} {data}>
(...)
</Datatable>
See demo here
<script>
import { data } from './data.example.js'
import { Datatable, rows } from 'svelte-simple-datatables'
</script>
<Datatable {data}>
<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>
{#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}
</tbody>
</Datatable>
See demo here