Skip to content

A highly configurable datatable for Svelte and Sveltestrap UI components

License

Notifications You must be signed in to change notification settings

Kage0x3B/svelte-advanced-datatable

Repository files navigation

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

Usage

Installing

# Install the npm package
npm i svelte-advanced-datatable

# As well as the ui library and data source you want to use
npm i skeleton @sveltestack/svelte-query

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/skeleton';

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

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

<DataTable {config} />

View the documentation for all supported config options and more examples