Svelte Tabular Table

Fully-featured, no-BS, lightweight table component for Svelte.

pnpm i svelte-tabular-table

• Live Examples
• Example 1 - Basic
• Example 2 - Dimensions
• Example 3 - Sortable
• Example 4 - Checkable
• Example 5 - Rearrangeable
• Example 6 - Autohide (1)
• Example 7 - Autohide (2)
• Example 8 - Callbacks
• Example 9 - Components
• Example 10 - Classes
• API Documentation

Example 1 - Basic

Basic configuration:

• init.data - an array of objects comprising the rows
• init.keys - an array of keys to define columns
• init.index - the key used for indexing each row *
• init.nohead - a boolean to remove thead
• init.nodiv - a boolean to render without div **

* If no valid init.index is set, or if there are duplicate values inside data, the table will attempt to generate unique keys.
** Enabling this means dimensions and features.autohide will not work.

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        keys: ['name', 'balance', 'address', 'company'],
        index: '_id',
        name: 'basic-example',
        nohead: false,
        nodiv: false,
        data
    }
}
</script>
<Table {...config} />

Example 2 - Dimensions

Dimensions control the formatting of the table:

• dimensions.row - sets row height and cuts overflowing cells with an ellipsis (...)
• dimensions.padding - sets cell padding
• dimensions.widths - sets an array of widths for each column (can be int or string "10em", "50%", etc)
• dimensions.minwidth - minimum width of table (int or string)

When using features.autohide it is important to set dimensions, so that each row is a consistent height.

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        keys: ['age', 'latitude', 'longitude', 'name', 'about'],
        index: '_id',
        data
    },
    dimensions: {
        name: 'dimensions-example',
        row: 16,
        padding: 10,
        widths: [50,100,100,150],
        minwidth: 400
    }
}
</script>
<Table {...config} />

Example 3 - Sortable

Sortable headers can be initialised by setting features.sortable.key to an initial value and features.sortable.direction to true (ascending) or false (descending).

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'sortable-example',
        keys: ['name', 'balance', 'company', 'latitude', 'longitude', 'tags'],
        index: '_id',
        data
    },
    features: {
        sortable: {
            key: 'name'
        }
    }
}
</script>
<Table {...config} />

Example 4 - Checkable

Checkable rows are initialised by passing a blank {} object to features.checkable, which will be set via init.index.

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'checkable-example',
        keys,
        index: '_id',
        data
    },
    dimensions: {
        widths: [ 100 ]
    },
    features: {
        checkable: {}
    }
}
</script>
<Table {...config} />

Example 5 - Rearrangeable

Rearrangeable rows are initialised by passing a callback function to features.rearrangeable, which will return the from and to indexes as an integer: ( from, to ) => ...

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'rearrangeable-example',
        keys: ['name', 'balance', 'company'],
        index: '_id',
        data
    },
    features: {
        rearrangeable: (from, to) => alert(`from ${from} to ${to}`)
    }
}
</script>
<Table {...config} />

Example 6 - Autohide (1)

Autohide will stop rows that are currently not in view from rendering - increasing performance on tables with large datasets or images and video. It can be used inside a container, or with the window element - and must be manually triggered via features.autohide.position:

• features.autohide.container - sets the scrolling parent element and enables autohide
• features.autohide.position - is the current scrollTop / scrollY position, and must be manually updated from your own on:scroll event
• features.autohide.buffer - sets extra space before rows are hidden as a multiple of container.offsetHeight (ie. 0.5 * 400 = 200px buffer)

Example is using window as container with buffer set to minus -0.1 to illustrate limits of hidden row edges:

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'autohide-1-example',
        keys,
        index: '_id',
        data: many,
        nohead: true
    },
    dimensions: {
        row: 16
    },
    features: {
        autohide: {
            container: window,
            position: scrollY, // <svelte:window on:scroll={ e => scrollY = window.scrollY } />
            buffer: -0.1
        }
    }
}
</script>
<Table {...config} />

Example 7 - Autohide (2)

Example using a container, see Autohide (1):

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'autohide-2-example',
        keys,
        index: '_id',
        data: many,
        nohead: true
    },
    dimensions: {
        row: 16
    },
    features: {
        autohide: {
            container: container, // bind:this={ container }
            position: scrollY, // on:scroll={ e => scrollY = window.scrollY }
            buffer: 2
        }
    }
}
</script>
<Table {...config} />

Example 8 - Callbacks

Callbacks can be defined for:

• callbacks.render.cell or callbacks.render.key - returning with {id, item, key, value, rowIndex, cellIndex} argument *
• callbacks.click.cell or callbacks.click.key - returning with {id, item, key, value, rowIndex, cellIndex, _event_} argument

* Render callback can also be a component reference (see Example 9 - Components):

