title: Angular Material Table - assign width to specific column in dynamic table
body: <p>I have a dynamic angular material table component, that works like this:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" class="table"
         matSort&gt;
  
    &lt;ng-container *ngFor="let column of columns" [matColumnDef]="column.key"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;
        {{column.name}}
      &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let row"
                [@getIn]&gt;
              {{row[column.key] || 'N/A'}}
      &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;"
             matRipple
             [matRippleDisabled]="!allowSelect"
             [class.selectableRow]="allowSelect"&gt;&lt;/mat-row&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The component accepts a list of columns, for example:</p>
  
  <pre><code>[{
     key: "date",
     name: "Date",
  }, {
     key: "title",
     name: "Book Name",
  }]
  </code></pre>
  
  <p>It works, but I'm trying to enhance it and send <code>width</code> attribute to one of the columns (it can be any). For example:</p>
  
  <pre><code>[{
         key: "date",
         name: "Date",
         width: 110
      }, {
         key: "title",
         name: "Book Name",
      }]
  </code></pre>
  
  <p>How I can adjust the columns width based on thie attributes? I do not want to hardcode the class name based on this column title in the CSS (as it won't be dynamic anymore). Please note that the width is applied only to specific columns.</p>
  
  <p>I tried to update the mat-cell <code>flex</code> style attribute as follows:</p>
  
  <pre><code>&lt;mat-cell *matCellDef="let row"
                [@getIn]
                [style.flex]="column.width ? '0 0 ' + column.width + 'px' : null"&gt;
  </code></pre>
  
  <p>but it messes up the width of the rest of the columns (I guess it overwrites the current flex attribute, and I have no idea what the default is)</p>
  
  <p>Any idea?</p>