md-table - How to update the column width

Question

I have started using the md-table for my project, and I want fixed column width. Currently all columns width are divided into equal size.

Where can I get the documentation of data table dimensions?

https://material.angular.io/components/table/overview

Answer 1

When Material creates the table it automagically applies two class-names for you which you can use to style each column. In the the example below the styles is named mat-column-userId and cdk-column-userId.

<ng-container cdkColumnDef="userId">   <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>   <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell> </ng-container> 

Now you can use those names in css:

.mat-column-userId {   flex: 0 0 100px; } 

Similar to Rahul Patil's answer, but you don't need to add another class to your column definitions.

Answer 2

Right now, it has not been exposed at API level yet. However you can achieve it using something similar to this

<ng-container cdkColumnDef="userId" >   <md-header-cell *cdkHeaderCellDef [ngClass]="'customWidthClass'"> ID </md-header-cell>   <md-cell *cdkCellDef="let row" [ngClass]="'customWidthClass'"> {{row.id}} </md-cell> </ng-container> 

In css, you need to add this custom class -

.customWidthClass{    flex: 0 0 75px; } 

Feel free to enter the logic to append class or custom width in here. It will apply custom width for the column.

Since md-table uses flex, we need to give fixed width in flex manner. This simply explains -

0 = don't grow (shorthand for flex-grow)

0 = don't shrink (shorthand for flex-shrink)

75px = start at 75px (shorthand for flex-basis)

Plunkr here - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview