Angular Materials Table expand and collapse table cell?

Question

I have a mat table and a current row click event already. I need to be able to have an collapsible table cell depending on the amount of data in the cell. In the case below its a text-area

If a cell has a length of over 30 then it needs to show the first 30 characters and an Ellipses .... like the example posted below.

If the user clicks on the ellipses then it will expand that particular cell Only showing all of the data for that cell.

For example I can have a row that looks like this

   Name      Address          Zip
   Jon      123 Main         44444
   Sam      4444 Chatt...    65984
   Amy      777 Main         44444

They would click on the address cell for Sam and it would show

       Name      Address                        Zip
       Jon      123 Main                       44444
       Sam      4444 Chattanooga Street  ...   65984
                Apartment 105
       Amy      777 Main                       44444

Is that possible in Materials Table?

<td mat-cell *matCellDef="let element" [hidden]="column.Hidden" (mouseenter)="_mouseEnter($event, element, column.MouseEnter)" (mouseleave)="_mouseLeave($event, element, column.MouseLeave)" class="{{column.Classes}}">

             <div *ngSwitchCase="CellType.TextArea" class="text-center">
                <app-textarea [(text)]="element[column.Value]" [title]="column.Title"></app-textarea>
              </div>
  </td>

Could you maybe add a stackblitz link with a reproductible example ? And with you you've already tried. — Nicolas, Feb 06 '20 at 17:40
Angular material offers expandable rows out of the box, look into that. — Zunaib Imtiaz, Feb 06 '20 at 17:43
@ZunaibImtiaz Im not looking to expand the row. Just looking to raise the height of the particular cell maybe? — CodeMan03, Feb 06 '20 at 20:11
As one approach you can set the title of your cell to your element value, in fact the full value would be displayed in the cell tootlip. — zerocewl, Feb 06 '20 at 20:53
okay, that is achievable with some css, let me give you a fiddle. — Zunaib Imtiaz, Feb 07 '20 at 04:20

score 4 · Accepted Answer · answered Feb 07 '20 at 04:28

You can make a cell expand like this using pure html css. You can embel this css into your Angular and give it a try.

I've made first cell expandable, rest you can copy and redo. Add content class to an y children of <td>

If you want to do it on click, just add an eventlistner which updates your classes.

  <td mat-cell *matCellDef="let element" [hidden]="column.Hidden" 
  (mouseenter)="_mouseEnter($event, element, column.MouseEnter)" 
  (mouseleave)="_mouseLeave($event, element, column.MouseLeave)" class=" 
  {{column.Classes}}">

      <div *ngSwitchCase="CellType.TextArea" class="text-center content"> //added class
                <app-textarea [(text)]="element[column.Value]" [title]="column.Title"> 
                </app-textarea>
      </div>


  </td>

body,table{
    font-family:verdana,arial,sans-serif;
    font-size:12px;
    border-collapse:collapse;
}

td,th{
    padding:3px 3px;
    margin:0px;
    border:1px solid #BBB;
    white-space:nowrap;
}

.content{
    height:15px;
    width:100px;
    overflow:hidden;
    text-overflow:ellipsis
}
.content:hover{
    height:auto;
    width:auto;

}

<table>

<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>

<tr>
<td><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
</div>
</td>
<td>Data2,1</td>
<td>Data3,1</td>
</tr>

<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>

<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>

</table>

Angular Materials Table expand and collapse table cell?

1 Answers1