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

Error message in React NodeJs stack: "The property ' ' does not exist on type 'never' in Typescript."

When ts-loader is used to import .json files, the declaration files are outputted into a separate

Customizing Angular 2's Webpack environment setup dynamically

The inclusion of a custom list preview with prepare in the sanity schema results in errors during the construction

Is "await" considered as a reserved word in ReactJS when using TypeScript?

Having trouble installing dependencies in a React project with TypeScript due to conflicts

Component does not detect change when the same number is sent as input

Reduce the use of if statements

Leverage glob patterns within TypeScript declaration files

Tips for effectively handling the data received from a webservice when logging into a system

Is it possible to create a map of functions that preserves parameter types? How can variadic tuple types in TypeScript v4 potentially enhance this

Encountering an issue with applying D3 fill to a horizontal stacked bar chart in Angular using TypeScript. When using .attr("fill", ..) in VSC, an error stating "No overload matches this call" is displayed

Using both withNextIntl and withPlaiceholder simultaneously in a NextJS project causes compatibility issues

The type 'FormikValues' is deficient in the subsequent properties compared to the type 'Exact<{'

Issue: Unable to locate a matching object '[object Object]' of type 'object'. NgFor can solely bind to data structures like Arrays and Iterables

How can I capture the click event on the oktext in Ionic?

Is it possible to verify if an object matches a type without explicitly setting it as that type?

What is the best way to retrieve a function's response depending on the parameters provided?

Display issue with React TypeScript select field

Dynamic Angular routes with varying numbers of parameters