How do I update/add table column headers to Angular Material table?

I am trying to updated the current table headers and add new column headers as well. The issue is when I do that I lose data off of the main row, not the expanded rows. For example, I want to replace 'Weight', 'Symbol', etc headers to another column header name, the data for each column disappears on the main row.

I also want to add new column headers to the wrench icon dropdown, which adds and removes headers from the table via checkboxes.

html

<ng-container matColumnDef="{{toggleColDef}}">
<th mat-header-cell *matHeaderCellDef>
<button
mat-button
[matMenuTriggerFor]="menu"
class="table-config-menu my-wrench"
>
<mat-icon aria-hidden="false" aria-label="Example home icon"
>build</mat-icon
>
<mat-menu #menu="matMenu">
<span class="table-config-menu-label">Edit Columns</span>
<div
class="table-config-menu-options"
style="display: flex; flex-direction: column; padding: 8px"
>
<mat-checkbox
*ngFor="let cd of columnDefinitions; let i = index"
[checked]="isColumnVisible(cd.def)"
(change)="toggleColumn(cd.def, $event.checked)"
>
{{cd.label}}
</mat-checkbox>
</div>
</mat-menu>
</button>
</th>
<td mat-cell *matCellDef="let element"></td>
</ng-container>


This is where I've tried to changed the column headers in multiple places in the typescript.

ts

export class TableExpandableRowsExample implements AfterViewInit, OnDestroy {
columnsToDisplay: string[] = [
'Name',
'weight',
'symbol',
'position',
'Delivery Day',
];

columns: any[] = ['Name', 'weight', 'symbol', 'position', 'Delivery Day'];

columnDefinitions = [
{ def: 'Name', label: 'Name', visible: true },
{
def: 'weight',
label: 'Weight',
visible: true,
},
{
def: 'symbol',
label: 'Symbol',
visible: true,
},
{
def: 'position',
label: 'Position',
visible: true,
},
];


Also if there is a better more efficient way to change and add to the headers than the way I'm doing it that would be very beneficial also.

Stackblitz

Continue reading...