feat(mat-table): The column ordering in the Mat Table isn't working when the columns and rows are based on different arrays

[uttamvs-rp]

Feature Description

I've got a situation where I need to use two different column arrays for the material table. The column rendering array has two properties: fieldName (which is the actual field from the backend API response) and displayName (the name that shows up in the UI). Here's a quick example:

<th mat-header-cell cdkDrag *matHeaderCellDef>{{column.displayName}}</th><td mat-cell *matCellDef="let element">{{element[column.fieldName]}}</td>

So, when I'm setting up the row, I've got this simple string array that just has the field names from the array above. This way, the actual data can connect with the table columns. Here's a quick example:

<tr mat-header-row *matHeaderRowDef="displayedColumnsFields"></tr><tr mat-row *matRowDef="let element; columns:displayedColumnsField;"></tr>

So after this code change, the material column reordering isn't working anymore. Does anyone know what might be going on or how to fix it? Or is this just a bug with the Angular Material table?

I've put together a working StackBlitz example here so you can get a better idea of what's going on: StackBlitz

Use Case

No response