Search code examples
javascriptcssangulartreetable

How to change the column width with ng-material-treetable?

Tree Table in StackBlitz example I realized that internally material data-table is being used. When I am using table mat-table. I can use CSS to do the below change, but somehow it is not working, how I could do that?

.mat-column-[columnname] { 
    width: 50% !important;
}

Link with the code on stackblitz: https://stackblitz.com/edit/angular-xpcm2l?file=src/app/app.component.css

Solution

  • If you'd check your browsers output you would see that your column width is defined inside the following selector (see example):

    Example:

    td[class*=' mat-column'][_ngcontent-c9] {
    width: 10vw;
    min-width: 10vw;
    max-width: 10vw;
}

    You should be able to add and modify this selector to your needs inside your scss file.

    td[class*=' mat-column'][_ngcontent-c9]

    This selector affects every 'td' element in your table that contains a class that starts with ' mat-column' and is combined with another attribute that is a target and starts with '_ngcontent-c9'.

    Have you tried the recursive approach like this?

    td[class*=' mat-column'] *
{
  ...
}

    This way you can avoid the target attribute entirely that is probably dynamically generated by Angular.

    EDIT:

    I'd also suggest that you avoid using !important in your css. I don't find it as a good practice.