[bootstrap 4] dt-head-center class is being applied to both head and body

vishal_bhavsar

Hello,

I am using bootstrap 4 with datatables. I generated the datatable with json data.
I wanted to align table headers to center and body to left. So, I added classes to respective columns/columnDefs and added respective css as mentioned in this question.

The installation steps are same as this question.

However, these classes are being added to both header and body. i.e. when I added the class dt-head-center, this class is being added to both header cell as well as body cells.

My datatable code looks like:

var table = $("#login-details-table").DataTable({
    data: data,
    select: true,
    dom: 'Bfrtip',
    columnDefs: [
      {
          targets: 1,
          className: 'dt-head-center dt-body-left'
      }
    ],
    columns: [
      {
        title: "Login URL",
        data: 'loginUrl'
      },
      {
        title: "Username",
        data: 'username'
      }
    ]
 });

This code is generating following html:

header

<th class="dt-head-center sorting" tabindex="0" aria-controls="login-details-table" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 197px;">Username</th>

body

<td class=" dt-head-center">some text</td>

I also tried to use className in columns instead of columnDefs. But the output is same.

kthorngren

The columns.className option does apply the class to both the header and table cells for the defined column. You can use jQuery or your preferred method to remove the class from the header inside initComplete.

Kevin