Add aria-label to table header in datatable

let checkboxColumn = `<div class="checkbox c-checkbox" >
                          <label> <input type="checkbox"
                              ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
                               /> <span
                              class="fa fa-check"></span>
                          </label>
                        </div>`;

   self.dtColumns = [
      DTColumnBuilder.newColumn("select").withTitle(checkboxColumn).notSortable(),
      DTColumnBuilder.newColumn("type").withTitle("Type").notSortable().withClass('min-width-100'),
      DTColumnBuilder.newColumn("ip").withTitle("Value").notSortable().withClass('min-width-250'),
      ]

I am creating a data table in which there is a checkbox in the header, clicking on it will select all the checkboxes of the row. The issue is that checkboxcolumn is getting rendered in aria-label as well. The snippet below will tell you what is getting rendered:

<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;" aria-label="
   <input type=&quot;checkbox&quot;
   ng-model=&quot;self.headerCheckBox&quot; ng-change=&quot;self.headerSelected()&quot;
   /> <span
   class=&quot;fa fa-check&quot;>
   ">
   <div class="checkbox c-checkbox">
      <label> <input type="checkbox" ng-model="self.headerCheckBox" ng-change="self.headerSelected()"> <span class="fa fa-check"></span>
      </label>
   </div>
</th>

You can see the content of the header and aria-label value are the same. How can I assign a different value to the aria-label? Help will be appreciated.

Answer

As such there is no way to assign different value to aria-label. But you can add checkbox to the table header by using the below code. Here we will add the checkbox to the header after the table has been loaded.

Firstly we have defined an empty table header:

self.dtColumns = [
  DTColumnBuilder.newColumn("select").withTitle("").notSortable().withClass('select-policy-header'),
  DTColumnBuilder.newColumn("type").withTitle("Type").notSortable().withClass('min-width-100'),
  DTColumnBuilder.newColumn("ip").withTitle("Value").notSortable().withClass('min-width-250'),
]

Now we will append the checkbox to the empty header:

    var checkbox_add = `<div class="checkbox c-checkbox" >
          <label> <input type="checkbox"
              ng-model="self.headerCheckBox" ng-change="self.headerSelected()"
              /> <span
              class="fa fa-check"></span>
          </label>
        </div>`;

$timeout(
      function () {
            let element = document.getElementsByClassName("select-policy-header")[0];
            angular.element(element).append($compile(checkbox_add)($scope));
          }, 1000)

This should work for you.