Quick Start

Suppose you want to show a list of all of your users in a table. For this first example, the user only has an id and a userName field:

type UserData = {
	id: number;
	userName: string;
};

const exampleUserData: UserData[] = [
	{ id: 1, userName: 'Edmund.Rolfson21' },
	{ id: 2, userName: 'Melody34' },
	...otherUsers
];

In this example, we will be using Bootstrap with Sveltestrap for the UI components, hardcoded data (in the example generated with faker-js) and no i18n library yet, all strings will be hardcoded in the config.

Add the DataTable component as well as the accompanying config to your page:

<script lang='ts'>import { ComponentType, LocalDataSource } from 'svelte-advanced-datatable';
// Notice that the DataTable component is imported from the /sveltestrap package to support Sveltestrap UI components
import { DataTable } from 'svelte-advanced-datatable/sveltestrap';
// Config for our datatable
const config = {
    // Give it a name/identifier, required internally to manage multiple datatables on one page
    type: 'userData',
    // Configure what type the data in each of the table columns has
    columnProperties: {
        id: {
            type: ComponentType.NUMBER
        },
        userName: {
            type: ComponentType.STRING
        }
    },
    // The datatable requires one key of the object to contain a unique identifier, such as a user id.
    dataUniquePropertyKey: 'id',
    // Where do we get the data from? In this example we just use the contents of the exampleUserData array from above.
    dataSource: new LocalDataSource(exampleUserData, {
        filtering: {
            // Enable search for these columns
            textSearchColumns: ['userName']
        }
    }),
    // Give your columns fancier names to display in the table header
    messageConfig: {
        id: {
            label: 'Id'
        },
        userName: {
            label: 'Username'
        }
    }
};
</script>

<DataTable {config} />

This short code-snippet will already result in the following datatable: