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

User · Answer

You can now do it like this   lt cdk-cell  style flex    0 0 75px   gt

User · Answer

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    lt ng-container cdkColumnDef  userId  gt     lt md-header-cell  cdkHeaderCellDef gt  ID  lt  md-header-cell gt     lt md-cell  cdkCellDef  let row  gt    row id    lt  md-cell gt   lt  ng-container gt    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

User · Answer

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

User · Answer

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

User · Answer

you can using fxFlex from   angular flex-layout  in th and td like this    lt ng-container matColumnDef  value  gt         lt th mat-header-cell fxFlex  15    matHeaderCellDef gt Value lt  th gt               lt td mat-cell  matCellDef  let element  fxFlex  15   fxLayoutAlign  start center  gt                                value                 lt  td gt          lt  th gt   lt  ng-container gt

User · Answer

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

User · Answer

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     lt ng-container matColumnDef  name   gt         lt mat-header-cell fxFlex  100px   matHeaderCellDef mat-sort-header gt Name lt  mat-header-cell gt         lt mat-cell  fxFlex  100px   matCellDef  let row    click   rowClick row   gt   row Name   lt  mat-cell gt    lt  ng-container gt    Otherwise  you can add custom CSS to achieve the same result    mat-column-name      flex  0 0 100px

User · Answer

Right now  it has not been exposed at API level yet  However you can achieve it using something similar to this    lt ng-container cdkColumnDef  userId   gt     lt md-header-cell  cdkHeaderCellDef  ngClass    customWidthClass   gt  ID  lt  md-header-cell gt     lt md-cell  cdkCellDef  let row   ngClass    customWidthClass   gt    row id    lt  md-cell gt   lt  ng-container gt    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

User · Answer

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

User · Answer

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

User · Answer

Let s take an example  If your table has columns as follows    lt  -- ID Column -- gt     lt ng-container matColumnDef  id   gt       lt th mat-header-cell  matHeaderCellDef mat-sort-header gt  ID  lt  th gt       lt td mat-cell  matCellDef  let row  gt    row sid    lt  td gt     lt  ng-container gt     lt  -- Name Column -- gt     lt ng-container matColumnDef  name  gt       lt th mat-header-cell  matHeaderCellDef mat-sort-header gt  Name  lt  th gt       lt td mat-cell  matCellDef  let row  gt    row name    lt  td gt     lt  ng-container gt    As this contain two columns  then we can set the width of columns using    mat-column- lt matColumnDef-value gt       width   lt witdh-size gt    important      for this example  we take      mat-column-id      width  20   important               mat-column-name      width  80   important

User · Answer

Sample Mat-table column and corresponding CSS   HTML Template   lt ng-container matColumnDef    gt     lt mat-header-cell  matHeaderCellDef gt       Wider Column Header    lt  mat-header-cell gt     lt mat-cell  matCellDef  let displayData  gt         displayData value      lt  mat-cell gt  enter code here   lt  ng-container gt    CSS   mat-column-courtFolderId       flex  0 0 35

User · Answer

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    lt  -- CURRENTBALANCE COLUMN-- gt     lt ng-container cdkColumnDef  balance 2  gt       lt mat-header-cell fxFlex  30  fxFlex gt-xs  15  fxFlex gt-sm  20         fxFlex gt-md  25  fxLayout  row  fxLayoutAlign  center center          cdkHeaderCellDef gt    balanceTable datesHeaders 2     lt  mat-header-cell gt       lt mat-cell fxFlex  30  fxFlex gt-xs  15  fxFlex gt-sm  20  fxFlex gt-md  25          cdkCellDef  let eventTop  gt         lt div fxLayout  column  fxLayoutAlign  center center  gt           lt  -- CELL CONTENT-- gt         lt  div gt       lt  mat-cell gt     lt  ng-container gt   lt  -- CURRENTBALANCE COLUMN-- gt       Read more about FlexLayout and  MediaQueries at https   github com angular flex-layout wiki Responsive-API

User · Answer

You can also add the styling directly in the markup if you desire so    lt ng-container matColumnDef  Edit  gt        lt th mat-header-cell  matHeaderCellDef  gt  Edit  lt  th gt        lt td mat-cell  matCellDef  let element   click   openModal    style  width  50px   gt   lt i class  fa fa-pencil  aria-hidden  true  gt  lt  i gt   lt  td gt   lt  ng-container gt

User · Answer

mat-column-skills       max-width  40px

User · Answer

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

User · Answer

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

User · Answer

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

[angular] md-table - How to update the column width

Examples related to angular