Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

Question

Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

What is the most efficient method to display a duplicated column with the same data side by side without altering the JSON or using separate matColumnDef keys?

Data:

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}
];

Attempted duplication:

  <!-- 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 can only be seen in stackblitz under "open in new tab" at the top right and then check the browser console.

https://stackblitz.com/edit/jska2p?file=src%2Fexample%2Ftable-basic-example.html

Is there a clever workaround to bypass this warning?

angular typescript angular-material

Answer 1

Answer №1

Sorry, that won't work because it will cause confusion in the system. When working with HTML, the page requires the variable displayedColumns to be included in the loop.

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

If you need the same data, simply add a column to the displayedColumns array like this:

displayedColumns: string[] = ['position', 'name', 'duplicateName', 'weight', 'symbol'];

In your HTML code:

  <!-- 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>

Answer 2

Sorry, that won't work because it will cause confusion in the system. When working with HTML, the page requires the variable displayedColumns to be included in the loop.

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];

If you need the same data, simply add a column to the displayedColumns array like this:

displayedColumns: string[] = ['position', 'name', 'duplicateName', 'weight', 'symbol'];

In your HTML code:

  <!-- 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>

Error occurs in Angular Mat Table when attempting to display the same column twice, resulting in the message "Duplicate column definition name provided" being

Answer №1

Similar questions

Ways to access UserProfile in a different Dialogio

Acquiring the download link for Firebase Storage in Angular 2+ technology

Leverage the power of rxjs to categorize and organize JSON data within an

Angular: Issue encountered when accessing nested properties within an interface due to reading properties of undefined

A versatile Material UI paper that adjusts its dimensions dynamically

The navigator.geolocation.watchPosition call did not return any available position information

"Encountering an issue with mounting components in React Unit Testing with Jest and Typescript

Is there a way to set the size of my unique carousel design?

What is the best way to verify both a null value and a length simultaneously within a template condition?

Error occurred due to changed expression after initial checking in Angular's dynamic template management

Tips for Disabling ML5 Posenet

Is there a way to verify if a value is undefined before including it as an object field?

Unable to transfer information between two components using a service if the recipient component has not been initialized

The attribute 'getValue' is not a valid property for the data type 'Subject<boolean>'

Incorporating ngrx/Store into a current Angular application

Error: ChangeDetectorRef provider is missing from the NullInjector

What is the best way to dynamically update styleUrls or style properties in Angular?

Set up local npm packages for easy access by different projects

Trouble with integration of independent schematic package within Angular application development

There is no way for me to view my loader more than once