Pagination

Use pagination model to view large data sets in small chunks for faster loading and navigation.

@Component({
   selector: 'my-component',
   template: `
      <q-grid [rows]="rows$ | async" [model]="gridModel">
         <q-grid-columns generation="deep"></q-grid-columns>
      </q-grid>
      `
})
export class MyComponent implements AfterViewInit {
   rows$ = this.dataService.getRows();
   gridModel = this.qgrid.model();

   constructor(
      private dataService: MyDataService,
      private qgrid: Grid
   ) {
   }

   ngAfterViewInit() {
      this.gridModel.pagination({
         size: 10;
         sizeList: [5, 10, 15];
      });
   }
}
How to set a page number?

Use current property of pagination model.

const { pagination } = model;
pagination({
   current: 1
});
How to reset pagination on sorting?

Use resetTriggers property of pagination model.

const { pagination } = model;
pagination({
   resetTriggers: {
      ...pagination().resetTriggers,
      sort: ['by']
   }
});
Suggested Links