feat: connected page size select on async table

docs/docusaurus.config.js

@@ -1,7 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const {themes} = require('prism-react-renderer');
+const { themes } = require('prism-react-renderer');
 const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.dracula;
 

docs/src/css/custom.css

@@ -93,19 +93,35 @@ html {
   border: 0 solid var(--border-primary);
 }
 
-blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
   margin: 0;
 }
 
 input,
 select,
 textarea {
   border: 2px solid var(--border-primary);
-  padding: .25rem .5rem;
-  font-size: .875rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
 }
 
-button, input, optgroup, select, textarea {
+button,
+input,
+optgroup,
+select,
+textarea {
   font-family: inherit;
   font-feature-settings: inherit;
   font-variation-settings: inherit;
@@ -117,16 +133,21 @@ button, input, optgroup, select, textarea {
   padding: 0;
 }
 
-button, select {
+button,
+select {
   text-transform: none;
 }
 
-button, [role="button"] {
+button,
+[role='button'] {
   cursor: pointer;
 }
 
- button, [type='button'], [type='reset'], [type='submit'] {
-   -webkit-appearance: button;
-   background-color: transparent;
-   background-image: none;
- }
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}

packages/demo/src/App.svelte

@@ -98,8 +98,10 @@
           { name: 'John', age: 30, disabled: true },
           { name: 'Jane', age: 31, disabled: true }
         ];
-      }
+      },
+      adjustPageSize: async () => {},
     };
+    asyncTable.pageSizes = [10];
     el.appendChild(asyncTable);
   });
 </script>

packages/lib/src/async-table/async-table.wc.svelte

@@ -1,5 +1,5 @@
 <svelte:options
-        customElement={{
+  customElement={{
     tag: 'jp-async-table',
     shadow: 'none'
   }}
@@ -15,17 +15,20 @@
   export let showArrangingColumns = true;
   export let showExport = true;
   export let headers: TableHeader[] = [];
+  export let pageSizes: number[];
   export let sort: TableSort;
   export let service: TableService;
   export let getData = async () => {
-    const data = await service.get(sort);
+    const data = await service.get(sort, pageSize);
 
     rows = data.rows;
     hasMore = data.hasMore;
 
     loading = false;
   };
 
+  let formattedPageSizes = JSON.stringify(pageSizes.map((s) => ({ label: s, value: s })));
+  let pageSize = pageSizes[0];
   let loading = true;
   let hasMore = false;
   let rows: any[] = [];
@@ -75,7 +78,10 @@
       direction: sort?.key === header.key ? (sort.direction === 'asc' ? 'desc' : 'asc') : 'asc'
     };
 
-    const data = await service.get(sort);
+    const [data] = await Promise.all([
+      service.get(sort, pageSize),
+      service.adjustSort(sort)
+    ]);
 
     rows = data.rows;
     hasMore = data.hasMore;
@@ -86,7 +92,7 @@
   async function loadMore() {
     loading = true;
 
-    const data = await service.loadMore(sort);
+    const data = await service.loadMore(sort, pageSize);
 
     rows = [...rows, ...data.rows];
     hasMore = data.hasMore;
@@ -103,28 +109,39 @@
     });
   }
 
+  async function updatePageSize(event: {detail: number}) {
+    pageSize = event.detail;
+    
+    await Promise.all([
+      getData(),
+      service.adjustPageSize(pageSize)
+    ]);
+  }
+
   async function exportData() {
     exportLoading = true;
 
     const data = await service.export();
-    const resolved = await Promise.all(data.map(async (row, index) => {
-      const columns = await Promise.all(
-              activeHeaders.map(header => handleColumn(header, row, index))
-      );
-
-      return columns.map(col => `"${col || ''}"`).join(',');
-    }));
+    const resolved = await Promise.all(
+      data.map(async (row, index) => {
+        const columns = await Promise.all(
+          activeHeaders.map((header) => handleColumn(header, row, index))
+        );
+
+        return columns.map((col) => `"${col || ''}"`).join(',');
+      })
+    );
     const blob = new Blob(
-            [
-              [
-                activeHeaders
-                        .map((h) => h.label)
-                        .map((label) => `"${label}"`)
-                        .join(','),
-                ...resolved
-              ].join('\n')
-            ],
-            { type: 'text/csv' }
+      [
+        [
+          activeHeaders
+            .map((h) => h.label)
+            .map((label) => `"${label}"`)
+            .join(','),
+          ...resolved
+        ].join('\n')
+      ],
+      { type: 'text/csv' }
     );
     const link = document.createElement('a');
 
@@ -164,11 +181,13 @@
       columnOrder.splice(currentIndex, 1);
       columnOrder.splice(Number(targetIndex), 0, draggedColumn);
 
-      activeHeaders = headers.filter((it) => !it.disabled).sort((a, b) => {
-        const aIndex = columnOrder.indexOf(a.key);
-        const bIndex = columnOrder.indexOf(b.key);
-        return aIndex - bIndex;
-      });
+      activeHeaders = headers
+        .filter((it) => !it.disabled)
+        .sort((a, b) => {
+          const aIndex = columnOrder.indexOf(a.key);
+          const bIndex = columnOrder.indexOf(b.key);
+          return aIndex - bIndex;
+        });
     }
   }
 
@@ -186,18 +205,22 @@
             Arrange Columns
           </button>
         {:else}
