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