Svelte Advanced DataTable

(Documentation is still WIP)

Features

• Highly configurable datatable
• Data pagination
• Sorting, searching/filtering the data
• Compatible with the sveltestrap (Bootstrap) component framework or your own UI styles by implementing a few components
• Supports svelte-i18n or a custom i18n library
• Data loaded using Fetch-API or the svelte-query library

Quick Links

• Documentation, or jump directly to information on the usage with:
  • Bootstrap + Sveltestrap UI
  • Svelte Query as a datasource
  • svelte-i18n for localisation
• API Reference

Usage

Installing

# Install prerequisites such as TailwindCSS and DaisyUI
...

# Install the npm package
pnpm add -D svelte-advanced-datatable

Basic DataTable

After installing the svelte-advanced-datatable library, import the DataTable component from the package for your ui library.

To use the component, pass the config object with all required properties to it:

<script lang='ts'>
    import type { DataTableConfig } from 'svelte-advanced-datatable';
    import { ComponentType, FetchApiDataSource } from 'svelte-advanced-datatable';
    import { DataTable } from 'svelte-advanced-datatable/daisyUi';

    interface UserData {
        id: number;
        userName: string;
    }

    const config: DataTableConfig<UserData> = {
        type: 'userData',
        columnProperties: {
            id: {
                type: ComponentType.NUMBER
            },
            userName: {
                type: ComponentType.STRING
            }
        },
        dataUniquePropertyKey: 'id',
        messageConfig: {
            id: {
                label: 'Id'
            },
            userName: {
                label: 'Username'
            }
        }
    };
    
    const dataSource = new FetchApiDataSource('/api/users/list');
</script>

<DataTable {config} {dataSource} />

View the documentation for all supported config options and more examples