Knowledge Repo / Experience Log
First, make sure you have Angular Material installed in your project by running the following command:
ng add @angular/material
Create a component that will house your table and implement inline editing functionality. For example, let’s call it TableComponent:
Working on a recent project using Angular and Material UI, I needed to be able to truncate the text in one of the cells of a Material table. Here is the simplest way I have found to accomplish that.
//Add this to your css
mat-cell > span.truncate-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
//Wrap the long text in a span with a class of truncate-text
<ng-container matColumnDef="longtext">
<mat-header-cell *matHeaderCellDef> LongText </mat-header-cell>
<mat-cell *matCellDef="let element">
<span class="truncate-text">{{element.longtext}}</span>
</mat-cell>
</ng-container>