md-table - How to update the column width
AngularAngular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
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
Solution 3 - Angular
If you are using angular/flex-layout in your project, you can set column with by adding fxFlex directive to mat-header-cell and mat-cell:
<ng-container matColumnDef="name" >
<mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
</ng-container>
Otherwise, you can add custom CSS to achieve the same result:
.mat-column-name{
flex: 0 0 100px;
}
Solution 4 - Angular
Check this: https://github.com/angular/material2/issues/5808
Since material2 is using flex layout, you can just set fxFlex="40"
(or the value you want for fxFlex) to md-cell
and md-header-cell
.
Solution 5 - Angular
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%;
}
Solution 6 - Angular
The Angular material documentation uses
.mat-column-userId {
max-width: 40px;
}
for its table component to change the column width. Again, userId would be the cells name.
Solution 7 - Angular
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
Solution 8 - Angular
I just used:
th:nth-child(4) {
width: 10%;
}
Replace 4 with the position of the header that you need to adjust the width for.The examples in the documentation used:
td, th {
width: 25%;
}
So I just modified it to get what I wanted.
Solution 9 - Angular
You can set the .mat-cell class to flex: 0 0 200px; instead of flex: 1 along with the nth-child.
.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
flex: 0 0 200px;
}
Solution 10 - Angular
You can now do it like this
<cdk-cell [style.flex]="'0 0 75px'">
Solution 11 - Angular
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>
Solution 12 - Angular
.mat-column-skills {
max-width: 40px;
}
Solution 13 - Angular
You can also use the element selectors:
mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
flex: 0 0 64px;
}
But jymdman's answer is the most recommended way to go in most cases.
Solution 14 - Angular
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%;
}
Solution 15 - Angular
I got the very easy solution for this - setting different width for column in style sheet by overriding the both cell and header cell:
Example - setting custom width for 1st and 5th column:
.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1) {
flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5) {
flex: 0 0 10%;
}
Solution 16 - Angular
You can also add the styling directly in the markup if you desire so:
<ng-container matColumnDef="Edit">
<th mat-header-cell *matHeaderCellDef > Edit </th>
<td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>
Solution 17 - Angular
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.
> css > .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.
> css > .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.
Solution 18 - Angular
Let's take an example. If your table has columns as follows:
<!-- ID Column -->
<ng-container matColumnDef="id" >
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let row"> {{row.sid}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
As this contain two columns. then we can set the width of columns using
.mat-column-<matColumnDef-value>{
width: <witdh-size>% !important;
}
for this example, we take
.mat-column-id{
width: 20% !important;
}
.mat-column-name{
width: 80% !important;
}