How to set width of mat-table column in Angular?

javascript

responsive-design

css

angular-material

byNikita Barsukov·Nov 11, 2024

Effortlessly manage the width of your mat-table column in Angular by applying CSS to the column's mat-header-cell and mat-cell. Don't forget to add the unique class based on column's name.

/* Yes, this will make your username column a professional boxer with a perfect width of 120px */
.mat-column-username {
  width: 120px; 
}

Reference this class when you're defining your table:

<ng-container matColumnDef="username">
  <th mat-header-cell *matHeaderCellDef class="mat-column-username">User Name</th>
  <td mat-cell *matCellDef="let element" class="mat-column-username">{{element.username}}</td>
</ng-container>

Voila! Your username column now boasts a fixed width of 120 pixels.

Customizing multi-width mat-tables

As we delve deeper, we will explore powerful strategies to customize the width of your mat-table columns.

Responsive columns with Flex

For a responsive design, implement percentage widths using the flex CSS property. This adaptability is the sidekick you never knew your layout needed.

/* Batman to the Gotham city within your table. Takes up exactly 25% of the table width */ 
.mat-column-weight {
  flex: 0 0 25%; 
}

Wrangling overflowing content with CSS

Overflowing content may sometimes cause the table to break. Fret not, use word-wrap or white-space CSS properties to tame these wild beasts.

/* Tame your description column like it's the new Yeezy kicks of the season */
.mat-column-description {
  width: 250px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;
}

Too long to fit? Let's hyphenate!

Long words? No worries! Our secret weapon hyphens got you.

/* Manage long names like yours truly, Supercalifragilisticexpialidocious */
.mat-column-productname {
  hyphens: auto;
}

Keep it clean with uniform layout

Use table-layout and width attributes to keep your mat-table layout as clean as Mr. Clean's kitchen.

/* This puts the mat-table on a 100% whole grain diet, certified to be healthy */
.mat-table {
  table-layout: fixed;
  width: 100%;
}

Styling columns? Sorted!

Create unique classes for each column type. Now, you can assign them any look you fancy:

/* Endorse your price column with a beautiful silver backdrop. Yeah, it's the silver surfer! */
.mat-column-price {
  width: 80px;
  background-color: #f3f3bc; 
}

Consider different viewport sizes

Design for different screen sizes. Use percentages or media queries within your CSS for a truly responsive layout.

/* Hey mobile users! Here's some love for you. */
@media screen and (max-width: 600px) {
  .mat-column-mobile {
    width: 50%; 
  }
}

Keep it neat with SCSS

Keep your styles clean and easily maintainable with SCSS mixins.

/* Clever, huh? Now let's make some magic */
@mixin column-width($width) {
  width: $width;
  flex: none;
}

.mat-column-quantity {
  @include column-width(150px);
}

Bridging templates and styles with Angular Material

Angular Material's predefined classes and directives can make it a breeze to connect your CSS and Angular's data binding.

<ng-container matColumnDef="item">
  <th mat-header-cell *matHeaderCellDef class="mat-column-item">Item</th>
  <td mat-cell *matCellDef="let element" class="mat-column-item">{{element.item}}</td>
</ng-container>