Data Tables

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>

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>

function onSort(event: any): void { console.log('event:onSort', event.detail); }
function onSelect(event: any): void { console.log('event:onSelect', event.detail); }