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 |