3

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?

Ruben Helsloot
  • 12,582
  • 6
  • 26
  • 49
Jack
  • 1
  • 21
  • 118
  • 236

1 Answers1

5

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]

Anish
  • 377
  • 3
  • 8
  • What about creating multiple icons under single column? – Jack Oct 14 '20 at 12:49
  • You should be able to add multiple buttons inside the `` just after the current button, and move the click event onto the buttons instead of on the td component – Anish Oct 14 '20 at 12:57
  • Definitely, I added extra `mat-cell` and that causes the problem. – Jack Oct 14 '20 at 13:06
  • Do you suggest to use `delete` or `delete` ? Which one do you suggest? The latter does not have clickable property. – Jack Oct 14 '20 at 13:08
  • ` ` this should work.. you still have to move the click property onto the buttons from the td – Anish Oct 14 '20 at 13:13
  • No I fixed it, I just want to be sure what do you suggest as icon in Material table? `delete` or `delete`, I meant `mat-icon` or ``? – Jack Oct 14 '20 at 13:16
  • On the other hand, I think to use 3-4 action buttons side by side on the last column. I can also make something like three dots and open the buttons, or add a dropdown with these 3-4 options. Which one would be better according to your experiences? – Jack Oct 14 '20 at 13:17
  • I think `` should be used, since you are building an angular application. As for the multiple buttons, it depends on what you are trying to do. The three dots seem like a better option given you have multiple buttons. You could even open up a horizontal list of icon buttons on clicking the three dots. – Anish Oct 14 '20 at 13:24