Cannot change Angular mat-table column order

Question

I created a base list using Material mat-table as on this page and and it works without any problem. However, when trying to move the actions column to the end column of the table a shown below, the order remains same at the first column and it does not make any sense.

<!-- I move this just below the tr tags -->
<!-- action column -->
<ng-container *ngIf="rowActionIcon?.length" [matColumnDef]="rowActionIcon">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let element" [id]="rowActionIcon" (click)="emitRowAction(element)">
    <button mat-button>
      <mat-icon>remove_shopping_cart</mat-icon>
    </button>
  </td>
</ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

I want also create 3 icons in the Actions column as the last column of the table. Any idea to fix the problem?

Answer 1

I have not used mat-table, but a quick look here tells me that the order depends on the definition of the row.

<!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

I think you need to change the order in your table.component.ts to this.displayedColumns = [...columnNames, this.rowActionIcon]