Использовать таблицу угловых материалов для группировки столбцов - PullRequest
Новая
       11

Использовать таблицу угловых материалов для группировки столбцов

0 голосов
/ 17 апреля 2019

Я пытаюсь выяснить, как сгруппировать столбцы, используя угловую таблицу матов. Я понятия не имею, как начать с этого, и я не могу найти пример где-либо. Первые два раздела необходимо сгруппировать, как показано ниже:

enter image description here

1 Ответ

1 голос
/ 17 апреля 2019

Вы можете добавить <tr> с вашими группами столбцов и использовать [attr.colspan], чтобы указать, сколько столбцов включить.В приведенном ниже примере есть 4 столбца. 

    <!-- Header row first group -->
  <ng-container matColumnDef="header-row-first-group">
    <th mat-header-cell *matHeaderCellDef 
        [style.text-align]="center"
        [attr.colspan]="1"> 
      First group 
    </th>
  </ng-container>

  <!-- Header row second group -->
  <ng-container matColumnDef="header-row-second-group">
    <th mat-header-cell *matHeaderCellDef [attr.colspan]="3"> Second group </th>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

Я нашел решение в теме для этой проблемы Github .

См. Stackblitz дляполный рабочий пример.

...