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 documen

Answer 1

you can using fxFlex from "@angular/flex-layout" in th and td like this:

<ng-container matColumnDef="value">
      <th mat-header-cell fxFlex="15%" *matHeaderCellDef>Value</th>
            <td mat-cell *matCellDef="let element" fxFlex="15%" fxLayoutAlign="start center">
                           {{'value'}}
            </td>
       </th>
</ng-container>

Answer 2

Sample Mat-table column and corresponding CSS:

HTML/Template

<ng-container matColumnDef="">
  <mat-header-cell *matHeaderCellDef>
     Wider Column Header
  </mat-header-cell>
  <mat-cell *matCellDef="let displayData">
    {{ displayData.value}}
  </mat-cell>`enter code here`
</ng-container>

CSS

.mat-column-courtFolderId {
    flex: 0 0 35%;
}

Answer 3

I found a combination of jymdman's and Rahul Patil's answers is working best for me:

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

Also, if you have one "leading" column which you want to always occupy a certain amount of space across different devices, I found the following quite handy to adopt to the available container width in a more responsive kind (this forces the remaining columns to use the remaining space evenly):

.mat-column-userName {
  flex: 0 0 60%;
}

Answer 4

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

Answer 5

I'm using FlexLayout to update the column width according query media that FlexLayout gives us.

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

means that this column will use the 30% of the row width by default, when gt-xs @mediaQuery is met, the new width will be 15% and similar behavior for other conditions

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

Read more about FlexLayout and @MediaQueries at https://github.com/angular/flex-layout/wiki/Responsive-API

Answer 6

If you have too many table column and it is not adjusted in angular table using md-table, then paste the following style in component.css file. It will work like a charm with scroll view horizontally.

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important; }

.mat-header-row {
    width: 100%; }

.mat-row {
    width: 100%;
}

Add this style to alter your column separately.

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

Alternatively check this link, (where the code above came from), for more detail.