Angular 6 Material table Server and Client side pagination

Question

I'd like to ask for some help. I have to make a generic angular material data table, that gets its data from a Jira web service. My problem is that for some cases I'll have to do the pagination on the client site and for some cases, I'll have to do it on Jira because the maximum result that it can return is set to 1000 elements.

The reason why I'll have to do pagination on the client-side is that in many cases a chart is embedded next to the data table, what'll have to work with all available elements, not just the ones that are visible on the material table.

What I'd like to avoid is to have more parameters that check if either I'll have to use client/server-side pagination.

The related code:

import {
  Component,
  Input,
  ViewChild,
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef} from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, MatSlideToggle } from '@angular/material';
import { TableService } from './table.service';
import { merge } from 'rxjs';

@Component({
  selector: 'app-table-component',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableComponent implements AfterViewInit {

  @Input() dataTypes: any[];
  @Input() columnsToDisplay: string[];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatSlideToggle) toggle: MatSlideToggle;
  private dataSource: any = new MatTableDataSource();
  private currentPage;
  public selectedTab: any;
  public resultsLength: number;


  constructor(private service: TableService, private ref: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.service.changeFilter({
      previousPageIndex: 0,
      pageIndex: this.paginator._pageIndex,
      pageSize: 5,
      length: this.paginator._length,
      active: this.sort.active,
      direction: 'asc',
      checked: false
    });
    merge(this.paginator.page, this.sort.sortChange, this.toggle.change).subscribe(res => {
      this.currentPage = this.paginator.pageIndex;
      this.service.changeFilter(res);
    })

    this.service.dataChanged$.subscribe(res => {
      this.dataSource.paginator = this.paginator;
      this.dataSource.data = res.tickets;
      this.dataSource.paginator.pageIndex = this.currentPage;
      this.dataSource.paginator.length = res.results;  
  }

}

What this basically does is that on any event change (sorting, paging and on a toggle-switch) an HTTP request is sent to the Jira backend. In most cases, the maximum result will be 10-20 results, but I have a screen where I'll have to fetch 1000-3000 results. In the latter case, server-side pagination is the correct approach I know, but if the results are below reasonable number, I'd like to use client-side pagination, again because the Chart uses the data from the material table.

How should I approach this problem, without adding another @Input to the table component?

Thank you guys in advance!

Edit Removed timeouts from code to avoid confusion

Angular 6 Material table Server and Client side pagination

0 Answers