title: Primefaces datatable scrollable width auto
body: <p>I have a Primefaces datatable:</p>
  
  <pre><code>&lt;p:dataTable id="vmTbl" value="#{plnVacationMatrix.vacationList}" var="v" scrollable="true" 
    frozenColumns="2" scrollWidth="1000" scrollHeight="600"&gt;
  
      &lt;p:column headerText="Employee" style="min-width:330px"&gt;
          &lt;h:outputText value="#{v.employee.surnameNameCode}" /&gt;
      &lt;/p:column&gt;
  
      &lt;p:column headerText="Company" style="min-width:200px"&gt;
          &lt;h:outputText value="#{v.company.shortName}" /&gt;
      &lt;/p:column&gt;
  
      &lt;p:column headerText="1" style="min-width:20px"&gt;
          &lt;h:outputText value="#{v.week1}" /&gt;
      &lt;/p:column&gt;
  
      (...)
  
  &lt;/p:datatable&gt;
  </code></pre>
  
  <p>In the table there are 55 columns in total and they don't fit the viewport.
  I'd like to have this table width the same as viewport, but primefaces requires to specify <strong>scrollWidth</strong> and <strong>scrollHeight</strong> of the table when using <strong>scrollable</strong>.</p>
  
  <p>I've tried to use jQuery to fix the table with this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          var totalWidth = $(window).width();
          var totalHeight = $(window).height();
          $(".ui-datatable-frozenlayout-right .ui-datatable-scrollable-header").width(totalWidth - 500);
          $(".ui-datatable-frozenlayout-right .ui-datatable-scrollable-body").width(totalWidth - 500);
          $(".ui-datatable-scrollable-body").height(totalHeight - 100);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>... but the above changes table during data loading, and after table is fullfilled it takes again values from <strong>scrollWidth</strong> parameter :-(</p>
  
  <p>Do you have any idea how to solve that?</p>