6

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

vr3w3c9
  • 1,118
  • 8
  • 32
  • 57
  • https://stackoverflow.com/questions/7434203/how-to-set-width-of-a-pcolumn-in-a-pdatatable-in-primefaces-3-0#comment86619301_41901744 – Andrew Apr 12 '18 at 17:11

3 Answers3

13

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>
Divyesh Kanzariya
  • 3,629
  • 3
  • 43
  • 44
iltaf khalid
  • 9,928
  • 5
  • 30
  • 34
7
<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

ketan
  • 19,129
  • 42
  • 60
  • 98
Chandrahasan
  • 1,991
  • 24
  • 26
5

style="table-layout: fixed" on the table element is what you are looking for. Default table layout is "auto", which makes sure no cells are smaller than the content. Be ware that text that can't fit will overflow.

Rasmus Franke
  • 4,434
  • 8
  • 45
  • 62
  • Thanks a lot for your response. I have a similar issue for command button as well. I have set the width of the button to a fixed value. But if the text on the button exceeds a certain limit, then only part of the text is visible in the button. Can you please suggest if there is any way to have the button the entire text within the width specified. THanks in Advance – vr3w3c9 Jun 22 '12 at 01:01
  • Setting no width at all would make the button large enough to fit the text in it. If you want a minimum width on the buttons (for some with very little text) you can use min-width: *px – Rasmus Franke Jun 22 '12 at 21:40
  • Hi Rasmus. Thanks for the response. I still have some issues with the column width, setting the style="table-layout: fixed" on the table element, seems to work fine for the JSF datatable. In my case, when I try to set the same for the primefaces datatable, it does not seem to work. The column width seems to depend upon the length of the text label specified. – vr3w3c9 Jun 23 '12 at 08:49
  • I tried adding table-layout fixed to a table generated by primefaces and set a column width, and it did reduce column width beyond the minimum values for fitting the headers. If you inspect the html generated by p:dataTables, does it put the style you set on the tag on the actual table or the generated surrounding div? – Rasmus Franke Jun 23 '12 at 14:49