Поместить компонент меню внутри столбца таблицы

Question

Я использую table компонент. В table component я хочу поместить кнопку menu в последнюю строку, например, так:

На самом деле я добавилmenu кнопка внутри 3-го столбца и дал float:right;, но я хочу добавить эту кнопку в table, создав еще один столбец. Как это сделать?

Answer 1

Просто добавьте кнопку внутри таблицы.

В вашем компоненте объявите новый столбец отображения с именем, например, actions:

displayedColumns: string[] = [ your_rest_declarations...,'actions'];

Затем добавьте это в свой вид:

    <!-- Actions -->
   <ng-container matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef> Actions </th>
    <td mat-cell *matCellDef="let element"> 
      <button mat-icon-button >
          <mat-icon aria-label="actions">more_vert</mat-icon>
      </button>
    </td>
  </ng-container>

Результат: