Table rows hiding after customizing pagination

[anuj9196]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
On customizing the pagination component, the rows are hidden. The component file is

<ngx-datatable
          #myTable
          class="bootstrap"
          style="width: 100%"
          [selectionType]="SelectionType.checkbox"
          [headerHeight]="50"
          [footerHeight]="50"
          [rowHeight]="50"
          [rows]="rows"
          (select)="onRowSelect($event)"
        >
          <ngx-datatable-column
            [width]="30"
            [sortable]="false"
            [canAutoResize]="false"
            [draggable]="false"
            [resizeable]="false"
          >
            <ng-template
              ngx-datatable-header-template
              let-value="value"
              let-allRowsSelected="allRowsSelected"
              let-selectFn="selectFn"
            >
              <app-checkbox (selectChange)="selectFn(!allRowsSelected)" [checked]="allRowsSelected"></app-checkbox>
            </ng-template>
            <ng-template
              ngx-datatable-cell-template
              let-value="value"
              let-isSelected="isSelected"
              let-onCheckboxChangeFn="onCheckboxChangeFn"
            >
              <app-checkbox (selectChange)="onCheckboxChangeFn($event)" [checked]="isSelected"></app-checkbox>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Title"></ngx-datatable-column>
          <ngx-datatable-column name="Subject" prop="subject.title"></ngx-datatable-column>

          <ngx-datatable-footer *ngIf="true">
            <ng-template
                let-rowCount="rowCount"
                let-pageSize="pageSize"
                let-selectedCount="selectedCount"
                let-curPage="curPage"
                let-offset="offset"
                ngx-datatable-footer-template
            >
              <div class="card-footer py-0 w-100">
                <div class="d-flex justify-content-end">
                  {{curPage}} {{selectedCount}}
                  <ngb-pagination [page]="curPage + 1" [boundaryLinks]="true" [collectionSize]="pageSize"
                                  [ellipses]="true" [maxSize]="3" aria-label="Default pagination">
                    <ng-template ngbPaginationPrevious>
                      <i class="fas fa-angle-left"></i>
                      <span class="sr-only">Previous</span>
                    </ng-template>
                    <ng-template ngbPaginationNext>
                      <i class="fas fa-angle-right"></i>
                      <span class="sr-only">Next</span>
                    </ng-template>
                    <ng-template ngbPaginationFirst>
                      <i class="fas fa-angles-left"></i>
                      <span class="sr-only">First</span>
                    </ng-template>
                    <ng-template ngbPaginationLast>
                      <i class="fas fa-angles-right"></i>
                      <span class="sr-only">Last</span>
                    </ng-template>
                  </ngb-pagination>
                </div>
              </div>
            </ng-template>
          </ngx-datatable-footer>
        </ngx-datatable>

After removing (pageChange)="myTable.onFooterPage($event)", the rows are displayed, but then not sure how to handle page changes.

Expected behavior

The pagination customization should not hide rows.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 20.1.0

• Angular version: 16.x.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]