mat-paginator change the placing of mat-paginator-range-label

Question

I have a simple mat-table with mat-paginator.

By default design it looks like this:

I would like to change the placing of the range label and put it between the navigation buttons, like this:

Basically, I need to move the div.mat-paginator-range-label an element from the top of this container between button.mat-paginator-navigation-previous and button.mat-paginator-navigation-next.

Any idea of how to do it? Thanks.

score 22 · Accepted Answer · edited Apr 30 '23 at 07:07

Actually because the "mat-paginator-container" uses flexbox you can easily modify the default placing of all the components just with a custom CSS code. For instance for me:

// override material paginator
::ng-deep .mat-paginator {
    .mat-paginator-container {
        justify-content: center;
    }

    // override material paginator page switch
    .mat-paginator-range-label {
        order: 2;
    }

    .mat-paginator-navigation-previous {
        order: 1;
    }
    .mat-paginator-navigation-next {
        order: 3;
    }
}

If you are using the MDC-based Components then you need to add mdc to the class as bellow.

  // override material paginator
  .mat-mdc-paginator-outer-container {
    .mat-mdc-paginator-container {
      justify-content: center;
    }

    // override material paginator page switch
    .mat-mdc-paginator-range-label {
      order: 2;
    }

    .mat-mdc-paginator-navigation-previous {
      order: 1;
    }

    .mat-mdc-paginator-navigation-next {
      order: 3;
    }
  }

score 0 · Answer 2 · answered Feb 14 '19 at 10:08

Ok, I create a solution for how to do it. I use a Renderer2 to do the manipulation with DOM, and it looks like this:

@ViewChild("paginator", {read: ElementRef}) paginator: ElementRef;

ngAfterViewInit(): void {
        this._renderer.insertBefore(
            this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button').parentNode,
            this.paginator.nativeElement.querySelector('.mat-paginator-range-label'),
            this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button'));
    }

In my case this._renderer is an instance of Renderer2, and also the HTML code with ViewChild decorator.

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

If someone knows the better solution how to do it, please let me know. Otherwise, I hope my answer will help you with a similar task. Thanks

mat-paginator change the placing of mat-paginator-range-label

2 Answers2

Linked