-          <button type="button" on:click={finishArrangingColumns} class="table-button settings-button">
+          <button
+            type="button"
+            on:click={finishArrangingColumns}
+            class="table-button settings-button"
+          >
             Finish Arranging
           </button>
         {/if}
       {/if}
       {#if showExport}
         &nbsp;
         <button
-                type="button"
-                class="table-button settings-button"
-                on:click={exportData}
-                class:loading={exportLoading}>Export</button
+          type="button"
+          class="table-button settings-button"
+          on:click={exportData}
+          class:loading={exportLoading}>Export</button
         >
       {/if}
     </div>
@@ -209,13 +232,13 @@
         <tr>
           {#each activeHeaders as header, index}
             <th
-                    class:sortable={header.sortable}
-                    on:click={() => adjustSort(header)}
-                    on:drop={drop}
-                    on:dragover={dragover}
-                    data-index={index}
+              class:sortable={header.sortable}
+              on:click={() => adjustSort(header)}
+              on:drop={drop}
+              on:dragover={dragover}
+              data-index={index}
             >
-              <span draggable="true"  on:dragstart={(e) => dragstart(e, header)}>
+              <span draggable="true" tabindex="-1" role="button" aria-label="Drag handle" on:dragstart={(e) => dragstart(e, header)}>
                 {@html header.label}
               </span>
 
@@ -254,6 +277,9 @@
         Load More
       {/if}
     </button>
+    {#if pageSizes.length > 1}
+      <jp-select label="Page Size" options={formattedPageSizes} value={pageSize} on:value={updatePageSize}></jp-select>
+    {/if}
   </div>
 </div>
 
@@ -300,6 +326,8 @@
 
   .table-actions {
     padding: 1rem;
+    display: flex;
+    justify-content: space-between;
   }
 
   .table-header {

packages/lib/src/index.css

@@ -18,7 +18,7 @@ button {
 
 button:disabled,
 button[disabled] {
-  cursor: unset
+  cursor: unset;
 }
 
 :root {

packages/lib/src/tree/structure.ts

@@ -1,20 +1,19 @@
 export function jpTreeStructure(tree: Element): Object {
-  if(tree.tagName !== 'JP-TREE' || !tree.hasAttribute('value'))
-    return ''
+  if (tree.tagName !== 'JP-TREE' || !tree.hasAttribute('value')) return '';
 
-  let structure = {}
-  
-  structure[tree.getAttribute('value')] = []
+  let structure = {};
+
+  structure[tree.getAttribute('value')] = [];
 
   for (const child of tree.children) {
-    if(!child.hasAttribute('value')) continue;
+    if (!child.hasAttribute('value')) continue;
 
-    if(child.tagName == 'JP-NODE'){
-      structure[tree.getAttribute('value')].push(child.getAttribute('value'))
+    if (child.tagName == 'JP-NODE') {
+      structure[tree.getAttribute('value')].push(child.getAttribute('value'));
     }
-    if(child.tagName == 'JP-TREE'){
-      structure[tree.getAttribute('value')].push(jpTreeStructure(child))
+    if (child.tagName == 'JP-TREE') {
+      structure[tree.getAttribute('value')].push(jpTreeStructure(child));
     }
   }
-  return structure
-}
+  return structure;
+}

packages/lib/src/types/search.service.ts

@@ -1,5 +1,11 @@
 export default interface SearchService {
-  search: (str: string) => Promise<Array<{ label?: string; value: string; selected?: boolean; disabled?: boolean }>>;
-  loadMore: (str: string) => Promise<Array<{ label?: string; value: string; selected?: boolean; disabled?: boolean }>>;
-  getSingle: (value: string) => Promise<{ label?: string; value: string; selected?: boolean; disabled?: boolean }>;
+  search: (
+    str: string
+  ) => Promise<Array<{ label?: string; value: string; selected?: boolean; disabled?: boolean }>>;
+  loadMore: (
+    str: string
+  ) => Promise<Array<{ label?: string; value: string; selected?: boolean; disabled?: boolean }>>;
+  getSingle: (
+    value: string
+  ) => Promise<{ label?: string; value: string; selected?: boolean; disabled?: boolean }>;
 }

packages/lib/src/types/table.service.ts

@@ -2,8 +2,10 @@ import type { TableHeader } from './table-header.interface';
 import type { TableSort } from './table-sort.interface';
 
 export interface TableService<T = any> {
-  get: (sort?: TableSort) => Promise<{ hasMore: boolean; rows: T[] }>;
-  loadMore: (sort?: TableSort) => Promise<{ hasMore: boolean; rows: T[] }>;
+  get: (sort?: TableSort, pageSize?: number) => Promise<{ hasMore: boolean; rows: T[] }>;
+  loadMore: (sort?: TableSort, pageSize?: number) => Promise<{ hasMore: boolean; rows: T[] }>;
   arrangeColumns?: (headers: TableHeader[]) => TableHeader[];
+  adjustPageSize?: (pageSize: number) => Promise<void>;
+  adjustSort?: (sort: TableSort) => Promise<void>;
   export?: () => Promise<T[]>;
 }

packages/lib/src/utils/dateFormatter.ts

@@ -49,6 +49,6 @@ export function formatReturnDate(date: Date, format: string, formatter?: (date:
     case 'iso':
       return date.toISOString();
     case 'isoDate':
-      return date.toISOString().split('T')[0]
+      return date.toISOString().split('T')[0];
   }
 }