'Customizing mat paginator

I am trying to build a list page which has large number of data items so I used mat-paginator for simplicity in reading. I tried to customize styles in mat-paginator but I couldn't do much. Right now my paginator looks like this.enter image description here I want to make it look like this. enter image description here

My current CSS code for paginator is:

.mat-paginator-page-size{
      display: none !important;
}
.mat-paginator-range-label{
      display: none !important;
}

.mat-icon-button{
      border-radius: none;
      background-color: #00a6ff;
      height: 40px;
      width: 40px;
}
angularpagination


Solution 1:[1]

you can give by using this class

.mat-icon-button { border: solid blue !important; border-radius: 5px !important; }

and put this in the main CSS file in the case of Angular Style.css is the main CSS file.

Solution 2:[2]

It is possible to customize the mat-paginator within the component HTML file.

Take a look at the following example;

  <mat-paginator #paginator
    [length]=result.count
    [pageSize]=result.pageSize
    [pageSizeOptions]="[5, 10, 20, 50, 100]"
    [pageIndex]=result.page
    (page)="getNextPage($event)"
    [showFirstLastButtons]="true">
  </mat-paginator>

We can provide page size chunks, show specific pagination buttons and so on.

You can read more about its API documentation via this link https://material.angular.io/components/paginator/api

There's also configurable pagination example on Stackblitz here that you can experiment with https://stackblitz.com/angular/ngdejmepgbr?file=app/paginator-configurable-example.html

Solution 3:[3]

you can create your own components inside a mat-paginator

you can inspire by this code

  ngAfterViewInit(): void {
  // get element
  const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-range-actions");
  if (!!list[0]) {
    // add what you need
    const div = this.renderer.createElement("div");
    this.renderer.addClass(div, "mat-paginator-page-info");
    list[0].appendChild(div);
 }
}

...

  ngAfterViewChecked() {
    // update added elements if needed
    const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-page-info");
    if (!!list[0]) list[0].innerHTML = `Page ${this.currentPage.toString()} of ${this.totalPages.toString()}`;
  }

You can rearrange its order by using order: N in css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Iftakhar Ahmed
Solution 2 Ali Celebi
Solution 3 Dominik Januvka

Related Questions