How to over come data table dynamic column duplicate issue?

Question

I need to generate columns dynamically based on input target property component, But its making duplicate columns when you navigate to new record pages.

<template>
        <lightning-datatable
                key-field="id"
                hide-checkbox-column
                data={data}
                columns={columns}>
        </lightning-datatable>
</template>

Js:

import { LightningElement,api } from 'lwc';
const COLUMNS = [{label: 'Id', fieldName: 'id'},
                 {label: 'Name', fieldName: 'name'}];
export default class TestlwcDataTable extends LightningElement {
    columns=COLUMNS;
    data;
    @api fields='roll,staff';

    connectedCallback() {
        this.setColumns();
        this.setData();
    }

    async setColumns() {
        const cols = COLUMNS;
        this.fields.split(',').forEach((field) => {
            cols.push({label: field, fieldName: field});
        });
        this.column = cols;
    }

    async setData() {
        this.data=[{id: '1', name: 'Anand', roll:'CEO',staff: 'yes'},
                   {id: '2', name: 'Bala', roll:'CFO',staff:'no'},
                   {id: '3', name: 'Chandru', roll:'EEO',staff:'yes'}];
    }
}

First time its working without duplicate then when ever I open new record its duplicating columns.

I know we can use map to check unique before pushing column, but I need to know weather it is salesforce issue or expected behaviour ?

Answer 1

This is why you shouldn't be using forEach/push. Each time the method is called, the duplication occurs. Instead, use map:

this.column = this.fields.split(',').map(
  (field) => ({ label: field, fieldName: field })
);

This overwrites the previous values so they are consistent with the fields property.