Блог

В настоящее время у меня есть функция, которая удаляет столбцы из таблицы таблиц. Это работает отлично, хотя, когда я собираюсь добавить столбец обратно в таблицу, поскольку индекс столбца не сохраняется. Есть ли какой-либо способ сохранить порядок столбцов при повторном добавлении столбцов? Или потенциально даже лучший способ сделать это ?!

Спасибо

 component.ts

  dataSource : DataSource;
  displayedColumns = [
    "COLUMN1",
    "COLUMN2",
  ];

  columnClick(colName: string) {
    const colIndex = this.displayedColumns.findIndex(col => col === colName);
    
    if (colIndex >= 0) {
      this.displayedColumns.splice(colIndex, 1);
    } else {
      this.displayedColumns.push(colName);
    }
  }
 

 component.html

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="columnClick('COLUMN1')">
    <mat-icon></mat-icon>
    <span>COLUMN1/span>
  </button>
  <button mat-menu-item (click)="columnClick('COLUMN2')">
    <mat-icon></mat-icon>
    <span>COLUMN2</span>
  </button>
</mat-menu>

<div class='table-container'>
    <mat-table mat-table [dataSource]="dataSource" matSort class="results">

      <ng-container matColumnDef="COLUMN1">
        <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>COLUMN1</mat-header-cell>
        <mat-cell *matCellDef="let row" >
          <span>{{row.COLUMN1}}</span>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="COLUMN2">
        <mat-header-cell mat-header-cell *matHeaderCellDef mat-sort-header>COLUMN2</mat-header-cell>
        <mat-cell *matCellDef="let row" >{{row.COLUMN2}}</mat-cell>
      </ng-container>
    </mat-table>
</div>
 

Вы можете достичь этого, используя columnDefinitions hide свойство and.
TS: код внутри компонента.

  columnDefinitions = [
    { def: 'id', label: 'ID', hide: this.id.value},
    { def: 'description', label: 'Description', hide: false}
  ]

  getDisplayedColumns():string[] {
    return this.columnDefinitions.filter(cd=>!cd.hide).map(cd=>cd.def);
  }
 

HTML:
Добавьте <mat-row> в свою таблицу

 <mat-row *matRowDef="let row; columns: getDisplayedColumns()"></mat-row>
 

Примечание: Полный демонстрационный код доступен в Stackblitz Demo.

Давайте представим, что у нас есть таблица с двумя столбцами: ID и name.

TS: По умолчанию идентификатор скрыт.

 columnDefinitions: ColumnDefinition[] = [
{ def: 'id', show: false },
{ def: 'nome', show: true }
];
    
getDisplayedColumns(): string[] {
return this.columnDefinitions.filter((cd) => cd.show).map((cd) => cd.def);
}
 

HTML: С помощью флажка мы переключаем столбцы таблицы.

 <mat-menu #menu="matMenu" class="customize">
  <span (click)="$event.stopPropagation()" *ngFor="let column of columnDefinitions; index as i">
    <mat-checkbox [(ngModel)]="column.show"></mat-checkbox>
    {{ column.def | titlecase }}
    <br />
  </span>
</mat-menu>
 

И нам нужно вызвать функцию getDisplayedColumns():

 <mat-header-row *matHeaderRowDef="getDisplayedColumns(); sticky: true"></mat-header-row>
          <mat-row *matRowDef="let row; columns: getDisplayedColumns()" class="element-row"></mat-row>