Angular Материалы таблицы развернуть и свернуть ячейку таблицы?

Question

У меня есть таблица соответствия и текущее событие щелчка строки. Мне нужно иметь возможность складной ячейки таблицы в зависимости от объема данных в ячейке. В нижеприведенном случае это текстовая область

Если длина ячейки превышает 30, то она должна показать первые 30 символов и эллипсы .... как в примере, представленном ниже.

Если пользователь нажимает на эллипсы, он расширяет эту конкретную ячейку, показывая только все данные для этой ячейки.

Например, у меня может быть строка, которая выглядит следующим образом

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

Они нажимали на ячейку адреса для Сэма, и там показывалось бы

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

Возможно ли это в таблице материалов?

<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>

Answer 1

Вы можете сделать так, чтобы клетка расширялась, используя чистый html css. Вы можете внедрить этот css в свой Angular и попробовать.

Я сделал первую ячейку расширяемой, остальные вы можете скопировать и повторить. Добавьте класс содержимого для y потомков <td>

Если вы хотите сделать это по клику, просто добавьте Eventlistner, который обновляет ваши классы.

  <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>