Paginator

Component for pagination controls

Component to provide navigation between paged information with customizable page size options.

Import

import { MatPaginator } from '@angular/material/paginator';
import { MatPaginatorModule } from '@angular/material/paginator';

Basic Usage

import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';

export class TableComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  
  dataSource = new MatTableDataSource(data);

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
}

<table mat-table [dataSource]="dataSource">
  <!-- columns -->
</table>

<mat-paginator [length]="100"
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

API Reference

MatPaginator

Selector: mat-paginator

Exported as: matPaginator

Properties

Name	Type	Description
@Input() color	ThemePalette	Theme color
@Input() pageIndex	number	Zero-based page index. Default: 0
@Input() length	number	Total number of items. Default: 0
@Input() pageSize	number	Number of items per page. Default: 50
@Input() pageSizeOptions	number[]	Page size options. Default: []
@Input() hidePageSize	boolean	Hide page size selector
@Input() showFirstLastButtons	boolean	Show first/last page buttons
@Input() disabled	boolean	Disable the paginator
@Input() selectConfig	MatPaginatorSelectConfig	Config for page size select
@Output() page	EventEmitter<PageEvent>	Event when page changes
initialized	Observable<void>	Emits when initialized

Methods

Name	Description
nextPage(): void	Advances to next page
previousPage(): void	Goes to previous page
firstPage(): void	Goes to first page
lastPage(): void	Goes to last page
hasNextPage(): boolean	Whether there is a next page
hasPreviousPage(): boolean	Whether there is a previous page
getNumberOfPages(): number	Calculates number of pages

Examples

With Table

export class TableComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  
  displayedColumns = ['name', 'email', 'age'];
  dataSource = new MatTableDataSource([
    // ... data
  ]);

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }
}

<table mat-table [dataSource]="dataSource">
  <!-- column definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

<mat-paginator [length]="dataSource.data.length"
               [pageSize]="10"
               [pageSizeOptions]="[5, 10, 25, 50]">
</mat-paginator>

Page Event

export class PaginatorComponent {
  onPageChange(event: PageEvent) {
    console.log('Page index:', event.pageIndex);
    console.log('Page size:', event.pageSize);
    console.log('Previous index:', event.previousPageIndex);
    console.log('Length:', event.length);
  }
}

<mat-paginator (page)="onPageChange($event)"
               [length]="100"
               [pageSize]="10">
</mat-paginator>

Server-Side Pagination

export class ServerPaginationComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  
  dataSource = new MatTableDataSource<User>();
  totalItems = 0;

  ngAfterViewInit() {
    this.paginator.page.subscribe(() => this.loadData());
    this.loadData();
  }

  loadData() {
    const pageIndex = this.paginator.pageIndex;
    const pageSize = this.paginator.pageSize;
    
    this.apiService.getUsers(pageIndex, pageSize).subscribe(response => {
      this.dataSource.data = response.items;
      this.totalItems = response.total;
    });
  }
}

<table mat-table [dataSource]="dataSource">
  <!-- columns -->
</table>

<mat-paginator [length]="totalItems"
               [pageSize]="10"
               [pageSizeOptions]="[10, 25, 50, 100]">
</mat-paginator>

Hide Page Size

<mat-paginator [hidePageSize]="true"
               [length]="100"
               [pageSize]="10">
</mat-paginator>

Show First/Last Buttons

<mat-paginator [showFirstLastButtons]="true"
               [length]="100"
               [pageSize]="10">
</mat-paginator>

Programmatic Navigation

export class Component {
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  goToFirstPage() {
    this.paginator.firstPage();
  }

  goToLastPage() {
    this.paginator.lastPage();
  }

  goToPage(pageIndex: number) {
    this.paginator.pageIndex = pageIndex;
    this.dataSource.paginator = this.paginator;
  }
}

Custom Page Size Selector

<mat-paginator [selectConfig]="{
                 disableOptionCentering: true,
                 panelClass: 'custom-select-panel'
               }"
               [pageSizeOptions]="[10, 25, 50]">
</mat-paginator>

Internationalization

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

export class CustomPaginatorIntl extends MatPaginatorIntl {
  override itemsPerPageLabel = 'Items por página';
  override nextPageLabel = 'Siguiente';
  override previousPageLabel = 'Anterior';
  override firstPageLabel = 'Primera página';
  override lastPageLabel = 'Última página';

  override getRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length === 0 || pageSize === 0) {
      return `0 de ${length}`;
    }
    const startIndex = page * pageSize;
    const endIndex = Math.min(startIndex + pageSize, length);
    return `${startIndex + 1} - ${endIndex} de ${length}`;
  };
}

@NgModule({
  providers: [
    { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }
  ]
})
export class AppModule {}

With Sorting

export class TableComponent implements AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  
  dataSource = new MatTableDataSource(data);

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

<table mat-table [dataSource]="dataSource" matSort>
  <!-- sortable columns -->
</table>

<mat-paginator [pageSize]="10"
               [pageSizeOptions]="[5, 10, 25]">
</mat-paginator>

Styling

mat-paginator {
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
}

/* Customize select dropdown */
.mat-mdc-paginator-page-size-select {
  margin: 0 8px;
}

Accessibility

• Has role="group"
• Navigation buttons have descriptive labels
• Page size selector is keyboard accessible
• Current page range announced to screen readers

Configuration

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

@NgModule({
  providers: [
    {
      provide: MAT_PAGINATOR_DEFAULT_OPTIONS,
      useValue: {
        pageSize: 25,
        pageSizeOptions: [10, 25, 50, 100],
        showFirstLastButtons: true,
        formFieldAppearance: 'outline'
      }
    }
  ]
})
export class AppModule {}

Types

interface PageEvent {
  pageIndex: number;
  previousPageIndex?: number;
  pageSize: number;
  length: number;
}

interface MatPaginatorSelectConfig {
  disableOptionCentering?: boolean;
  panelClass?: string | string[] | Set<string> | {[key: string]: any};
}

Best Practices

• Always set length to total items count
• Provide reasonable page size options
• Use with MatTableDataSource for automatic pagination
• Show first/last buttons for large datasets
• Consider server-side pagination for very large datasets

Related Components

• Table - Data table
• Sort - Table sorting