//new column definition array
var newColumns = [
{title:"Name", field:"name", sorter:"string", width:200},
{title:"Age", field:"age", sorter:"number", hozAlign:"right", formatter:"progress"},
{title:"Height", field:"height", formatter:"star", hozAlign:"center", width:100},
{title:"Favourite Color", field:"col", sorter:"string"},
{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
],
table.setColumns(newColumns) //overwrite existing columns with new columns definition array
<div>
<button id="edit-table">Edit Table</button>
</div>
<div>
<button id="cancel-edit-table">Cancel Edit Table</button>
</div>
document.getElementById("edit-table").addEventListener("click", function () {
var newColumns = [
{formatter: "rowSelection", titleFormatter: "rowSelection", headerSort: false, cellClick: function (e, cell) {
cell.getRow().toggleSelect();
}},
{
title: "emp_name",
field: "emp_name",
sorter: "string",
headerFilter: "input",
editor: "input",
},
{
title: "email",
field: "email",
sorter: "string",
headerFilter: "input",
editor: "input", },
{
title: "gender",
field: "gender",
sorter: "string",
headerFilter: "input",
editor: "select",
editorParams: {
values: {
"male": "male",
"female": "female",
}},
},
{
title: "salary",
field: "salary",
sorter: "string",
headerFilter: "input",
editor: "input", },
{
title: "city",
field: "city",
sorter: "string",
headerFilter: "input",
editor: "input",
}
];
table.setColumns(newColumns);
});
document.getElementById("cancel-edit-table").addEventListener("click", function () {
var oldColumns = [
{
title: "emp_name",
field: "emp_name",
sorter: "string",
headerFilter: "input",
},
{
title: "email",
field: "email",
sorter: "string",
headerFilter: "input",
},
{
title: "gender",
field: "gender",
sorter: "string",
headerFilter: "input",
},
{
title: "salary",
field: "salary",
sorter: "string",
headerFilter: "input",
},
{
title: "city",
field: "city",
sorter: "string",
headerFilter: "input",
},
];
table.setColumns(oldColumns);
});