NGX Datatable - Resetting Offset on with Function

Question

I'm filtering my table with an input and am wanting to reset the table to the first page whenever the filter is updated. Right now the table shows and the filtering works but the table page doesn't reset.

Here is what I have to far:

Table:

 <ngx-datatable
  class='material'
  [rows]='rows'
  [columns]="columns"
  [columnMode]="'standard'"
  [headerHeight]="75"
  [footerHeight]="50"
  [scrollbarH]="true"
  [rowHeight]="'auto'"
  [limit]="5"
  [selectionType]="'multiClick'"
  [offset]="tableOffset"
  >
</ngx-datatable>

Relevant TS:

tableOffset = 0;

updateFilter(event, seachCriteria) {

  // Filtering Process...

  // Whenever the filter changes I want to go back to the first page
  this.tableOffset = 0;
}

Any pointers to where I'm going wrong?

EDIT So I tried setting the offset to 1 and found that resetting with this.tableOffset = 0; did work but whenever I used the arrows to navigate to a different page it will prevent that reset from taking place.

Is this a bug or am I missing something?

Vesicate

Answer 1

You have to handle the page event as well.

view

<ngx-datatable
    ...
    [offset]="tableOffset"
    (page)="onChange($event)">
</ngx-datatable>

component

updateFilter(event, seachCriteria) {
    ...
    this.tableOffset = 0;
}

onChange(event: any): void {
    this.tableOffset = event.offset;
}

Milesmilesian

Answer 2

<ngx-datatable
    #table
    class="material"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [limit]="10"
    [rows]="rows"
  >
  </ngx-datatable>

ts file

import { DatatableComponent } from '@swimlane/ngx-datatable';; @ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;

updateFilter() {
// update the rows
this.rows = [...this.rows];
// Whenever the filter changes, always go back to the first page
this.table.offset = 0; }

Hamnet

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. – Okra