title: Dynamically scrollable Primefaces datatable
body: <p>We have a Primefaces datatable which has a non-fixed number of columns. Basically, some header columns contains "+" buttons that unfold other columns.
  Here are two pictures that show that behaviour:
  <a href="https://i.stack.imgur.com/V1Lvd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V1Lvd.png" alt="Folded column"></a>
  <a href="https://i.stack.imgur.com/tNXc5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tNXc5.png" alt="Unfolded column"></a></p>
  
  <p>These columns can have different widths (first one shows single digits, then doesn't need a lot of place while second one displays very long texts); each of them has a weight (we currently have 4 different weights).</p>
  
  <p>Last point, the number of columns varies from 10 to 19. That's a lot of columns for a screen.</p>
  
  <p>Thus, we would like to have the following behaviour:</p>
  
  <ul>
  <li>If the sum of every weight is less than a number, the datatable isn't scrollable.</li>
  <li>Else, the datatable is horizontally scrollable.</li>
  </ul>
  
  <p>I have worked on that question for a few hours... And I haven't managed to find a solution.</p>
  
  <hr>
  
  <p>Here is a MCV example:</p>
  
  <p>My backing bean:</p>
  
  <pre><code>public class Bean implements Serializable{
      public void display3rdColumn() {
          m3rdColumnDisplayed = !m3rdColumnDisplayed;
      }
  
      private boolean m3rdColumnDisplayed = false;
      public boolean isM3rdColumnDisplayed() {
          return m3rdColumnDisplayed;
      }
      public void setM3rdColumnDisplayed(boolean m3rdColumnDisplayed) {
          this.m3rdColumnDisplayed = m3rdColumnDisplayed;
      }
  
      private List&lt;Element&gt; elements = new ArrayList&lt;&gt;();
      public List&lt;Element&gt; getElements() {
          return elements;
      }
      public void setElements(List&lt;Element&gt; elements) {
          this.elements = elements;
      }
  }
  </code></pre>
  
  <p>JSF code:</p>
  
  <pre><code>&lt;p:dataTable value="#{bean.elements}"
               style="text-align:center;"&gt;
  
      &lt;p:column headerText="1st column"&gt;
          &lt;p:outputLabel value="1"/&gt;
      &lt;/p:column&gt;
  
      &lt;p:column&gt;
          &lt;f:facet name="header"&gt;
              &lt;p:outputLabel escape="false"&gt;
                  2nd column
                  &lt;br/&gt;
                  &lt;p:commandButton
                          icon="fa fa-plus"
                          actionListener="#{bean.display3rdColumn}"
                          update="@form"/&gt;
              &lt;/p:outputLabel&gt;
          &lt;/f:facet&gt;
          &lt;p:outputLabel value="Very very long description with a lot of text - don't I deserve a lot of place?"/&gt;
      &lt;/p:column&gt;
  
      &lt;p:column headerText="3rd column" rendered="#{bean.m3rdColumnDisplayed}"&gt;
          &lt;p:outputLabel value="Not that long description"/&gt;
      &lt;/p:column&gt;
  &lt;/p:dataTable&gt;
  </code></pre>
  
  <hr>
  
  <p>Does an "easy" solution exist? Or is this a really tough question?</p>