p:dataTable with p:columns with custom widths

问题

I have a Datatable with dynamic columns via the p:columns tag and want to specify a different width for each column.

My code is as below

<p:dataTable id="scheduleDataTable" value="#{scheduleMB.scheduledRecords}" var="sched" rows="10">
        <p:columns value="#{scheduleMB.columns}" var="column" columnIndexVar="colIndex" styleClass="day-column">  
            <f:facet name="header">
                #{column.header}
            </f:facet>

            #{sched[column.property]}
        </p:columns>  
    </p:dataTable>

in the css file I have the width

.ui-state-default .day-column{
 width: 150px !important;
}

i even tried styld="width:150px;" both of them doesn't work, the columns are drawn with default values.

but i want different column widths, how do i do it. I tried like specifying multiple css in styleClass="col1,col2", specifying in facet like

<f:facet name="style">
    #{column.size}
</f:facet>

回答1:

The official way to set the column width for the PrimeFaces DataTable is to define the width attribute of the column element using a unitless integer. Like this:

<p:column width="70">
    <h:outputText value="#{element.prop}" />
</p:column>

You can use EL to let the controller define the width.

The advice applies to the 3.3 and 3.4 versions of PF and may be different for older ones. The details have changed several times over the last few version updates, so you may also wwant to consult the migration guide

回答2:

You can set the width of each column with EL width="#{column.width}". Your column class needs have a width property.

<p:dataTable id="scheduleDataTable" value="#{scheduleMB.scheduledRecords}" var="sched" rows="10">
    <p:columns value="#{scheduleMB.columns}" var="column" 
      width="#{column.width}" 
      columnIndexVar="colIndex" styleClass="day-column">  
        <f:facet name="header">
            #{column.header}
        </f:facet>

        #{sched[column.property]}
    </p:columns>  
</p:dataTable>

来源：https://stackoverflow.com/questions/12370006/pdatatable-with-pcolumns-with-custom-widths

标签

jsf

primefaces