@bithero/svelte-datatable-bs

svelte-datatable-bs

Svelte component for a simple datatable with styles to match bootstrap

License

This project is licensed under AGPL-3.0. See the LICENSE file for more informations.

Usage

<script lang="ts">
    import { DataTable } from '@bithero/svelte-bs-datatable';

    const rows = [
        [ '1', 'John', '24' ],
        [ '2', 'Joe', '29' ],
        [ '3', 'Arthur', '18' ],
        [ '4', 'Bernd', '30' ],
        [ '5', 'Maria', '26' ],
        [ '6', 'Zoe', '19' ],
    ];
</script>

<DataTable
    headings={['ID', 'Name', 'Age']}
    data={rows}
    pageingEntries={[5,10,15,20,25]}
    translations={{
        perPage: 'entries per page',
        searchPlaceholder: 'Search...',
        info: 'Showing {s} to {e} of {c} entries',
    }}
    sortable
/>

Props

Prop	Type	Comment
headings	string[]	The labels to use as headings; also specfies how many columns there are
data	string[][]	Array of rows which in turn are array of cells (strings).
showAddBtn	boolean	Enables an add button in the upper right corner
searchable	boolean	Enables searching of the table
sortable	boolean	Enables sorting of columns
pageingEntries	number[]	List of numbers that will be shown as selection in the 'entries per page' dropdown
translations	IDataTableTranslations	Translations for the few strings in the component; see below
onSearchNamespaceResolve	(namespace, row_idx, row): string	If specified, this function's result is used instead for namespace lookups for searches performed with @bithero/simple-search-lib.

IDataTableTranslations

Field	Type	Comment
perPage	string	Text to display to the right of the 'entries per page' dropdown
searchPlaceholder	string	Text to use as placeholder for the search input
info	string	Layout string for the info bar at the bottom left. at the special symbols {s}, {e} and {c} the numbers for the start, the end and the overall count will be inserted respectively.
noRows	string	Text to display if no data was provided via the data property.
noResults	string	Text to display if there where no search results.

Events

Event	Type	Comment
addClick	(MouseEvent<>): void	Called when the add-button was clicked; see showAddBtn
rowClick	(RowClickEvent): void	Called when an row is clicked