Svelte Data Table

• No dependencies
• Blazing fast thanks to Svelte 5 and fine-grained reactivity
• Fully typed with TypeScript
• Comprehensive unit tests
• Supports SvelteKit and SSR
• Works great with shadcn data table

Demo

Demo Website

Installation

npm install @careswitch/svelte-data-table

Requires Svelte 5 peer dependency

Usage

<script lang="ts">
    import { DataTable } from '@careswitch/svelte-data-table';

    const table = new DataTable({
        data: [
            { id: 1, name: 'John Doe', status: 'active' },
            { id: 2, name: 'Jane Doe', status: 'inactive' }
        ],
        columns: [
            { id: 'id', key: 'id', name: 'ID' },
            { id: 'name', key: 'name', name: 'Name' },
            { id: 'status', key: 'status', name: 'Status' }
        ]
    });
</script>

<table>
    <thead>
        <tr>
            {#each table.columns as column (column.id)}
                <th>{column.name}</th>
            {/each}
        </tr>
    </thead>
    <tbody>
        {#each table.rows as row (row.id)}
            <tr>
                {#each table.columns as column (column.id)}
                    <td>{row[column.key]}</td>
                {/each}
            </tr>
        {/each}
    </tbody>
</table>

Examples

Refer to the demo website +page.svelte and unit tests for more comprehensive examples.