@bithero/svelte-datatable-bs
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

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

Package Sidebar

Install

npm i @bithero/svelte-datatable-bs

Weekly Downloads

0

Version

0.1.0

License

AGPL-3.0-or-later

Unpacked Size

54.5 kB

Total Files

16

Last publish

Collaborators

  • mai-lapyst