Dynamically changing the column header text in OJET Table

Requirement:
                     Dynamically change OJET table header text,It will helpful for translations and keep maintaining lables in seperate file.

Syntax for OJET Table in html:

 <oj-table id='table' aria-label='Departments Table'
                      data='[[pagingDatasource]]'
                      on-oj-before-current-row='[[onSelectRow]]'
                      columns-default='{"sortable": "disabled"}'
                      columns='[{"headerText": "Department ID"},
                      {"headerText": "Dapartment Name"},
                      {"headerText": "Department Description"}]'
                      row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_tmpl", true)]]'>
         
            </oj-table>

            <script type="text/html" id="row_tmpl">
                <tr>
                    <td data-bind="text: departmentID">
                    </td>
                    <td data-bind="text: departementName">
                    </td>
                    <td data-bind="text: departmentDescription">
                    </td>
                </tr>

                </script>

In the above code, header text we are giving in static format. If you want to add in dynamically,we need to override in respective js file like below,

self.departmentId= ko.observable('Dept ID');
self.departmentName= ko.observable('Dept Name);
self.departmentDesc= ko.observable('Dept Description');

Add below code in one of OJET life cycle method.

  self.handleBindingsApplied = function () {
       
$("#table")[0].columns =  [{"headerText": self.departmentId()},
                      {"headerText": self.departmentName()},
                      {"headerText": self.departmentDesc()}
                   ];
}