I am currently utilizing an Angular Material table:
<div class="table-container">
<table mat-table [dataSource]="dataSource" class="child">
<mat-divider></mat-divider>
<ng-container matColumnDef="title" >
<th mat-header-cell *matHeaderCellDef> {{ 'GENERAL.TITLE' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{ (element.title | slice:0:20 )+ '...' }} </td>
</ng-container>
<ng-container matColumnDef="writerFullName">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.WRITER_ID' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.writerFullName}} </td>
</ng-container>
<ng-container matColumnDef="paytype">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.PAY_TYPE' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{'ENUM.PAY_TYPE.'+element.payType | translate }} </td>
</ng-container>
<ng-container matColumnDef="likeCount">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.LIKE_COUNT' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.likeCount | translate }} </td>
</ng-container>
<ng-container matColumnDef="createdOnUtc">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.CREATE_DATE' | translate }} </th>
<td mat-cell *matCellDef="let element">
<span *ngIf="lang=='fa'">{{ element.createdOnUtc | jalali }}</span>
<span *ngIf="lang!='fa'"> {{element.createdOnUtc | date: 'dd/MM/yyyy hh:mm'}} </span>
</td>
</ng-container>
<!-- actions -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>
{{ 'GENERAL.ACTIONS' | translate }}
</th>
<td mat-cell *matCellDef="let row; let i=index;">
<a mat-icon-button [matTooltip]="'TOOLTIP.EDIT' | translate" color="primary" uaccess
[permission]="':Post:Put'" [routerLink]="['/post/',row.id,'edit']">
<mat-icon aria-label="Edit">edit</mat-icon>
</a>
<a mat-icon-button (click)="showDetail(row)" [matTooltip]="'TOOLTIP.DETAIL' | translate">
<i class="far fa-eye" ></i>
</a>
<button mat-icon-button [matTooltip]="'TOOLTIP.DELETE' | translate" color="accent" uaccess
[permission]="':Post:Delete'" (click)="delete(row.id)">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-progress-bar *ngIf="dataSource.loading$ | async" mode="indeterminate"></mat-progress-bar>
<mat-paginator [length]="dataSource.length$ | async" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
showFirstLastButtons></mat-paginator>
</div>
Now, I am looking to customize the table by hiding some unnecessary columns. How can I achieve this?
/*****************************/*****************************/**************************/************************/*************************/ /*****************************/*****************************/******************