Currently, dataTable does not support percent width with scrollable=true.
The "px width" is supported, but is not very practical in most situations. "Px width" forces developer to determine best column width across the various screen resolutions that exist out there.
As a result, I do not think anyone will disagree that "% width" is the way to go and a must feature in the dataTable.
Below is an example how I solved the width problem in a scrollable dataTable using nothing, but CSS.
The drawback for this method is that columns cannot be added/removed dynamically.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<style type="text/css">
/* Needed to expand empty mediaItemsTable datatable */
#tableId2 table {
width: 100% !important;
}
div#tableId2 div div.ui-datatable-scrollable-header-box {
width: 98.5% !important;
}
/* Always show y-scroll bar so columns are aligned */
div#tableId2 div.ui-datatable-scrollable-body {
overflow-y: scroll !important;
}
/* Header styles */
th[id="tableId2:modelColumnId"] {
width: 25% !important;
}
th[id="tableId2:yearColumnId"] {
width: 25% !important;
}
th[id="tableId2:manufacturerColumnId"] {
width: 25% !important;
}
th[id="tableId2:colorColumnId"] {
width: 25% !important;
}
/* Body styles */
tbody#tableId2_data tr td {
width: 25% !important;
}
tbody#tableId2_data tr td + td {
width: 25% !important;
}
tbody#tableId2_data tr td + td + td {
width: 25% !important;
}
tbody#tableId2_data tr td + td + td + td {
width: 25% !important;
}
/* Footer styles */
div#tableId2 div div.ui-datatable-scrollable-footer-box {
width: 98.5% !important;
}
div.ui-datatable-scrollable-footer-box table tfoot tr td {
width: 25% !important;
}
div.ui-datatable-scrollable-footer-box table tfoot tr td + td {
width: 25% !important;
}
div.ui-datatable-scrollable-footer-box table tfoot tr td + td + td {
width: 25% !important;
}
div.ui-datatable-scrollable-footer-box table tfoot tr td + td + td + td {
width: 25% !important;
}
</style>
</h:head>
<h:body>
<h:form id="formId" prependId="false">
<h3>Y Scrolling - Percent Column Width</h3>
<p:dataTable id="tableId"
var="car" value="#{scrollTableBean.cars}"
scrollable="true"
scrollHeight="200"
resizableColumns="true">
<p:column headerText="Model" footerText="Model" style="width: 25%;">
<h:outputText value="#{car.model}" />
</p:column>
<p:column headerText="Year" footerText="Year" style="width: 25%;">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Manufacturer" footerText="Manufacturer"
style="width: 25%;">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column headerText="Color" footerText="Color" style="width: 25%;">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<br/><br/>
<h3>Y Scrolling - Percent Column Width with extra CSS</h3>
<p:dataTable id="tableId2"
var="car" value="#{scrollTableBean.cars}"
scrollable="true"
scrollHeight="200"
resizableColumns="true">
<p:column id="modelColumnId" headerText="Model" footerText="Model">
<h:outputText value="#{car.model}" />
</p:column>
<p:column id="yearColumnId" headerText="Year" footerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column id="manufacturerColumnId" headerText="Manufacturer" footerText="Manufacturer">
<h:outputText value="#{car.manufacturer}" />
</p:column>
<p:column id="colorColumnId" headerText="Color" footerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
</f:view>
</html>