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.

Answer 1

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;
    }
  }