Data Tables
Svelte ComponentInteractive table with support for search, sort, and pagination.
Import
Package
Source
Docs
WAI-ARIA
Examples
Render a table using data that is client-side only.
| Positions ↓ | Name | Weight | Symbol |
|---|---|---|---|
| 1 | Hydrogen | 1.0079 | H |
| 2 | Helium | 4.0026 | He |
| 3 | Lithium | 6.941 | Li |
| 4 | Beryllium | 9.0122 | Be |
| 5 | Boron | 10.811 | B |
| 6 | Carbon | 12.0107 | C |
| 7 | Nitrogen | 14.0067 | N |
| 8 | Oxygen | 15.9994 | O |
| 9 | Fluorine | 18.9984 | F |
| 10 | Neon | 20.1797 | Ne |
Usage
Ensure your heading and source keys are defined in the same order left-to-right. Note that source values support stringified HTML.
const headings: string[] = ['Positions', 'Name', 'Weight', 'Symbol'];
const source: any[] = [
{ position: 1, name: '<strong class="text-red">Hydrogen</strong>', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
];<DataTable {headings} {source}></DataTable>Search, Sort, and Pagination
The example below includes search, sort, and item count. Note that source is binding to provide item count.
const tableLocal: any = {
search: undefined,
sort: 'position',
headings: ['Positions', 'Name', 'Weight', 'Symbol'],
source: [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
]
};<DataTable
headings={tableLocal.headings}
bind:source={tableLocal.source}
search={tableLocal.search}
sort={tableLocal.sort}
interactive
on:sorted={onSort}
on:selected={onSelect}
>
<svelte:fragment slot="header"><input type="search" placeholder="Search..." bind:value={tableLocal.search}></svelte:fragment>
<svelte:fragment slot="footer">{tableLocal.source.length} Items</svelte:fragment>
</DataTable>Table Mapper Service
We've provided a utility service for remapping data from a object to an array. The first parameter is the keys, which also defines the order. The second parameter is the object you wish to map.
import { mapTableSource } from '@brainandbones/skeleton';const sourceObject: any = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
];
const mappedSource: string[] = mapTableSource(['position', 'name', 'weight', 'symbol'], sourceObject)