title: jsf primefaces datatable p:columns
body: <p>ive got a Primefaces DataTable like this </p>
  
  <pre><code>&lt;p:dataTable
     value="#{valueList.value}"
     var="value"
     selection="#{valueList.selected}"
     id="measurementTable"
     paginator="true"
     rows="20"
     rowsPerPageTemplate="20,25,30,35,40"/&gt;
  </code></pre>
  
  <p>and dynamic Columns with this</p>
  
  <pre><code>&lt;p:columns
    value="#{valueList.columns}"
    var="column"
    columnIndexVar="colIndex"
   /&gt;
  </code></pre>
  
  <p>this works fine and my Datatable looks good , but when i add</p>
  
  <pre><code>  sortBy="#{value.charge}"
  </code></pre>
  
  <p>to <code>p:columns</code> and i was click on column to sort the css style is destroyd and ive got a List with my Data not a DataTable, this is very ugly.</p>
  
  <hr>
  
  <p>My code </p>
  
  <pre><code>&lt;p:dataTable
          value="#{measurementList.measurements}"
          var="measurement"
          selection="#{measurementList.selected}"
          id="measurementTable"
          paginator="true"
          rows="20"
          rowsPerPageTemplate="20,25,30,35,40"
          rowKey="#{measurement.mdkFid}"
          emptyMessage="#{measurementList.getCapString('no_records_found')}"&gt;
  
          &lt;p:column selectionMode="multiple" style="width:18px" /&gt;
  
          &lt;p:column&gt;
              &lt;p:commandLink title="#{measurementList.getString('edit')}" update=":contentPanel"&gt;
                  &lt;h:outputText styleClass="ui-icon ui-icon-pencil" /&gt;
                  &lt;f:actionListener binding="#{measurementList.editSelected(measurement) }" /&gt;
                  &lt;f:actionListener binding="#{navigation.goTo('/xhtml/measurements/editMeasurement.xhtml') }" /&gt;
              &lt;/p:commandLink&gt;
          &lt;/p:column&gt;
  
          &lt;p:columns
              value="#{measurementList.columns}"
              var="column"
              columnIndexVar="colIndex"
              styleClass="measurementListDatatableColumn"
              sortBy="#{column.displayName}" 
              &gt;
              &lt;f:facet name="header"&gt;#{column.displayName}&lt;/f:facet&gt;
                  &lt;p:column&gt;
                      #{measurement[column.methodName]}
                  &lt;/p:column&gt;
          &lt;/p:columns&gt;
  </code></pre>