So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.

Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.

How can I resolve this?

When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.

Initialisation code:

$('#item-search').DataTable( {
          ajax: {
            "data": {
              type: "map_items",
              map_id: this.map_id
            },
            "dataSrc": (r) => {
              console.log(r);
              return r.data;
            },
            type: "POST",
            url: "src/php/search.php"
          },
          autoWidth : false,
          columns: [
            {
              "data": "brand"
            },
            {
              "data": "name"
            },
            {
              "data": "quantity"
            },
            {
              "data": "measurement"
            },
            {
              "data": "type"
            },
          ],
          dom: 'rtlip',
          language: {
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoFiltered": ""
          },
          lengthMenu: [ 1, 2, 3 ],
          pageLength: 1,
          processing: true,
          responsive: true,
          scrollX: true,
          select: {
            style: "multi"
          },
          serverSide: true
      });

So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.

Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.

How can I resolve this?

When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.

Initialisation code:

$('#item-search').DataTable( {
          ajax: {
            "data": {
              type: "map_items",
              map_id: this.map_id
            },
            "dataSrc": (r) => {
              console.log(r);
              return r.data;
            },
            type: "POST",
            url: "src/php/search.php"
          },
          autoWidth : false,
          columns: [
            {
              "data": "brand"
            },
            {
              "data": "name"
            },
            {
              "data": "quantity"
            },
            {
              "data": "measurement"
            },
            {
              "data": "type"
            },
          ],
          dom: 'rtlip',
          language: {
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoFiltered": ""
          },
          lengthMenu: [ 1, 2, 3 ],
          pageLength: 1,
          processing: true,
          responsive: true,
          scrollX: true,
          select: {
            style: "multi"
          },
          serverSide: true
      });

• javascript
• jquery
• css
• datatables

• Did you check the DataTables support forum? That question might have been answered there already. – Difster Commented Jul 17, 2017 at 4:57
• @Difster been googling several variations of my problem. Most of the answers are using older versions. – A. L Commented Jul 17, 2017 at 4:58

4 Answers 4

In data table initialization include following property.

autoWidth : true

Along with add this

"fnInitComplete": function(oSettings) {
                        $( window ).resize();
                    }

 "fnDrawCallback": function(oSettings) {
      $( window ).trigger('resize');
    }

DataTable should be initialized with the following code to achieve horizontal scrolling:

"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns":   {
   "leftColumns": 1
}

This work in my angular project

this.dtTarifas = {
      scrollX: true,
      autoWidth: false,
      lengthChange: false,
      responsive: false
}

I have in my package.json "angular-datatables": "7.0.0"

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});