fix: add table pager showcasing

npenin · Feb 22, 2025 · 29e10ff · 29e10ff
1 parent 4b5d6c8
commit 29e10ff
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 4 deletions.
diff --git a/packages/vite/test/design-kit/index.html b/packages/vite/test/design-kit/index.html
@@ -1212,12 +1212,29 @@ <h3>Tooltips</h3>
         </kl-tooltip>
     </div>
     <h2>Data tables</h2>
+    <input type="number" min="1" data-bind="{value:controller.table1.config.pageSize}" />
     <input data-bind="{value: controller.table1.config.columns[0].title#debounce:500}" />
     <div class="horizontal">
         <kl-table class="table striped warning" config="controller.table1.config"
-            data="table.localPage(table.localSort(controller.table1.data))"></kl-table>
+            data="table.localPage(table.localSort(controller.table1.data))">
+            <kl-table-pager totalCount="controller.table1.data.length" pageSize="controller.table1.config.pageSize">
+                <div slot="prev" class="button">prev</div>
+                <div slot="next" class="button">next</div>
+                <div slot="first" class="button">first</div>
+                <div slot="last" class="button">last</div>
+            </kl-table-pager>
+        </kl-table>
         <div data-bind="{innerText: controller.table1.data#watch#json}"></div>
     </div>
+
+    <kl-table class="table striped" config="controller.table1.config" data="controller.fakeServer#table:table">
+        <kl-table-pager pageSize="controller.table1.config.pageSize">
+            <div slot="prev" class="button">prev</div>
+            <div slot="next" class="button">next</div>
+            <div slot="first" class="button">first</div>
+            <div slot="last" class="button">last</div>
+        </kl-table-pager>
+    </kl-table>
     <kl-table config="controller.table2.config" data="controller.table2.data"></kl-table>
     <div style="height:300px"></div>
 </div>
diff --git a/packages/vite/test/design-kit/index.ts b/packages/vite/test/design-kit/index.ts
@@ -1,6 +1,6 @@
 import { a, DataBind, e, OutletService, Page, page, RootElement, t } from '@akala/client'
 import template from './index.html?raw'
-import { TableConfig } from '@akala/web-ui';
+import { PageEventArg, SortEventArg, TableConfig } from '@akala/web-ui';
 import { Binding } from '@akala/core';
 
 // type Scope = IScope<{ $authProcessor: Processors.AuthPreProcessor, container: Container<void>, $commandEvents: EventEmitter<Record<string, Event<[unknown]>>> }>;
@@ -144,9 +144,50 @@ export class DesignKit extends Page
         return DesignKit.options.filter(o => !search || o.includes(search));
     }
 
+    async fakeServer(sort: SortEventArg<Person>[], paging: PageEventArg)
+    {
+        let result = await Promise.resolve(data.slice(0));
+
+        if (sort?.length)
+        {
+            result.sort((a, b) =>
+                sort.reduce((previous, current) =>
+                {
+                    if (previous)
+                        return previous;
+
+                    if (current.direction == 'none')
+                        return 0;
+
+                    switch (current.columnIndex)
+                    {
+                        case 0:
+                            if (current.direction == 'asc')
+                                return a.name.localeCompare(b.name);
+                            else
+                                return b.name.localeCompare(a.name);
+                        case 1:
+                            if (current.direction == 'asc')
+                                return a.age - b.age;
+                            else
+                                return b.age - a.age;
+                    }
+                    return 0;
+                }, 0)
+            )
+        }
+
+        if (paging)
+        {
+            result = result.slice(paging.startOffset, paging.pageSize + paging.startOffset);
+        }
+
+        return result;
+    }
+
     table1: { config: TableConfig<Person>, data: Person[] } = {
         config: {
-            pageSize: 10,
+            pageSize: 7,
             sortAscClasses: ['fa-solid', 'fa-sort-asc'],
             sortDescClasses: ['fa-solid', 'fa-sort-desc'],
             columns: [

diff --git a/packages/vite/test/index.ts b/packages/vite/test/index.ts
@@ -7,7 +7,7 @@ import { Processors } from '@akala/commands';
 import { Signup } from './signup/signup.js';
 import { Login } from './login/login.js';
 import Home from './home.js';
-import { Dropdown, Mark, Popover, Table, Tooltip, TooltipComposer, Typeahead } from '@akala/web-ui';
+import { Dropdown, Mark, Popover, Table, TablePager, Tooltip, TooltipComposer, Typeahead } from '@akala/web-ui';
 import { DesignKit } from './design-kit/index.js';
 // import weather from './weather.js';
 
@@ -44,6 +44,7 @@ bootstrapModule.activate(['$rootScope', 'services.$outlet'], async (rootScope: S
     webComponent('kl-dropdown')(Dropdown);
     webComponent('kl-mark')(Mark);
     webComponent('kl-table')(Table);
+    webComponent('kl-table-pager')(TablePager);
 
     serviceModule.register('templateOptions', {
         $rootScope: rootScope, i18n: {