How to set width of mat-table column in angular

Question

Here in my mat-table have 6 column when any column has not more words then it looks like Image-1  but when any column has more words then UI looks like Image-2  so how to set UI like Image-1 when any column has more words in angular 6    Image-1    Image-2    user component html   lt div class  mat-elevation-z8  gt          lt table mat-table  dataSource   dataSource  gt     lt ng-container matColumnDef  userimage  gt       lt th mat-header-cell  matHeaderCellDef gt     lt  th gt       lt td mat-cell  matCellDef  let element  gt          lt img src    commonUrlObj commonUrl   images   element userimage    style  height  40px width  40px    gt       lt  td gt     lt  ng-container gt      lt ng-container matColumnDef  username  gt       lt th mat-header-cell  matHeaderCellDef gt  Full Name  lt  th gt       lt td mat-cell  matCellDef  let element  gt    element username       element usertype     lt  td gt     lt  ng-container gt      lt ng-container matColumnDef  emailid  gt       lt th mat-header-cell  matHeaderCellDef gt  EmailId  lt  th gt       lt td mat-cell  matCellDef  let element  gt    element emailid    lt  td gt      lt  ng-container gt      lt ng-container matColumnDef  contactno  gt       lt th mat-header-cell  matHeaderCellDef gt  Contact No   lt  th gt       lt td mat-cell  matCellDef  let element  gt    element contactno    lt  td gt     lt  ng-container gt      lt ng-container matColumnDef  enabled  gt       lt th mat-header-cell  matHeaderCellDef gt  Enabled  lt  th gt       lt td mat-cell  matCellDef  let element  style  color  blue  gt         lt ng-container  ngIf  element enabled     true   else otherss  gt Enabled lt  ng-container gt           lt ng-template  otherss gt Disabled lt  ng-template gt       lt  td gt     lt  ng-container gt      lt ng-container matColumnDef  action  gt       lt th mat-header-cell  matHeaderCellDef gt  Action  lt  th gt         lt td mat-cell  matCellDef  let element  fxLayoutGap  5px  gt           lt button mat-mini-fab color  primary  routerLink   base editUserDetails   element userid    gt  lt mat-icon gt edit lt  mat-icon gt  lt  button gt           lt button mat-mini-fab color  primary  routerLink   base viewUserDetails   element userid    gt  lt mat-icon gt pageview lt  mat-icon gt  lt  button gt         lt  td gt     lt  ng-container gt      lt tr mat-header-row  matHeaderRowDef  displayedColumns  gt  lt  tr gt     lt tr mat-row  matRowDef  let row  columns  displayedColumns   gt  lt  tr gt   lt  table gt   lt mat-paginator  pageSizeOptions    5  10  20  50  100   showFirstLastButtons gt  lt  mat-paginator gt

User · Answer

As i have implemented  and it is working fine  you just need to add column width using matColumnDef  description    for example      lt mat-table  table  dataSource   dataSource  matSortDisableClear gt       lt ng-container matColumnDef  productId  gt           lt mat-header-cell  matHeaderCellDef gt product ID lt  mat-header-cell gt           lt mat-cell  matCellDef  let product  gt   product id   lt  mat-cell gt       lt  ng-container gt       lt ng-container matColumnDef  productName  gt           lt mat-header-cell  matHeaderCellDef gt Name lt  mat-header-cell gt           lt mat-cell  matCellDef  let product  gt   product name   lt  mat-cell gt       lt  ng-container gt       lt ng-container matColumnDef  actions  gt           lt mat-header-cell  matHeaderCellDef gt Actions lt  mat-header-cell gt           lt mat-cell  matCellDef  let product  gt               lt button  click   view product   gt                   lt mat-icon gt visibility lt  mat-icon gt               lt  button gt           lt  mat-cell gt       lt  ng-container gt       lt mat-header-row  matHeaderRowDef  displayedColumns  gt  lt  mat-header-row gt       lt mat-row  matRowDef  let row  columns  displayedColumns  gt  lt  mat-row gt   lt  mat-table gt    here matColumnDef is productId  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

User · Answer

we can add attribute width  directly to th  eg    lt ng-container matColumnDef  position   gt       lt th mat-header-cell  matHeaderCellDef width   20   gt  No   lt  th gt       lt td mat-cell  matCellDef  let element  gt    element position    lt  td gt     lt  ng-container gt

User · Answer

You can do it by using below CSS   table     width  100     table-layout  fixed     th  td     overflow  hidden    width  200px    text-overflow  ellipsis    white-space  nowrap      Here is a StackBlitz Example with Sample Data

User · Answer

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

User · Answer

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                  amp    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

User · Answer

Just need to update the width of the th tag  th     width  100px

User · Answer

You can easily do this one  In each column you will get a class with the field name prefixed with mat-column  so the class will be like mat-column-yourFieldName  So for that you can set the style like following   mat-column-yourFieldName       flex  none      width  100px      So we can give fixed width for column as per our requirement   Hope this helps for someone

User · Answer

Just add style  quot width 5   important  quot  to th and td    lt ng-container matColumnDef  quot username quot  gt       lt th style  quot width 5   important  quot  mat-header-cell  matHeaderCellDef gt  Full Name  lt  th gt       lt td style  quot width 5   important  quot  mat-cell  matCellDef  quot let element quot  gt    element username       element usertype     lt  td gt     lt  ng-container gt

User · Answer

Here s an alternative way of tackling the problem   Instead of trying to  fix it in post  why don t you truncate the description before the table needs to try and fit it into its columns  I did it like this    lt ng-container matColumnDef  description  gt      lt th mat-header-cell  matHeaderCellDef gt      Parts description    translate     lt  th gt               lt td mat-cell  matCellDef  let element  gt                     element description length  gt  80      element description  slice 0  80             element description       lt  td gt   lt  ng-container gt    So I first check if the array is bigger than a certain length  if Yes then truncate and add       otherwise pass the value as is  This enables us to still benefit from the auto-spacing the table does

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

Examples related to html

Examples related to css

Examples related to angular

Examples related to angular-material