@@ -70,33 +70,102 @@ Just include the table as seen in the example below.
7070
7171### Svelte-Component:
7272```
73- <script>
7473 import SvelteGenericCrudTable from "svelte-generic-crud-table";
74+ import GenericTablePager from "svelte-generic-table-pager";
75+ import {onMount} from 'svelte';
76+ import {goto} from "@sapper/app";
77+
78+ const sortStore = [];
79+
80+ let myData = [];
81+
82+ onMount(refresh);
83+
84+ function refresh() {
85+ get().then( (result) => {
86+ myData = result;
87+ }).catch((error) => {
88+ // throw new Error('refresh');
89+ }).finally(() =>{
90+ //--- initialize the component ---!
91+ let elem = document.getElementById('right');
92+ elem.click();
93+ });
94+ }
7595
76- function handleDelete(event) {
96+ function handleCreate(event) {
97+ post({name: "new entry"})
98+ .then(() => {
99+ refresh();
100+ });
77101 }
78102
79- function handleUpdate(event) {
103+
104+ function handleDelete(event) {
105+ delete(event.detail.body.id)
106+ .then(() => {
107+ refresh();
108+ });
80109 }
81110
82- function handleCreate(event) {
111+ function handleUpdate(event) {
112+ update(event.detail.body.id, event.detail.body)
113+ .then(() => {
114+ refresh();
115+ });
83116 }
84117
85- function handleDetails(event) {
118+ function handleDetail(event) {
119+ goto('/project/' + event.detail.body.id);
86120 }
87121
88122 function handleSort(event) {
123+ const column = event.detail.column;
124+ if (sortStore[column] === undefined || sortStore[column] === 'DESC') {
125+ sortStore[column] = 'ASC';
126+ } else {
127+ sortStore[column] = 'DESC';
128+ }
129+
130+ const tableSort = (a, b) => {
131+ var keyA = a[column];
132+ var keyB = b[column];
133+ if (sortStore[column] === 'ASC') {
134+ if (keyA < keyB) return -1;
135+ if (keyA > keyB) return 1;
136+ } else {
137+ if (keyA < keyB) return 1;
138+ if (keyA > keyB) return -1;
139+ }
140+ return 0;
141+ };
142+
143+ myData = myData.sort(tableSort);
89144 }
90145
91- // example object array. This should be your db query result.
92- let myObjectArray = [
93- {id: 1, name: "A_NAME_1", sthg: "A_STHG_1", why: "because"},
94- {id: 2, name: "A_NAME_2", sthg: "A_STHG_2", why: "I can"}
95- ]
146+ const table_config = {
147+ name: 'Awesome',
148+ options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
149+ columns_setting: [
150+ {name: 'id', show: false, edit: true, width: '200px'},
151+ {name: 'job', show: true, edit: true, width: '100px'},
152+ {name: 'name', show: true, edit: true, width: '200px'},
153+ {name: 'private', show: true, edit: false, width: '200px'}
154+ ]
155+ }
96156
97157
98- // GenericTablePager
158+ // GenericTablePager
99159 let page_data = [];
160+ let pager_data;
161+ $: pager_data = myData;
162+
163+ let pager_config = {
164+ name: 'crud-table-pager',
165+ lines: 5,
166+ steps: [1, 2, 5, 10, 20, 50],
167+ width: '320px'
168+ };
100169
101170 function handleNewPage(event) {
102171 page_data = event.detail.body;
@@ -108,25 +177,13 @@ Just include the table as seen in the example below.
108177 <SvelteGenericCrudTable on:delete={handleDelete}
109178 on:update={handleUpdate}
110179 on:create={handleCreate}
111- on:details={handleDetails }
180+ on:details={handleDetail }
112181 on:sort={handleSort}
113- table_config={{
114- name: 'Awesome:',
115- options: ['CREATE', 'EDIT', 'DELETE', 'DETAILS'],
116- columns_setting: [
117- {name: 'id', show: false, edit: true, width: '200px'},
118- {name: 'name', show: true, edit: true, width: '200px'},
119- {name: 'why', show: true, edit: true, width: '200px'},
120- {name: 'sthg', show: true, edit: false, width: '200px'}
121- ]
122- }}
123- table_data={page_data}></SvelteGenericCrudTable>
124-
182+ table_config={table_config}
183+ table_data={page_data}/>
125184 <GenericTablePager on:newpage={handleNewPage}
126- pager_data={myObjectArray}
127- pager_config={{
128- lines: 5
129- }}></GenericTablePager>
185+ pager_data={pager_data}
186+ pager_config={pager_config}></GenericTablePager>
130187</main>
131188
132189```
0 commit comments