How to fix mat-paginator size

Question

In mat-table for pagination, there is no flexibility for sticky-table . In pagination after move there is no css is apply (as shown in images). I tried to give a background color but it is not working. refer this code: https://stackblitz.com/angular/bbmgqanjelq?file=app%2Ftable-sticky-columns-example.css

.mat-paginator{
    background-color: brown;
    color: gold;
    font-size: 1rem;
}

.mat-header-cell{
    font-size: 1rem;
    background-color: brown;
    color: gold;
  }
.example-container {
  height: 460px;
  width: 550px;
  overflow: auto;
}
table {
  width: 800px;
}

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Name Column -->
    <ng-container matColumnDef="name" sticky>
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

<!-- Star Column -->
    <ng-container matColumnDef="star" stickyEnd>
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <mat-icon>more_vert</mat-icon>
      </td>
    </ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

<mat-paginator [length]="50" [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons>
</mat-paginator>
</div>

if we move the table paginator should look same as before.

Answer 1

Okay I'm adding another answer because this one is totally different from the previous one.

You can use the Angular renderer along with view children to incread the size of the paginator to the size of the table.

Here is the stackblitz demo: https://stackblitz.com/edit/angular-mxdsdk-d2b7xa?file=app/table-sticky-columns-example.ts

As you can see, the paginator gets the total size of the table and is displayed on the right. Not sure you want it, but it gives you a new way of using it.

 <table mat-table [dataSource]="dataSource" #table>
 ...
 <mat-paginator sticky #paginator></mat-paginator>

@ViewChild('table', { static: true, read: ElementRef }) table: ElementRef<HTMLDivElement>;
@ViewChild('paginator', { static: true, read: ElementRef }) paginator: ElementRef<HTMLDivElement>;

constructor(
  private renderer: Renderer2
) {}

ngOnInit() {
  const width = this.table.nativeElement.getBoundingClientRect().width;
  this.renderer.setStyle(this.paginator.nativeElement, 'width', width + 'px');
}

Answer 2

I was facing the same issue, but got fixed.

Place the mat-paginator outside the container div of, then this pagination width issue won't even arise at first. The scroll will apply only on table data itself, not on pagination.

Answer 3

Maybe you need to use ::ng-deep property in your scss or css like this:

::ng-deep .mat-paginator{
    background-color: brown;
    color: gold;
    font-size: 1rem;
}

::ng-deep .mat-header-cell{
    font-size: 1rem;
    background-color: brown;
    color: gold;
}

For more information about ng-deep, check this link .

Answer 4

I don't think you can do anything at this point.

The sticky is very tricky to use, that's why you should avoid using it (also it's not that well supported ).

You could add background: brown; to your .example-container , which would result in this stackblitz: https://stackblitz.com/edit/angular-mxdsdk?file=app/table-sticky-columns-example.css

Maybe you could explain your end-goal, and we could come up with an alternative?