How to Set Mat Table Column Width in Angular?

The width of a mat table’s column adjusts according to the content that it carries. For example, if the content is small in length, like serial number, Id, etc. the width of the column will be very less.

On the other hand, if the content inside the column is large, the mat table will automatically allocate more width to it.

But this is not the case always. There may be situations, where you want to manually set the width of the table’s column according to your need. This is exactly what we are going to learn with the help of this article.

Let’s say we have a mat table with 5 columns Id, firstName, lastName, email and phone in our template file:

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

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

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

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

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

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

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

Now, we want to manually set the width of the firstName and lastName columns and let the remaining columns adjust their width automatically.

To do that we have to add a little code in our component’s CSS file. But it has a special syntax and we have to follow it. This is how we can do it:

/* Syntax to set column width */
.mat-column-columnName{
    width: 20%;
}

In our case, we want to set the width of the firstName and lastName columns. Therefore, we have to add the following code in our component’s CSS file:

/* Set firstName column width to 25% */
.mat-column-firstName{
    width: 25%;
}

/* Set lastName column width to 30% */
.mat-column-lastName{
    width: 30%;
}

Here the firstName and lastName aren’t some randomly picked names. Instead, these are the names defined inside the matColumnDef in our mat table.

As we have only set the width of the firstName and lastName columns. Therefore, the width of the remaining columns will be automatically allocated by Angular.

The following image shows how the mat table will look like before and after applying the above styles:

Set mat table column width in Angular

Apply Styles to any Specific Mat Column

Using the above syntax you can not only set the column’s width but also apply other styles to any specifi column you want.

For example, you can align its text to center, or give it some specific text color and so on.

The following example sets the firstName column’s text color to blue and center aligns its text along with setting its width to 20%.

/* Apply styles to firstName column */
.mat-column-firstName{
    width: 20%;
    text-align: center;
    color: blue;
}

Conclusion

In this article, we have learned how we can set the width of any specific column of a mat table. We did it in two steps. First, define the name of the column using the matColumnDef attribute and second, use this column name inside the component’s CSS file and use the width property to set the column width.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts