Width of columns in Angular Material Table flex version

user_308731 0
Viewed 1080

I'm using Angular Material Table component with display: flex variation, meaning the table will be rendered using flex-box instead of a regular table. What does one have to do to adjust the width of the columns of the table?

An example from the official page.

<mat-table [dataSource]="dataSource">
  <!-- User name Definition -->
  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> User name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.username}} </mat-cell>
  </ng-container>

  <!-- Age Definition -->
  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.age}} </mat-cell>
  </ng-container>
</mat-table>
flexbox angular-material angular css
2 Answers

One way to do this is to use the classes that are given to you by Angular Material, mat-column-{name of column} to adjust the width.

.mat-column-username {
  /* Meaning it will be fixed at 50px. */
  flex: 0 0 50px;

  /* or this if you want the column to auto-adjust to the width of the table */
  flex: 1 0 50px;
}
user_3087310

You need to assign a max-width for each column using an ngClass.

In the CSS file:

.lap-c-w-email {
    max-width: 30%;
}

In the HTML file:

Email {{row.email}}

If you want to format other fields as well, you can use the same type to set the max-width.

But remember that the total max-width to be maintained at 100% to avoid horizontal scroll.

user_131216260
Related