Angular Material Table Cell Data wrapping

Question

I m using Angular material for displaying table data. This is just partial code. The table is embedded in material card. The data in the table cell gets messy when the length of the field is more. i have attached the screenshot for the same

<mat-card-content fxLayout="column" fxLayoutAlign="space-between" fxFlex>
  <h4>Incidents</h4>
  <mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="IncidentId">
      <th mat-header-cell fxFlex *matHeaderCellDef mat-sort-header>IncidentId</th>
      <td mat-cell fxFlex *matCellDef="let element">{{ element.IncidentId }}</td>
    </ng-container>
    ...

Here's how it looks:

I have used word wrap but it didn't help

The same code appears in IE in the below format

[2

Answer 1

This should fix the wrap issue with the Angular material table:

put this style in your component's style file (.css or scss or any other style extension)

 td , th {
    white-space: normal;
    word-wrap: break-word;
    max-width: 200px;
}

You can adjust the max-width to your taste. It actually worked for me in my case.

Answer 2

As far as I remember

fxLayout="column" fxLayoutAlign="space-between" fxFlex

fxFlex is deprecated and fxLayout should be fxLayout="column wrap"

I gues you have overflow: hidden

---

Can you apply these styles on on that column

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;