How to set columns header dynamically in wijmo grid?

Question

I have a wijmo grid which is setting the column header same as the datakey. I would like to set the column header different than how the datakey appears. But my data returns different number of columns. I tried with the following approach but its not working.

JS

 var columnList = ['a','b','c','d'];
 setColumnHeaders(columnList);// this a call from a different VM

 self.setColumnHeaders = function (columnList) {
   $.each(columnList, function (index) {
     self.columnsHeader.push(columnList[index]);                   
   });

 ko.applyBindings(viewModel, $(".container")[0]);  

HTML

 <table id="grid" data-bind="wijgrid: {
            data: data ,                
            columnsAutogenerationMode: false,                
            columns: [{headerText: columnsHeader}],
           "></table>

Answer 1

You can set dynamic column's header like this:
grid.columns[1].header = 'header-name';

Answer 2

As such, column headers does not exist as independent collection nor it supports two way binding so you cannot set them dynamically while initializing the grid. The only possible workaround is to create the complete columns collection manually including dataKey property, visible property etc. and then, set this collection to the columns property instead of headerText property