Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ivosdc/svelte-generic-table-pager
Generic paginator webcomponent. Dispatches page subset of any object array.
https://github.com/ivosdc/svelte-generic-table-pager
Last synced: 3 months ago
JSON representation
Generic paginator webcomponent. Dispatches page subset of any object array.
- Host: GitHub
- URL: https://github.com/ivosdc/svelte-generic-table-pager
- Owner: ivosdc
- License: mit
- Created: 2020-06-09T16:10:07.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-26T21:39:30.000Z (11 months ago)
- Last Synced: 2024-07-11T08:32:52.582Z (4 months ago)
- Language: Svelte
- Size: 1020 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelte-generic-table-pager - Svelte-generic-crud-table with paginator. (UI Components / Table)
README
# svelte-generic-table-pager
A svelte paginator using svelte-generic-crud-table.
- Svelte-component: `import GenericTablePager from 'svelte-generic-table-pager'`
[See REPL on svelte.dev:](https://svelte.dev/repl/b81c81da687c432fa407bb6bbd1a1713?version=3.38.2 "Example")
## Install
```
npm install svelte-generic-table-pager
```
# Usage
Use the svelte-generic-table-pager in your component to show, edit, update and delete it's content *paginated*.
Just include the table as seen in the example below.
## column settings
All fields are optional.
Settings regarding a column behaviour can be specified in the table_config.
Only wanted keys of your source array have to be mapped by columns_settings *name*. All other attributes are optional.
```js
const table_config = {
name: 'Awesome',
options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
columns_setting: [
{name: 'id', show: false, edit: true, width: '0px'},
{name: 'job', show: true, edit: true, width: '150px', description: 'The job'},
{name: 'name', show: true, edit: true, width: '150px', tooltip: true},
{name: 'private', show: true, edit: false, width: '200px', description: 'your things', tooltip: true},
{name: 'html', show: true, edit: true, width: '500px', type: 'html', description: 'You can use HTML', tooltip: true}
],
details_text: 'detail' // replace the standard icon with an text-link
}
```
- *name*: the key from your data-array. This is used as column name.
- *show*: true/false; Should this column displayed? (optional, default: false)
- *edit*: true/false; Set this field editable or not. (optional, default: false)
- *width*: px/em; set the field width. (optional, default: 100px)
- *description*: A tooltip for the columns name. E.g. to see the full name or other description. (optional, default: unset)
- *tooltip*: true/false; When the text does not fit into the field you can show the full text as tooltip. (optional, default: false)
- *type*: There are two types: (optional, default: text)
- *text*: Default.
- *html*: The value/text will be interpreted as HTML.
[See REPL on svelte.dev:](https://svelte.dev/repl/b81c81da687c432fa407bb6bbd1a1713?version=3.38.2 "Example")
### Svelte-Component:
```html
import GenericTablePager from 'svelte-generic-table-pager/src/GenericTablePager.svelte'
function handleDelete(event) {
const id = event.detail.id; // position in myObjectArray
const body = event.detail.body; // object to delete
console.log(JSON.stringify(event.detail.body));
myObjectArray.slice(id,1);
}
function handleUpdate(event) {
const id = event.detail.id; // position in table
const body = event.detail.body;
console.log(JSON.stringify(body));
myObjectArray[id] = body;
}
function handleCreate(event) {
console.log(JSON.stringify(event.detail)); // empty object is passed by now
myObjectArray.push({id: -1, name:'new Element', sthg:'2345', why:'1234'})
const copy = myObjectArray;
myObjectArray = [];
myObjectArray = copy;
}
function handleDetails(event) {
const id = event.detail.id; // position in table
const body = event.detail.body;
console.log(JSON.stringify(body));
}
function handleSort(e) {
console.log(e);
}
let myObjectArray = [
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_12", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_13", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_14", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_15", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_16", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_17", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_18", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_19", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_12345", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
{id: 2, name: "A_NAME_2", sthg: "A_STHG_2", why: "I can"}
];
```