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

jymdman · Answer 1 · 2017-11-24T19:55:46.270

142

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.

edited Nov 24 '17 at 19:55

answered Aug 01 '17 at 06:20

jymdman

1,468
1
8
11

In my case I needed !important for styles applied like this because otherwise the style for `.mat-header-cell` would take precedence. Alternatively, you could just add another style rule for the header cell. – VivaLaPanda Apr 11 '18 at 18:17
Is the documentation for this available anywhere (I wanted to understand what each of the 3 values after "flex" meant and how .mat-column- referred to the corresponding column)? Thanks! – rahs Apr 28 '18 at 12:56
@RahulSaha flex is now a standard css property: "This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis." source: https://developer.mozilla.org/en-US/docs/Web/CSS/flex – Erik I May 25 '18 at 12:29
1

This is the solution I ended up using, but instead of setting the flex basis I set flex grow so the cell is 3x larger than other cells (flex: 3 0 0) – emulcahy Jan 04 '19 at 01:51
3

Setting width with flex did not work in my case. Neither did width. min-width did (for some reason). – Paul Evans Jan 20 '19 at 01:31
1

@jymdman is there any way to define same size for the column even screen size changes? https://stackoverflow.com/questions/65296518/how-to-support-same-column-size-when-screen-size-reducing-in-angular-material-ta – app Dec 14 '20 at 23:10

score 56 · Answer 2 · answered Jul 18 '17 at 06:59

56

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

answered Jul 18 '17 at 06:59

Rahul Patil

5,656
6
37
65

1

Nice.Both works. Thank you. But If data is more its going beyond the table also. And word-wrap also not working – Vinutha Kumar Jul 19 '17 at 10:26
2

why do you use [ngClass] instead of normal class? – Andre Elrico Apr 03 '19 at 07:59
@Rahul is there any way to define same size for the column even screen size changes? https://stackoverflow.com/questions/65296518/how-to-support-same-column-size-when-screen-size-reducing-in-angular-material-ta – app Dec 14 '20 at 23:11

score 38 · Answer 3 · answered Jan 15 '18 at 17:37

38

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;
}

answered Jan 15 '18 at 17:37

Uliana Pavelko

2,824
28
32

1

is there any way to define same size for the column even screen size changes? https://stackoverflow.com/questions/65296518/how-to-support-same-column-size-when-screen-size-reducing-in-angular-material-ta – app Dec 14 '20 at 23:11
Maybe try with css .mat-column-EXAMPLE {max-width: 120px; min-width: 120px; overflow-wrap: break-word; word-wrap: break-word;} – Uliana Pavelko Jun 07 '22 at 15:54

score 20 · Answer 4 · answered Sep 15 '17 at 04:29

20

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.

answered Sep 15 '17 at 04:29

Carlos E. Venegas

359
2
8

It is worth pointing out that `fxFlex="40px"` is also possible – umutesen Apr 05 '18 at 13:38
Simplest way to do this. Good tip! – PlunkettBoy Jul 03 '19 at 21:42

score 15 · Answer 5 · answered Oct 05 '17 at 18:25

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%;
}

This is the best answer. – PedroPovedaQ Mar 02 '19 at 15:19 — PedroPovedaQ, Mar 02 '19 at 15:19

score 14 · Answer 6 · answered Jul 16 '18 at 07:16

14

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.

answered Jul 16 '18 at 07:16

Matthias Sommer

1,070
13
28

score 10 · Answer 7 · edited Nov 04 '19 at 20:57

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

Adding the fxFlex directive to one column seems to effect them all. Is there a way to target only one column? — zakdances, Dec 16 '18 at 01:30

score 6 · Answer 8 · answered Sep 07 '18 at 15:56

6

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.

answered Sep 07 '18 at 15:56

daniekpo

157
3
9

score 4 · Answer 9 · answered Jul 18 '17 at 07:02

4

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;
}

answered Jul 18 '17 at 07:02

Mark Cutajar

340
1
6

score 4 · Answer 10 · answered Sep 04 '17 at 19:14

4

You can now do it like this

<cdk-cell [style.flex]="'0 0 75px'">

answered Sep 04 '17 at 19:14

Jason Politis

71
3

Amir Azizkhani · Answer 11 · 2020-05-11T04:20:30.757

4

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>

edited May 11 '20 at 04:20

answered May 29 '19 at 06:19

Amir Azizkhani

1,662
17
30

score 2 · Answer 12 · edited Jul 08 '19 at 12:55

2

.mat-column-skills {
    max-width: 40px;
}

edited Jul 08 '19 at 12:55

double-beep

5,031
17
33
41

answered Jul 08 '19 at 10:31

Pragati Dugar

262
3
7

Are you sure, that this deviates from the top voted answer? Probably your cdkColumnDef is just different? – user1781290 Jul 08 '19 at 11:05
no thats pretty much same, just wanted to highlight , that only this worked for me. – Pragati Dugar Jul 09 '19 at 08:52

score 1 · Answer 13 · answered Apr 01 '18 at 22:22

1

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.

answered Apr 01 '18 at 22:22

Martin Schneider

14,263
7
55
58

score 1 · Answer 14 · edited Nov 04 '19 at 17:50

1

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%;
}

edited Nov 04 '19 at 17:50

Wang Liang

4,244
6
22
45

answered Nov 04 '19 at 15:50

meol

1,027
11
7

score 0 · Answer 15 · edited Oct 05 '20 at 13:10

0

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%;
}

github

edited Oct 05 '20 at 13:10

ssuperczynski

3,190
3
44
61

answered Dec 26 '17 at 18:03

reza.cse08

5,938
48
39

score 0 · Answer 16 · answered Feb 11 '19 at 16:31

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>

score 0 · Answer 17 · edited Aug 12 '19 at 10:02

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.

score 0 · Answer 18 · answered Dec 02 '19 at 17:11

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;
  }

md-table - How to update the column width

18 Answers18

Linked