(Documentation is still WIP)
- 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
- Documentation, or jump directly to information on the usage with:
- API Reference
# 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-queryAfter 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} />