<script>
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'callbacks-example',
        keys: ['name', 'balance', 'company', 'latitude', 'longitude'],
        index: '_id',
        data
    },
    callbacks: {
        render: {
            cell: o => ['🌱','☘️','🥬','🌿','🥒'][o.cellIndex] ,
            key: o => ['🌴','🌲','🌳','🏔','🥦'][o.cellIndex],
        },
        click: {
            cell: o => alert( ['🌴','🌲','🌳','🏔','🥦'][o.cellIndex] ) ,
            key: o => alert( ['🌱','☘️','🥬','🌿','🥒'][o.cellIndex] ),
        }
    }
}
</script>
<Table {...config} />

Example 9 - Components

In place of a callback render function, a svelte:component can be used with the properties {id, item, key, value, index}:

<script>
import Auto from './Auto.svelte'
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'components-example',
        keys: ['picture', 'name', 'latitude', 'longitude', 'registered', 'about'],
        index: '_id',
        data
    },
    callbacks: {
        render: {
            cell: Auto,
            key: Auto,
        }
    },
}
</script>
<Table {...config} />

// --- Auto.svelte ---

<script>
    export let id
    export let item
    export let key
    export let value
    export let index
    export let type
</script>

{#if type == 'key'}
    <b style="letter-spacing: 0.2em">{value}</b>
{:else if (key == 'picture')}
    <img src={ value } />
{:else if (key == 'registered')}
    <em>{ ( new Date( value ) ).toDateString() }</em>
{:else if (key == 'about')}
    <marquee>{value}</marquee>
{:else if (key == 'name')}
    <blink style="color:rgb(255,62,0)">{value}</blink>
{:else if (key == 'latitude' || key =='longitude' )}
    <code>{value}</code>
{:else}
    {value}
{/if}

Example 10 - Classes

The classes object is a list of classes that are applied to a row based on it's id.
In this example we are setting an orange and yellow background class when a cell item is clicked:

<script>
import Auto from './Auto.svelte'
import { Table } from 'svelte-tabular-table'
const config = {
    init: {
        name: 'classes-example',
        keys: ['name', 'balance', 'company', 'latitude', 'longitude', 'tags'],
        index: '_id',
        data
    },
    classes: {
        orange_background: [ selected ],
        yellow_background: clicked

    },
    callbacks: {
        click: {
            cell: o => {
            selected = o.id
            clicked.push( o.id )
            }
        }
    }
        
}
</script>
<Table {...config} />

// --- Auto.svelte ---

<script>
    export let id
    export let item
    export let key
    export let value
    export let index
    export let type
</script>

{#if type == 'key'}
    <b style="letter-spacing: 0.2em">{value}</b>
{:else if (key == 'picture')}
    <img src={ value } />
{:else if (key == 'registered')}
    <em>{ ( new Date( value ) ).toDateString() }</em>
{:else if (key == 'about')}
    <marquee>{value}</marquee>
{:else if (key == 'name')}
    <blink style="color:rgb(255,62,0)">{value}</blink>
{:else if (key == 'latitude' || key =='longitude' )}
    <code>{value}</code>
{:else}
    {value}
{/if}

API Documentation

Properties are categorised:

• init - for data and setup

• dimensions - formatting sizes, widths, heights

• features - sortable, checkable, rearrangeable, autohide

• callbacks - cell rendering and events

  import { Table } from 'svelte-tabular-table'

| Name | Description | Types | Default | Example | | --- | --- | --- | --- | --- | | init.data | list of rows | Array:Object | null | [{ color: 'blue', id: '001' }] | | init.keys | list of columns | Array:String | null | [ 'color', 'id' ] | | init.index | unique index | String | null | id | | init.nohead | dont render thead | Boolean | false | true | | init.nodiv | dont render div | Boolean | false | true | | dimensions.row | height of each row | Integer,String | null | 10, "2em" | | dimensions.padding | padding of each row | Integer,String | 10 | 10, "1em" | | dimensions.widths | width of each column | Array:Integer,Array:String | [] | [ 100, "20%", "40px", 10] | | dimensions.minwidth | mininum width of table | Array:Integer,Array:String | null | 100, "20%", "40px", 10 | | features.sortable.key | initial sorting key (enables sortable) | String | null | "color" | | features.sortable.direction | ascending or descending | Boolean | false | true | | features.checkable | blank object (enables checkable) | Object | null | {} | | features.rearrangeable | callback (enables rearrangeable) | Function | null | (a,b) => alert(`from ${a} to ${b}`) | | features.autohide.container | DOM element (enables autohide) | Element | null | bind:this={domElement},window | | features.autohide.position | current scroll position (set externally) | Integer | 0 | on:scroll=>{setPosition} | | features.autohide.buffer | extend area (multiple of container height) | Float | 0 | 2 | | callbacks.render.key|cell | rendering callback or SvelteComponent | Function,SvelteComponent | o => o.value | o => 'hello world' | | callbacks.click.key|cell | cell or key click callback | Function | null | o => alert(`${o.id} clicked!`) | | id | id attribute of table | String | table | table-1 | | class | class attribute of table | String | | table | | id | style attribute of table | String | | background:red | | debug | debugging console log | Boolean | false | true |