@bithero/svelte-datatable-bs NPM

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

front-end svelte svelte-component component components ecosystem-svelte

@bithero/simple-search-lib

@everything-registry/sub-chunk-128

0.1.0

1 year ago