setting Column width for Datatable primefaces

Question

Need some help in setting the column width for the datatable. However, the datatable width does not seem to be uniform.The width of the column in the datatable, seems to vary depending on the column header length. please refer the code below.

 <p:column style="text-align: left; width:15px;" >
           <f:facet name="header">
              <h:outputText id="SalesHistoryID" value="View Sales History/Forecast"/>
           </f:facet>
           <h:commandLink  id="ForecastID" value="View"/>

In the above case, the column header value length 'View Sales History/Forecast' seems to be large and hence the column width also seems to expand depending on the column header text value. Can you please let me know if there is any way to actually maintain uniformity in the column width and that not depend on the column header text value.

In case if the column header text length is too large, is there a way to maintain uniformity in the column width ?? please Assist. Thanks in Advance

Answer 1

To set column width for a datatable, set resizableColumns="true" property for datatable and then set width for a specific column using width="10" for a column, thats it :)

<p:dataTable id="dataTable" var="question" value="#{QuestionsMB.questionsList}" rowKey="#{question.id}"
                        paginator="true" rows="10" selection="#{QuestionsMB.selectedQuestions}" 
                        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        lazy="true" rowsPerPageTemplate="10,15,50,100"
                        resizableColumns="true"
                        emptyMessage="No question found with given criteria" >
                <f:facet name="header">
                    Questions List
                </f:facet> 

                <p:column selectionMode="multiple"/> 

                <p:column id="questionHeader" width="10">
                    <f:facet name="header">
                        <h:outputText maxlength="20" value="Question text :" />
                    </f:facet>
                    <p:commandLink value="#{question.questionText}" update=":questionDetailForm:display" oncomplete="questionDialog.show()"  title="View">
                        <f:setPropertyActionListener value="#{question}" target="#{QuestionsMB.selectedQuestion}" />   
                    </p:commandLink>

                </p:column>
</p:dataTable>   

Answer 2

<p:dataTable id="id"  value="#{bean.mainList}"  var="dp" tableStyle="width:auto"  resizableColumns="true"  >

tableStyle="width:auto" , resizableColumns="true" this will help to fit columns