feat: adding manual pagination for server side (#1820)

angular-workspace/projects/trimble-oss/modus-angular-components/src/lib/stencil-generated/components.ts

@@ -1103,15 +1103,15 @@ export declare interface ModusSwitch extends Components.ModusSwitch {
 
 
 @ProxyCmp({
-  inputs: ['columnReorder', 'columnResize', 'columns', 'data', 'displayOptions', 'fullWidth', 'hover', 'maxHeight', 'maxWidth', 'pageSizeList', 'pagination', 'rowSelection', 'rowSelectionOptions', 'rowsExpandable', 'showSortIconOnHover', 'sort', 'summaryRow', 'toolbar', 'toolbarOptions'],
+  inputs: ['columnReorder', 'columnResize', 'columns', 'data', 'displayOptions', 'fullWidth', 'hover', 'manualPaginationOptions', 'maxHeight', 'maxWidth', 'pageSizeList', 'pagination', 'rowSelection', 'rowSelectionOptions', 'rowsExpandable', 'showSortIconOnHover', 'sort', 'summaryRow', 'toolbar', 'toolbarOptions'],
   methods: ['getColumnData', 'toggleColumnVisibility']
 })
 @Component({
   selector: 'modus-table',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['columnReorder', 'columnResize', 'columns', 'data', 'displayOptions', 'fullWidth', 'hover', 'maxHeight', 'maxWidth', 'pageSizeList', 'pagination', 'rowSelection', 'rowSelectionOptions', 'rowsExpandable', 'showSortIconOnHover', 'sort', 'summaryRow', 'toolbar', 'toolbarOptions'],
+  inputs: ['columnReorder', 'columnResize', 'columns', 'data', 'displayOptions', 'fullWidth', 'hover', 'manualPaginationOptions', 'maxHeight', 'maxWidth', 'pageSizeList', 'pagination', 'rowSelection', 'rowSelectionOptions', 'rowsExpandable', 'showSortIconOnHover', 'sort', 'summaryRow', 'toolbar', 'toolbarOptions'],
 })
 export class ModusTable {
   protected el: HTMLElement;

stencil-workspace/src/components.d.ts

@@ -14,7 +14,7 @@ import { ModusNavbarButton, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink,
 import { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 import { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 import { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
-import { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTablePaginationState, ModusTableRowActions, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+import { ManualPaginationOptions, ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTablePaginationState, ModusTableRowActions, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
 import { Cell, Column, Table } from "@tanstack/table-core";
 import { ModusTableCellEdited } from "./components/modus-table/parts/modus-table-body";
 import { Tab } from "./components/modus-tabs/modus-tabs";
@@ -29,7 +29,7 @@ export { ModusNavbarButton, ModusNavbarLogoOptions, ModusNavbarProfileMenuLink,
 export { ModusNavbarApp as ModusNavbarApp1 } from "./components/modus-navbar/apps-menu/modus-navbar-apps-menu";
 export { RadioButton } from "./components/modus-radio-group/modus-radio-button";
 export { ModusSideNavigationItemInfo } from "./components/modus-side-navigation/modus-side-navigation.models";
-export { ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTablePaginationState, ModusTableRowActions, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
+export { ManualPaginationOptions, ModusTableCellEditorArgs, ModusTableCellLink, ModusTableCellValueChange, ModusTableColumn, ModusTableColumnOrderState, ModusTableColumnSizingState, ModusTableColumnsVisibilityOptions, ModusTableColumnVisibilityState, ModusTableDisplayOptions, ModusTableExpandedState, ModusTablePaginationState, ModusTableRowActions, ModusTableRowSelectionOptions, ModusTableSortingState, ModusTableToolbarOptions } from "./components/modus-table/models/modus-table.models";
 export { Cell, Column, Table } from "@tanstack/table-core";
 export { ModusTableCellEdited } from "./components/modus-table/parts/modus-table-body";
 export { Tab } from "./components/modus-tabs/modus-tabs";
@@ -1036,6 +1036,10 @@ export namespace Components {
           * (Optional) To enable row hover in table.
          */
         "hover": boolean;
+        /**
+          * (Optional) To set modus-table in manual mode.
+         */
+        "manualPaginationOptions": ManualPaginationOptions;
         /**
           * (Optional) To display a vertical scrollbar when the height is exceeded.
          */
@@ -3069,6 +3073,10 @@ declare namespace LocalJSX {
           * (Optional) To enable row hover in table.
          */
         "hover"?: boolean;
+        /**
+          * (Optional) To set modus-table in manual mode.
+         */
+        "manualPaginationOptions"?: ManualPaginationOptions;
         /**
           * (Optional) To display a vertical scrollbar when the height is exceeded.
          */

stencil-workspace/src/components/modus-table/models/modus-table.models.ts

@@ -42,6 +42,12 @@ export type ModusTableCellEditorArgs = ModusTableCellDropdownEditorArgs | ModusT
 
 export type ModusTableSortingFunction<TData extends RowData> = SortingFnOption<TData> | 'sortForHyperlink';
 
+export interface ManualPaginationOptions {
+  currentPageIndex: number;
+  currentPageSize: number;
+  pageCount: number;
+  totalRecords: number;
+}
 export interface ModusTableColumn<TData extends RowData, TValue = unknown> {
   header: string;
   accessorKey: string;

stencil-workspace/src/components/modus-table/modus-table.core.tsx

@@ -32,6 +32,8 @@ export interface TableCoreOptions {
   columnOrder: string[];
   toolbarOptions: ModusTableToolbarOptions | null;
   pageSizeList: number[];
+  manualPagination?: boolean;
+  pageCount?: number;
 
   setExpanded: (updater: Updater<ExpandedState>) => void;
   setSorting: (updater: Updater<SortingState>) => void;
@@ -66,6 +68,8 @@ export default class ModusTableCore {
       setColumnSizingInfo,
       setColumnVisibility,
       setColumnOrder,
+      manualPagination,
+      pageCount
     } = tableOptions;
     const { multiple, subRowSelection } = rowSelectionOptions;
     const options: TableOptionsResolved<unknown> = {
@@ -112,6 +116,10 @@ export default class ModusTableCore {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       onStateChange: () => {},
       renderFallbackValue: null,
+      ...( manualPagination && pageCount && { 
+        manualPagination,
+        pageCount
+      })
     };
     this.tableCore = createTable(options);
   }

stencil-workspace/src/components/modus-table/modus-table.e2e.ts

@@ -17,6 +17,13 @@ const MockColumns = [
   },
 ];
 
+const MockManualPagination = {
+  currentPageIndex: 2, 
+  currentPageSize: 10, 
+  pageCount: 10,
+  totalRecords: 100
+}
+
 const MockData = [
   {
     mockColumnOne: 'Mock Data One 1',
@@ -262,6 +269,38 @@ describe('modus-table', () => {
     expect(paginationContainer).not.toBeNull();
   });
 
+  it('Render manual pagination', async () => {
+    page = await newE2EPage();
+    await page.setContent('<modus-table />');
+
+    const component = await page.find('modus-table');
+
+    component.setProperty('columns', MockColumns);
+    component.setProperty('manualPaginationOptions', {});
+    component.setProperty('data', MockData);
+    component.setProperty('pagination', false);
+
+    await page.waitForChanges();
+    component.setProperty('pagination', true);
+    await page.waitForChanges();
+    component.setProperty('manualPaginationOptions', MockManualPagination);
+    await page.waitForChanges();
+    component.setProperty('pageSizeList', [5, 10, 50]);
+    await page.waitForChanges();
+
+    const pagination = await page.find(`modus-table >>> modus-pagination`)
+    const paginationContainer = await page.find('modus-table >>> .pagination-and-count > .total-count');
+    await page.waitForChanges();
+
+    expect(await pagination.getAttribute('active-page')).toBeTruthy();
+    expect(await pagination.getAttribute('max-page')).toBeTruthy();
+    expect(await pagination.getAttribute('active-page')).toBe(`${MockManualPagination.currentPageIndex}`);
+    expect(await pagination.getAttribute('max-page')).toBe(`${MockManualPagination.pageCount}`);
+
+    expect(paginationContainer).not.toBeNull();
+    expect(paginationContainer.textContent).toContain('Showing result11-20of100');
+
+  });
   it('Display page view when pagination is enabled', async () => {
     page = await newE2EPage();
     await page.setContent('<modus-table />');
@@ -459,12 +498,12 @@ describe('modus-table', () => {
     linkElement.click();
     await page.waitForChanges();
 
-    //expect(cellLinkClickEvent).toHaveReceivedEventDetail(emailData);
+    expect(cellLinkClickEvent).toHaveReceivedEventDetail(emailData);
 
     linkElement.focus();
     await page.keyboard.press('Enter');
     await page.waitForChanges();
-
+    
     expect(cellLinkClickEvent).toHaveReceivedEventDetail(emailData);
   });
 

stencil-workspace/src/components/modus-table/modus-table.tsx

@@ -55,9 +55,10 @@ import {
   ModusTableDisplayOptions,
   ModusTableToolbarOptions,
   ModusTableRowSelectionOptions,
+  ManualPaginationOptions,
 } from './models/modus-table.models';
 import { ModusTableColumnDropIndicator, ModusTableColumnDragItem } from './parts/columnHeader/modus-table-column-drag-item';
-import { ModusTablePagination } from './parts/modus-table-pagination';
+import { ModusTablePagination, ModusTablePaginationProps } from './parts/modus-table-pagination';
 import { ModusTableFooter } from './parts/modus-table-footer';
 import { TableHeaderDragDrop } from './utilities/table-header-drag-drop.utility';
 import ModusTableCore from './modus-table.core';
@@ -71,6 +72,7 @@ import { createGuid } from '../../utils/utils';
  * @slot groupLeft - Slot for custom toolbar options added to the left.
  * @slot groupRight - Slot for custom toolbar options added to the right.
  */
+
 @Component({
   tag: 'modus-table',
   styleUrl: 'modus-table.scss',
@@ -144,6 +146,21 @@ export class ModusTable {
   /** (Optional) To display checkbox. */
   @Prop() rowSelection = false;
 
+  /** (Optional) To set modus-table in manual mode. */
+  @Prop() manualPaginationOptions: ManualPaginationOptions;
+  @Watch('manualPaginationOptions') onManualPaginationOptionsChange(
+    newVal: ManualPaginationOptions,
+    oldVal: ManualPaginationOptions,
+  ){
+    if(newVal.pageCount !== oldVal.pageCount ||
+       newVal.currentPageIndex !== oldVal.currentPageIndex ||
+       newVal.currentPageSize  !== oldVal.currentPageSize 
+      ){
+      this.tableCore.setOptions('pageCount', newVal.pageCount)
+      this.manualPaginationOptions = { ...newVal }
+    }
+  }
+
   /** (Optional) To control multiple row selection. */
   @Prop() rowSelectionOptions: ModusTableRowSelectionOptions = {
     multiple: false,
@@ -377,7 +394,10 @@ export class ModusTable {
       rowSelectionOptions: this.rowSelectionOptions,
       columnOrder: this.columnReorder ? this.tableState.columnOrder : [],
       toolbarOptions: this.toolbarOptions,
-
+      ...(this.manualPaginationOptions) && { 
+        manualPagination: true, 
+        pageCount: this.manualPaginationOptions.pageCount,
+      },
       // setData: (updater: Updater<unknown[]>) => this.updateData(updater),
       setExpanded: (updater: Updater<ExpandedState>) => this.updateTableCore(updater, EXPANDED_STATE_KEY, this.rowExpanded),
       setSorting: (updater: Updater<SortingState>) => this.updateTableCore(updater, SORTING_STATE_KEY, this.sortChange),
@@ -551,13 +571,30 @@ export class ModusTable {
   }
 
   renderPagination(table: Table<unknown>): JSX.Element | null {
-    return (
-      this.pagination && (
-        <ModusTablePagination table={table} totalCount={this.data.length} pageSizeList={this.pageSizeList} />
-      )
-    );
+    if (!this.pagination) {
+      return null;
+    }
+
+    let paginationProps : ModusTablePaginationProps = {
+      table,
+      pageSizeList: this.pageSizeList,
+      totalCount: this.data.length ?? 0
+    };
+
+    if (this.manualPaginationOptions) {
+      paginationProps = {
+        ...paginationProps,
+        totalCount: this.manualPaginationOptions.totalRecords ?? 0,
+        isManualPagination: true,
+        currentPageSize: this.manualPaginationOptions.currentPageSize ?? 0,
+        currentPageIndex: this.manualPaginationOptions.currentPageIndex ?? 0,
+      };
+    } 
+
+    return this.pagination && (<ModusTablePagination {...paginationProps} />);
   }
 
+
   render(): void {
     const table = this.tableCore.getTableInstance();
     return (

stencil-workspace/src/components/modus-table/parts/modus-table-pagination.tsx

@@ -5,22 +5,28 @@ import {
 import { Table } from '@tanstack/table-core';
 import { PAGINATION_PAGEVIEW_TEXT, PAGINATION_SUMMARY_TEXT } from '../modus-table.constants';
 
-interface ModusTablePaginationProps {
+export interface ModusTablePaginationProps {
   table: Table<unknown>;
   totalCount: number;
   pageSizeList: number[];
+  isManualPagination?: boolean;
+  currentPageSize?: number;
+  currentPageIndex?: number;
 }
 
 export const ModusTablePagination: FunctionalComponent<ModusTablePaginationProps> = ({
   table,
   totalCount,
   pageSizeList,
+  currentPageSize,
+  currentPageIndex,
+  isManualPagination,
 }) => {
   const optionsList = pageSizeList.map((option) => ({ display: option }));
   const { options, getState, getPageCount, getExpandedRowModel, setPageIndex, setPageSize } = table;
-  const { pageIndex, pageSize } = getState().pagination;
+  const { pageIndex, pageSize: paginationSize } = getState().pagination;
+  const pageSize =  currentPageSize ?? paginationSize;
   const selectedPageSize = optionsList.find((l) => l.display === pageSize);
-
   const handleChange = (event) => {
     const selectedValue = event.detail;
     setPageSize(Number(selectedValue?.display));
@@ -50,10 +56,10 @@ export const ModusTablePagination: FunctionalComponent<ModusTablePaginationProps
               : (pageIndex + 1) * pageSize}
           </span>
           <span>of</span>
-          <span>{options.paginateExpandedRows ? getExpandedRowModel().rows.length : totalCount}</span>{' '}
+          <span>{!isManualPagination && options.paginateExpandedRows ? getExpandedRowModel().rows.length : totalCount}</span>{' '}
         </div>
         <modus-pagination
-          active-page={1}
+          active-page={currentPageIndex ?? 1 }
           max-page={getPageCount()}
           min-page={1}
           onPageChange={(event) => setPageIndex(event.detail - 1)}></modus-pagination>