Add dynamic column in table with editable headers

Question

I want to create a table where user can add dynamic columns on Add button click shown in attached below pic and also can edit header names. In the table 1st column would be fixed default input text and remaining all would be checkbox columns which will be dynamically added on button click every time.

Vinitha Balasubramanian · Answer

Hi Mukarram,Greetings from Syncfusion support.Query: Add dynamic column in table with editable headersBased on your query, we understand that you want to edit the
header values in the EJ2 Grid. However, we regret to inform you that our Grid
component does not support editing of header values.Regards,Vinitha Balasubramanian

Mukarram Ali · Answer

what about 2nd part of above query i.e.  user can add dynamic columns on Add button click shown in attached above pic.

In the table 1st column would be fixed default input text and remaining all would be checkbox columns which will be dynamically added on button click every time.

Mukarram Ali · Answer

my query is still open. Could you please look into it(above comment).

Rajapandiyan Settu · Answer

Hi
Mukarram,By
using the following code, you can dynamically add columns to the Grid component
through the button click.refreshColumns: https://ej2.syncfusion.com/angular/documentation/api/grid/#refreshcolumns
getColumnByField: https://ej2.syncfusion.com/angular/documentation/api/grid/#getcolumnbyfield

btnClick1(args) {
      if (this.grid.getColumnByField('Verified1') == null) {
        // push the new column to the Grid’s
  Columns
        this.grid.columns.push({
          field: 'Verified1',
          width: 120,
          displayAsCheckBox: true,
        } as any);
        // refresh the Grid columns
        this.grid.refreshColumns();
      }
    }

Sample:
https://stackblitz.com/edit/angular-kavrgs?file=src%2Fapp.component.ts

Regards,Rajapandiyan
S