Issue
What is the simplest way, to duplicate a column side-by-side with identical data?
I don't like to modify the JSON data and use two different matColumnDef keys for the same data, this would be overkill.
data:
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}
];
attempt to duplicate:
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Duplicate Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
Error message:
Duplicate column definition name provided: "name".
The error message is only visible in stackblitz with "open in new tab" in the top right and then using the browser console.
https://stackblitz.com/edit/jska2p?file=src%2Fexample%2Ftable-basic-example.html
Is there a nice trick to bypass the warning?
Solution
No, you can't do that, because the system will got confused in HTML, the page need the variable displayedColumns, so its on the loop,
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
if you want need the same data, you just add column in the array displayedColumns, just like this:
displayedColumns: string[] = ['position', 'name', 'duplicateName', 'weight', 'symbol'];
in HTML:
<!-- Duplicate Name Column -->
<ng-container matColumnDef="duplicateName"> //Just change in here
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container>
Answered By - Helmi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.