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

using css we can adjust specific column width which i put in below code.

user.component.css

table{ width: 100%;}.mat-column-username {  word-wrap: break-word !important;  white-space: unset !important;  flex: 0 0 28% !important;  width: 28% !important;  overflow-wrap: break-word;  word-wrap: break-word;  word-break: break-word;  -ms-hyphens: auto;  -moz-hyphens: auto;  -webkit-hyphens: auto;  hyphens: auto;}.mat-column-emailid {  word-wrap: break-word !important;  white-space: unset !important;  flex: 0 0 25% !important;  width: 25% !important;  overflow-wrap: break-word;  word-wrap: break-word;  word-break: break-word;  -ms-hyphens: auto;  -moz-hyphens: auto;  -webkit-hyphens: auto;  hyphens: auto;}.mat-column-contactno {  word-wrap: break-word !important;  white-space: unset !important;  flex: 0 0 17% !important;  width: 17% !important;  overflow-wrap: break-word;  word-wrap: break-word;  word-break: break-word;  -ms-hyphens: auto;  -moz-hyphens: auto;  -webkit-hyphens: auto;  hyphens: auto;}.mat-column-userimage {  word-wrap: break-word !important;  white-space: unset !important;  flex: 0 0 8% !important;  width: 8% !important;  overflow-wrap: break-word;  word-wrap: break-word;  word-break: break-word;  -ms-hyphens: auto;  -moz-hyphens: auto;  -webkit-hyphens: auto;  hyphens: auto;}.mat-column-userActivity {  word-wrap: break-word !important;  white-space: unset !important;  flex: 0 0 10% !important;  width: 10% !important;  overflow-wrap: break-word;  word-wrap: break-word;  word-break: break-word;  -ms-hyphens: auto;  -moz-hyphens: auto;  -webkit-hyphens: auto;  hyphens: auto;}

If you're using scss for your styles you can use a mixin to help generate the code. Your styles will quickly get out of hand if you put all the properties every time.

This is a very simple example - really nothing more than a proof of concept, you can extend this with multiple properties and rules as needed.

    @mixin mat-table-columns($columns)    {        .mat-column-        {            @each $colName, $props in $columns {                    $width: map-get($props, 'width');                                &#{$colName}                 {                    flex: $width;                    min-width: $width;                        @if map-has-key($props, 'color')                     {                        color: map-get($props, 'color');                    }                }              }        }    }

Then in your component where your table is defined you just do this:

    @include mat-table-columns((            orderid: (width: 6rem, color: gray),        date: (width: 9rem),        items: (width: 20rem)        ));

This generates something like this:

    .mat-column-orderid[_ngcontent-c15] {      flex: 6rem;      min-width: 6rem;      color: gray; }        .mat-column-date[_ngcontent-c15] {      flex: 9rem;      min-width: 9rem; }

In this version width becomes flex: value; min-width: value.

For your specific example you could add wrap: true or something like that as a new parameter.

As i have implemented, and it is working fine. you just need to add column width using matColumnDef="description"

for example :

<mat-table #table [dataSource]="dataSource" matSortDisableClear>    <ng-container matColumnDef="productId">        <mat-header-cell *matHeaderCellDef>product ID</mat-header-cell>        <mat-cell *matCellDef="let product">{{product.id}}</mat-cell>    </ng-container>    <ng-container matColumnDef="productName">        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>        <mat-cell *matCellDef="let product">{{product.name}}</mat-cell>    </ng-container>    <ng-container matColumnDef="actions">        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>        <mat-cell *matCellDef="let product">            <button (click)="view(product)">                <mat-icon>visibility</mat-icon>            </button>        </mat-cell>    </ng-container>    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row></mat-table>

here matColumnDef isproductId, productName and action

now we apply width by matColumnDef

styling

.mat-column-productId {    flex: 0 0 10%;}.mat-column-productName {    flex: 0 0 50%;}

and remaining width is equally allocated to other columns