svelte-tably

v1.6.1

Published

3 days ago

A high performant dynamic table for Svelte 5

0High
0Medium
0Low

Svelte Tably

Via the amazing capabilities braught to us by Svelte 5 — a performant, dynamic, flexible, feature rich table. It's as simple, or as flexible as you need it to be.

Simple example on Svelte 5 Playground Fledged out example on Svelte 5 Playground

[x] Columns
- [x] Sticky
- [x] Show/hide
- [x] Re-order
- [x] Resize
[x] Data manipulation
- [x] "Virtual" data
- [x] Sorting
- [x] Select
- [x] Filtering
- [x] Reorderable
[x] Statusbar
[x] Panels
[x] Row context
[x] Expandable rows
[x] Virtual rendering
[x] To CSV
[x] Auto: Create columns based on data

On top of that, the library API is extensive, so the table can meet your needs.

Usage Notes

bun add -D svelte-tably

[!NOTE]
If you do SSR, set Node version to 20 or higher

<script lang='ts'>
    import Table from 'svelte-tably'

    const data = $state([
        { name: 'Giraffe', age: 26, email: '[email protected]' },
        { name: 'Shiboo', age: 21, email: '[email protected]' }
    ])

    let activePanel = $state('columns') as string | undefined
    let selected = $state([]) as typeof data
</script>

<!-- Auto: Generate Columns based on data properties -->
<Table auto {data} resizeable={false} filters={[...]} />

<Table {data} panel={activePanel} select bind:selected>
    {#snippet content({ Column, Panel, Expandable, Row, table })}
        <Column id='name' sticky sort value={r => r.name} filter={v => v.includes('Giraffe')}>
            {#snippet header(ctx)}
                Name
            {/snippet}
            {#snippet row(row, ctx)}
                {row.name}
            {/snippet}
            {#snippet statusbar(ctx)}
                {table.data.length}
            {/snippet}
        </Column>
        
        <!-- Simplified -->
        <Column id='age' header='Age' value={r => r.age} sort={(a,b) => a - b} />

        <Expandable click={false}>
            {#snippet content(item, ctx)}
                ...
            {/snippet}
        </Expandable>

        <Row onclick={...} oncontextmenu={...}>
            {#snippet contextHeader()}
                <button ...> <Icon icon='add' /> </button>
            {/snippet}
            {#snippet context(item, ctx)}
                <button ...> <Icon icon='menu' /> </button>
            {/snippet}
        </Row>

        <Panel id='columns'>
            <!-- Anything you might like -->
        </Panel>
        <Panel ... backdrop={false}>
            ...
        </Panel>
    {/snippet}
</Table>

[!NOTE] Animations (panel/expandable) respect prefers-reduced-motion.

[!TIP] To export CSV, you can either bind:table to get the TableState instance (which exposes table.toCSV(...)), or bind:this and call the component export toCSV(...).

Styling

For quick styling

[!TIP]
For the CSS variables, apply them to :global(:root) { ... }

[!NOTE]
Advanced styling can be done via :global(.svelte-tably)
table > thead > tr > th, table > tbody > tr > td, table > tfoot > tr > td

Components

All components except Table are meant to be children of the Table component.

However, you can safely create a Component.svelte and use these components, and then provide <Component/> as a child to <Table>.

import Table from 'svelte-tably'

Table

The table component.

<Table auto {data} />

<Table {data} ...>
    {#snippet content?({ Column, Row, Expandable, Panel, table })}
        ...
    {/snippet}
</Table>

Where table is TableState<T> and the rest are typed; Component<T>.

SelectOptions

Column

import { Column } from 'svelte-tably'

This component designates a column where options like sorting, filtering etc. are provided.

<Column id='...' header='...' value={row => row.value} />

<Column id='...' ...>
    {#snippet header?(ctx: HeaderCtx<T>)}
        ...
    {/snippet}
    {#snippet row?(item: T, ctx: RowColumnCtx<T>)}
        ...
    {/snippet}
    {#snippet statusbar?(ctx: StatusbarCtx<T>)}
        ...
    {/snippet}
</Column>

Row

import { Row } from 'svelte-tably'

This component can add a context-menu on the side of each row, as well as provide event handlers to the row element.

<Row ... />

<Row ...>
    {#snippet context?(item: T, ctx: RowCtx<T>)}
        ...
    {/snippet}
    {#snippet contextHeader?()}
        ...
    {/snippet}
</Row>

ContextOptions

Expandable

import { Expandable } from 'svelte-tably'

This component gives your rows the ability to be expanded.

<Expandable ...>
    {#snippet content(item: T, ctx: RowCtx<T>)}
        ...
    {/snippet}
</Expandable>

| Attribute | Description | Type | | - | - | - | | content | The contents of the expanded row. | Snippet<[item: T, ctx: RowCtx<T>]> | | | | | | slide? | Options for sliding the expanding part | { duration?: number, easing?: EasingFunction } | | click? | Whether you can click on a row to expand/collapse it | boolean | | chevron? | Whether to show the chevron on the left fixed column | 'always' \| 'hover' \| 'never' | | multiple? | Can multiple rows be open at the same time? | boolean |

Panel

import { Panel } from 'svelte-tably'

This component creates a panel that can be opened on the side of the table.

<Panel id='...' ...>
    {#snippet children(ctx: PanelCtx<T>)}
        ...
    {/snippet}
</Panel>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme