Как сгруппировать строки в Mat-Table - PullRequest
Новая
       17

Как сгруппировать строки в Mat-Table

0 голосов
/ 11 июля 2019

У меня есть mat-Table с filters, и я хочу сгруппировать таблицу по одной из columns.

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

Я поделюсь своим HTML (это фрагмент не всего HTML: 

<mat-checkbox  class="CheckBoxClass" value="clientType" [(ngModel)]="isChecked  " disabled (change)="updateFilter('LQOCH_SHM_LOEZI_QTSR', clientType)" >{{clientType}}</mat-checkbox>
<br><br>
<mat-checkbox  class="CheckBoxClass" value="contSize" [(ngModel)]="isChecked" disabled (change)="updateFilter('AORKH_MCOLH', contSize)" >{{contSize}}</mat-checkbox>
<br><br>
<mat-checkbox  class="CheckBoxClass" value="storageType" [(ngModel)]="isChecked" disabled (change)="updateFilter('TAOR_QTSR_EBRI', storageType)" >{{storageType}}</mat-checkbox>
</div>


  <!-- Container Table -->
  <div>
    <mat-table [dataSource]="dataSource"  [hidden]="!show"  >
      <!-- Location  -->
      <ng-container matColumnDef="AITOR">
        <mat-header-cell *matHeaderCellDef> Location

        </mat-header-cell>
        <mat-cell *matCellDef="let container"> {{container.AITOR}} </mat-cell>
      </ng-container>
          <!-- Type  -->
          <ng-container matColumnDef="SOG_MCOLH">
            <mat-header-cell *matHeaderCellDef > Container Type</mat-header-cell>
            <mat-cell *matCellDef="let container"> {{container.SOG_MCOLH}}</mat-cell>

Это мой компонент NgOnInit: 

 ngOnInit() {
    this.marinService.getAllContainers().subscribe((result) => {
     //Data
      this.dataSource = new MatTableDataSource(result);
      //Paginator
      this.dataSource.paginator = this.paginator;
      this.dataSource.filterPredicate = ((data: Container, filter: string): boolean => {
        const filterValues = JSON.parse(filter);
        let conditions = true;
        for (let filterKey in filterValues) {
          if (filterKey === 'SOG_MCOLH' || filterKey === 'LQOCH_SHM_LOEZI_QTSR' || filterKey === 'AORKH_MCOLH' || filterKey === 'TAOR_QTSR_EBRI') {
              conditions = conditions && data[filterKey].trim().toLowerCase().indexOf(filterValues[filterKey]) !== -1;
          }
          else if (filterValues[filterKey].length) {
            conditions = conditions && filterValues[filterKey].includes(data[filterKey].trim().toLowerCase());
          }
        }
        return conditions;
      });
      }
      )}

В основном то, что я хочучтобы достичь - это свернутая строка, показывающая, сколько у нее строк, и вы можете нажать на нее, чтобы открыть строки.

1 Ответ

0 голосов
/ 11 июля 2019

Это не выходит из коробки с угловым материалом.Есть несколько решений, чтобы сделать это самостоятельно.Вот еще один пост SO, в котором даются некоторые указания: Матричная таблица угловых материалов Группировка строк

Вторая ссылка StackBlitz , представленная там, дает хороший пример таблицы с использованием группировкиrow.

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

...