Create column

Create columns with the GridBase.setColumns() function. At this time, the name of the registered column must be undefined or unique.

var columns = [{
     "name": "column1",
     "fieldName": "Field1",
     "header": {"text": "Column 1"}
     "width": 90
   },{
     "name": "column2",
     "fieldName": "Field2",
     "header": {"text": "Column 2"}
     "width": 90
   },{
     "name": "column3",
     "fieldName": "Field3",
     "header": {"text": "Column 3"}
     "width": 90
   },{
     "name": "column4",
     "fieldName": "Field4",
     "header": {"text": "Column 4"}
     "width": 90
   },{
     "name": "column5",
     "fieldName": "Field5",
     "header": {"text": "Column 5"}
     "width": 90
   },{
     "name": "column6",
     "fieldName": "Field3",
     "header": {"text": "Column 6"}
     "width": 90
   }];
 
   gridView.setColumns(columns);

The GridBase.setColumns() function deletes existing columns and adds new columns using the column information passed as a parameter. In the example, columns column3 and column6 display the same Field3 field. In this way, one data field can be referenced by multiple columns simultaneously and displayed in different ways.

The function GridBase.columnByName() returns the column object corresponding to the given name.

var column = gridView.columnByName("column3");
alert(JSON.stringify(column));

If one result is expected, use the GridBase.columnByField() function.

Add dynamic column (field)

It seems uncommon to dynamically add new fields and columns to a grid. Normally, it will be rare for users to add or delete fields in business data structures, but that doesn't mean it's completely unexpected.

If this is the case, I will think about how to handle it and write a demo.

dataProvider.setFields and
Use the gridView.setColumns() function

You can set the entire structure of fields and columns, but

dataProvider.addField and
Use the gridView.addColumn() function

You can also add fields and columns separately.

provider.addField({
   fieldName: "TEXT_Column",
   valueType: "text",
});
 
viewer.addColumn({
   name: "TEXT_Column",
   fieldName: "TEXT_Column",
   width: 150,
   header: {
     text: "TEXT Column",
   },
   editor: { type: "line" },
});

place Holder Dynamically changing column properties{visible, editable}