@bithero/svelte-datatable-bs
v0.1.0
Published
Svelte component for a simple datatable with styles to match bootstrap
Downloads
5
Maintainers
Readme
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