Setting Column Width for Datatable primefaces

Question

Need help setting column width for datatable. However, the data width does not seem uniform. The column width in a datatable seems to vary depending on the length of the column header. see 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 length of the column heading “View Sales History / Forecast” seems large, and therefore, the column width also expands depending on the value of the text in the column heading. Could you tell me if there is a way to maintain uniformity in the width of the column and not depend on the value of the text in the column header.

If the length of the text in the column heading is too long, is there a way to maintain uniformity across the width of the column? Please, help. Thanks at Advance

Answer 1

style = "table-layout: fixed" in the table element is what you are looking for. The default format of the table is "auto", which ensures that no cells are smaller than the content. Be sure that text that does not fit will overflow.

Answer 2

To set the column width for datatable, set the datatable parameter to resizableColumns = "true" and then set the width for a specific column using width = "10" for 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 3

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

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