title: jQuery DataTables with "scrollX": true Initially does not render columns
body: <p>I have an web app that includes a data table and I am trying to get it to be responsive to changing viewport sizes ( i.e. changing the width of the browser window or running on devices with different screen resolutions like laptop vs tablet vs smartphone )</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div ng-hide="loading" class="panel pagination-inverse m-b-0 clearfix"&gt;
      &lt;table id="data-table-pendingList" data-order='[[1,"desc"]]' class="table table-bordered table-hover" style="width: 100%;"&gt;
          &lt;thead&gt;
              &lt;tr class="lime"&gt;
                  &lt;th&gt;Order ID&lt;/th&gt;
                  &lt;th&gt;Order Date&lt;/th&gt;
                  &lt;th class="text-center"&gt;First Name&lt;/th&gt;
                  &lt;th class="text-center"&gt;Last Name&lt;/th&gt;
                  &lt;th class="text-center"&gt;License Number&lt;/th&gt;
                  &lt;th class="text-center"&gt;Quantity&lt;/th&gt;
                  &lt;th class="text-center"&gt;Total Amount&lt;/th&gt;
                  &lt;th data-sorting="disabled"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the supporting JS/SQ:</p>
  
  <pre><code>if ($('#data-table-pendingList').length !== 0) {
      $('#data-table-pendingList').DataTable({
          destroy: true,
          aaData: $scope.OrderItems,
          aoColumns: [
              { "sTitle": "Order ID", "mData": "ConfimationNumber", "sClass": "left" },
              { "sTitle": "Order Date", "mData": "OrderDate", "sClass": "left" },
              { "sTitle": "First Name", "mData": "FirstName", "sClass": "left" },
              { "sTitle": "Last Name", "mData": "LastName", "sClass": "left" },
              { "sTitle": "Patient ID", "mData": "LicenseNumber", "sClass": "left" },
              { "sTitle": "Quantity", "mData": "Quantity", "sClass": "right" },
              { "sTitle": "Total Amount", "mData": "TotalAmount", "sClass": "right" },
              { "sTitle": "", "mData": "ApplicationStatus", "defaultContent": '&lt;td&gt; &lt;a id="btnEdit" class="btn btn-success btn-xs"&gt;&lt;i ng-if="ApplicationStatus == 8" class="fa fa-edit fa-fw"&gt;&lt;/i&gt; Modify&lt;/a&gt;&lt;/td&gt;' },
          ],
          responsive: true,
          colReorder: false,
          keys: true
      });
  </code></pre>
  
  <p>When run with the above code the data table initially looks ok on my laptop monitor at or near full screen:
  <a href="https://i.stack.imgur.com/eoKsL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eoKsL.png" alt="enter image description here"></a>
  Notice how the dataTable starts to bleed outside it containing panel. and if I go smaller still it will bleed outside the viewport entirely ( with no horizontal scroll bar )</p>
  
  <p>But if I resize my Browser window's width narrower it looks like this:
  <a href="https://i.stack.imgur.com/TnF8A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TnF8A.png" alt="enter image description here"></a></p>
  
  <p>If I add ScrollX to the JS side like this:</p>
  
  <pre><code>if ($('#data-table-pendingList').length !== 0) {
      $('#data-table-pendingList').DataTable({
          destroy: true,
          aaData: $scope.OrderItems,
          aoColumns: [
              { "sTitle": "Order ID", "mData": "ConfimationNumber", "sClass": "left" },
              { "sTitle": "Order Date", "mData": "OrderDate", "sClass": "left" },
              { "sTitle": "First Name", "mData": "FirstName", "sClass": "left" },
              { "sTitle": "Last Name", "mData": "LastName", "sClass": "left" },
              { "sTitle": "Patient ID", "mData": "LicenseNumber", "sClass": "left" },
              { "sTitle": "Quantity", "mData": "Quantity", "sClass": "right" },
              { "sTitle": "Total Amount", "mData": "TotalAmount", "sClass": "right" },
              { "sTitle": "", "mData": "ApplicationStatus", "defaultContent": '&lt;td&gt; &lt;a id="btnEdit" class="btn btn-success btn-xs"&gt;&lt;i ng-if="ApplicationStatus == 8" class="fa fa-edit fa-fw"&gt;&lt;/i&gt; Modify&lt;/a&gt;&lt;/td&gt;' },
          ],
          responsive: true,
          colReorder: false,
          keys: true
          , "scrollX": true //&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;=====================
      });
  </code></pre>
  
  <p>The table INITIALLY displays like this:
  <a href="https://i.stack.imgur.com/xUUW6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xUUW6.png" alt="enter image description here"></a>
  Notice how all the columns except the first one are gone but I get a detail "+" button. </p>
  
  <p>Finally if I manually resize my browser's window it renders the way I want it to:
  <a href="https://i.stack.imgur.com/F4d83.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F4d83.png" alt="enter image description here"></a>
  Here we see that all the data is displayed and we get a nice horizontal scroll bar.</p>
  
  <p><strong>What do I need to do so my dataTable gets rendered with the horizontal scroll bar from</strong> <code>, "scrollX": true</code> <strong>initially - without having to resize my browser?</strong>  If a User was running the app in a browser full screen but on a smartphone or small tablet they would see the "No column" version of the dataTable and it would never occur to them to exit full screen then adjust the screen size. (Toggling the full screen mode will also render the DataTable correctly)</p>
  
  <p>I have tried adding this line to my JS after the table was set up :</p>
  
  <pre><code>if ($('#data-table-pendingList').length !== 0) {
      $('#data-table-pendingList').DataTable({
          destroy: true,
          aaData: $scope.OrderItems,
          aoColumns: [
  ...
      responsive: true,
      colReorder: false,
      keys: true
      , "scrollX": true
  });
  
  $('#data-table-pendingList').DataTable().columns.adjust();  //&lt;&lt;&lt;&lt;================
  </code></pre>
  
  <p>Or with the adjust part of the datatable setup like this:</p>
  
  <pre><code>if ($('#data-table-pendingList').length !== 0) {
      $('#data-table-pendingList').DataTable({
          destroy: true,
          aaData: $scope.OrderItems,
          aoColumns: [
  ...
      responsive: true,
      colReorder: false,
      keys: true
      , "scrollX": true
  }).columns.adjust();//&lt;&lt;&lt;&lt;================
  </code></pre>
  
  <p>And I even tried adding the <code>autoWidth: true</code> parameter, but none of it makes any difference as the initial dataTable with <code>"scrollX": true</code>  is always getting rendered with the columns hidden version instead of all columns displayed with horizontal scroll bar.</p>
  
  <p><strong>So please help. What do I need to do so my dataTable gets rendered with the horizontal scroll bar from</strong> <code>, "scrollX": true</code> <strong>initially - without having the user doing something to force the dataTable to re-render?</strong>  </p>