Search code examples
javascriptdatatablesbootstrap-modalfixed

datatables fixed column not aligning in bootstrap modal

I am working with js datatables. I have a table in modal and I am trying to make make left most column fixed. Below is my script for datatables.

$('#table1').DataTable({
"dom": 'Bfrtip',
"bPaginate": false,
"bLengthChange": false,
"bInfo": false,
"bFilter": false,
"buttons": [{
    extend: 'excelHtml5',
    title: 'Excel1',
    sheetName: 'Sheet1'
}],
scrollY:        300,
scrollX:        true,
scrollCollapse: true,
paging:         false,
fixedColumns:   true
"ordering": false
});

Everything working fine except fixed columns. I have included fixed column css and Js.

The actual problem is, the table gets shrinks when I apply fixed columns.

Solution

  • Give this a try:

    $('#modal_ID').on('shown.bs.modal', function (e) {
  $($.fn.dataTable.tables(true)).DataTable().columns.adjust();});