Is it possible to implement pagination on a material table in Angular 10 without relying on the MatTableDataSource component?

Question

Is it possible to implement pagination on a material table in Angular 10 without relying on the MatTableDataSource component?

How can I implement material pagination on a table without using MatTableDataSource? Most tutorials and examples I find online recommend the use of MatTableDataSource, but I'm unsure of how to actually utilize it. I am fetching data from a database table to populate my material table.

users: any[] = [];
displayData = [];
dataSource = [];
@ViewChild(MatPaginator) paginator: MatPaginator;

constructor(
    private authService: AuthService,
    private userService: UserService,
    private router: Router,
    private httpClient: HttpClient
  ) {}

  ngOnInit(): void {
    this._getUsers();
    
  }

private _getUsers() {
    this.userService;
    this.userService.getUsers().subscribe((data) => {
      this.users = data.users;
      this.displayData = data.users;      
      this.dataSource = this.users;
      
    });

<div class="users">
  <app-extend-table #usersTable
                       [header]="header"
                       [data]="displayData"
                       [columns]="columns">
  </app-extend-table>
  <!-- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> -->
  
</div>

angular typescript

Answer 1

Answer №1

To display the corresponding items in a table, you should include

[length]="users?.length"

and listen for the output event of page from mat-pagination.

Here is an example:

<mat-paginator (page)="pageChanged($event)" [length]="users?.length" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

In the TypeScript file:

 // Import PageEvent from Angular Material pagination
pageChanged(event: PageEvent) {
const users = [...this.users];
   this.dataSource = users.splice((event.pageIndex - 1) * event.pageSize, event.pageSize );
}

For a working example, see: https://stackblitz.com/edit/angular-adrxts?file=app/table-pagination-example.ts

Answer 2

To display the corresponding items in a table, you should include

[length]="users?.length"

and listen for the output event of page from mat-pagination.

Here is an example:

<mat-paginator (page)="pageChanged($event)" [length]="users?.length" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

In the TypeScript file:

 // Import PageEvent from Angular Material pagination
pageChanged(event: PageEvent) {
const users = [...this.users];
   this.dataSource = users.splice((event.pageIndex - 1) * event.pageSize, event.pageSize );
}

For a working example, see: https://stackblitz.com/edit/angular-adrxts?file=app/table-pagination-example.ts

Answer 3

Answer №2

Here's a snippet of an update on the TS file

import { PageEvent } from '@angular/material/paginator';

@ViewChild(PageEvent, { static: false }) paginator: PageEvent;
displayData = [];
dataSource = [];
public list = new MatTableDataSource();
pageEvent: PageEvent;

constructor(
    private userService: UserService,
    private router: Router,
    private httpClient: HttpClient
  ) {}

  ngOnInit(): void {
    this._getUsers();    
  }

private _getUsers() {
    this.userService;
    this.userService.getUsers().subscribe((data) => {
      this.users = data.users;
      this.displayData = data.users;      
      this.dataSource = this.users;      
    });

pageChanged(event: PageEvent) {
    const list = this.users    
    console.log('list: ' + list);
    this.dataSource = list.splice((event.pageIndex - 1) * event.pageSize, event.pageSize);
    console.log(this.dataSource)
  }

Snippet from the HTML file

<div class="users">
  <app-extend-table #usersTable
                       [header]="header"
                       [data]="displayData"
                       [columns]="columns">
  </app-extend-table>
<!-- "users?.length" -->
  <mat-paginator (page)="pageChanged($event)"
               [length]=  "2"             
               [pageSizeOptions]="[2, 4, 6]"
               showFirstLastButtons>

</mat-paginator>
  
</div>

Component app-extend-table

ngAfterViewInit() {
    this.tableData.sort = this.sort;
  }

  ngOnInit(): void {
   
    this.columns.forEach((col) => {
      let pair = Object.entries(col);
      this.columnKeyValuePairs.push(pair[0]);
      this.displayedColumns.push(pair[0][0]);
    });
  }

  ngOnChanges(old) {
    if (old.data) {
      this.tableData = new MatTableDataSource<any>(old.data.currentValue);
      this.tableData.sort = this.sort;
    }
  }

Answer 4

Here's a snippet of an update on the TS file

import { PageEvent } from '@angular/material/paginator';

@ViewChild(PageEvent, { static: false }) paginator: PageEvent;
displayData = [];
dataSource = [];
public list = new MatTableDataSource();
pageEvent: PageEvent;

constructor(
    private userService: UserService,
    private router: Router,
    private httpClient: HttpClient
  ) {}

  ngOnInit(): void {
    this._getUsers();    
  }

private _getUsers() {
    this.userService;
    this.userService.getUsers().subscribe((data) => {
      this.users = data.users;
      this.displayData = data.users;      
      this.dataSource = this.users;      
    });

pageChanged(event: PageEvent) {
    const list = this.users    
    console.log('list: ' + list);
    this.dataSource = list.splice((event.pageIndex - 1) * event.pageSize, event.pageSize);
    console.log(this.dataSource)
  }

Snippet from the HTML file

<div class="users">
  <app-extend-table #usersTable
                       [header]="header"
                       [data]="displayData"
                       [columns]="columns">
  </app-extend-table>
<!-- "users?.length" -->
  <mat-paginator (page)="pageChanged($event)"
               [length]=  "2"             
               [pageSizeOptions]="[2, 4, 6]"
               showFirstLastButtons>

</mat-paginator>
  
</div>

Component app-extend-table

ngAfterViewInit() {
    this.tableData.sort = this.sort;
  }

  ngOnInit(): void {
   
    this.columns.forEach((col) => {
      let pair = Object.entries(col);
      this.columnKeyValuePairs.push(pair[0]);
      this.displayedColumns.push(pair[0][0]);
    });
  }

  ngOnChanges(old) {
    if (old.data) {
      this.tableData = new MatTableDataSource<any>(old.data.currentValue);
      this.tableData.sort = this.sort;
    }
  }

Answer 5

Answer №3

Having encountered the same scenario, I tested @Ashot Aleqsanyan's solution and discovered a flaw. When using

this.dataSource = users.splice((event.pageIndex - 1) * event.pageSize, event.pageSize );

, it displays the same number of rows as the pageSize even on the last pageIndex.

For instance: if the selected pageSize is 5 and there are 6 data rows, ideally the first page should display 5 rows and the last page should show the remaining 1 row. However, it erroneously shows all 5 rows by repeating previous rows (2-5).

The issue was resolved by implementing

this.dataSource = new MatTableDataSource(rows.splice((event.pageIndex * event.pageSize), event.pageSize ));

.

Here is an operational example: https://stackblitz.com/edit/angular-adrxts-7npzwj?file=app%2Ftable-pagination-example.ts

Answer 6

Having encountered the same scenario, I tested @Ashot Aleqsanyan's solution and discovered a flaw. When using

this.dataSource = users.splice((event.pageIndex - 1) * event.pageSize, event.pageSize );

, it displays the same number of rows as the pageSize even on the last pageIndex.

For instance: if the selected pageSize is 5 and there are 6 data rows, ideally the first page should display 5 rows and the last page should show the remaining 1 row. However, it erroneously shows all 5 rows by repeating previous rows (2-5).

The issue was resolved by implementing

this.dataSource = new MatTableDataSource(rows.splice((event.pageIndex * event.pageSize), event.pageSize ));

.

Here is an operational example: https://stackblitz.com/edit/angular-adrxts-7npzwj?file=app%2Ftable-pagination-example.ts

Is it possible to implement pagination on a material table in Angular 10 without relying on the MatTableDataSource component?

Answer №1

Answer №2

Answer №3

Similar questions

Issue encountered during Angular upgrade from version 2 to 4 due to a mismatch in node versions

Declare the variable as a number, yet unexpectedly receive a NaN in the output

Difficulty with setting up Typescript in Visual Studio Code on MacOS Catalina

Error in Angular FormGroup validation observed while conducting Cypress test

Testing Angular combineLatest with Jest

App that uses Angular 2 for real-time data refreshing

Tips for testing an Angular service method that returns a JSON object

Issues with Angular2's CUSTOM_ELEMENTS_SCHEMA Syntax

Customizing table header sort icons in PrimeNG 15.4+: A step-by-step guide

The services generated by OpenAPI Generator typescript-angular are experiencing failures

Encountering issue 404 in Tour of Heroes tutorial due to "angular-in-memory-web-api" integration

What is the process for incorporating a third-party library into Angular 6?

Launching a new tab with a specific URL using React

The type 'Dispatch<any>' cannot be assigned to the type '() => null'. Error code: ts(2322)

Issue with ngx-bootstrap custom typeahead feature malfunctioning

Idiosyncratic TypeScript behavior: Extending a class with comparable namespace structure

determine the appropriate month for the calendar month component based on the route selected

The React Native Flatlist encountered an error due to a mismatch in function overloads

Resetting the value of a radio button input option to null using Angular2 ngModel

What is the reason behind the absence of a hide/show column feature in the Kendo Grid for Angular?