Request for - Scrollable datatable column percent width

UI Components for JSF
sebek
Posts: 38
Joined: 19 Jul 2011, 18:56

14 Nov 2011, 18:15

Primefaces Team,

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>
Please consider this request. I will also submit a new feature request and post a link when ready.
-- PrimeFaces 3.3-SNAPSHOT -- Mojarra 2.1.2 -- Tomcat 7.0.19 --

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

14 Nov 2011, 18:18

I don't think this is even possible due to cross browser issues. Scrolling has two tables, one for header and one for data, percentage width behave differently in two tables.

sebek
Posts: 38
Joined: 19 Jul 2011, 18:56

14 Nov 2011, 18:24

Issue 2801 has been submitted for this request - http://code.google.com/p/primefaces/iss ... il?id=2801
-- PrimeFaces 3.3-SNAPSHOT -- Mojarra 2.1.2 -- Tomcat 7.0.19 --

sebek
Posts: 38
Joined: 19 Jul 2011, 18:56

14 Nov 2011, 20:02

I just saw your reply.

Optimus, have you had a chance to look at my CSS approach?

It aligns the column tables just right. I have tested it in Firefox 8, IE 9, Safari 5 and Chrome 15.

I think you could pre-populate and pass in the width and column ids.
-- PrimeFaces 3.3-SNAPSHOT -- Mojarra 2.1.2 -- Tomcat 7.0.19 --

sebek
Posts: 38
Joined: 19 Jul 2011, 18:56

14 Nov 2011, 20:18

At the very minimum, would it be possible to add "id" attribute to <td> for the header, body and footer columns?

The header already has it which makes it much easier to style.

You could have something like this:

Code: Select all

<div id="ui-datatable-scrollable-header-box">
   <table>
      <thead>
         <tr>
            <th id="formId:dataTableId:columnId_head">
...

<div id="ui-datatable-scrollable-body">
   <table>
      <tbody>
         <tr>
            <td id="formId:dataTableId:columnId_body">
...

<div id="ui-datatable-scrollable-footer-box">
   <table>
      <tfoot>
         <tr>
            <td id="formId:dataTableId:columnId_foot">
...
-- PrimeFaces 3.3-SNAPSHOT -- Mojarra 2.1.2 -- Tomcat 7.0.19 --

3man
Posts: 99
Joined: 16 Jun 2011, 16:13

05 Jan 2012, 10:15

Hello,

I also interested to find solution of setting column/table width in percent.
If I understand optimus.prime, this option for datatable doesn't be supported, ever, so everyone who interested of this need to write some workaround.

sebek, I try solution you propose in first post, it's working ok if you don't resize column width to x-scroll get visible .. if x-scroll get visible, header-column and data-column align get mess up .

Did you find solution for this?
-----------
primefaces-3.3-SNAPSHOT
tomcat 7.0.22
Mojarra 2.1.1 (FCS 20110408)
NetBeans 7.1

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

05 Jan 2012, 17:37

It is possible, but parts of the internal design of the datatable should change. I did it once, with some other changes but Optimus changed 'some other things' at the same time while he said he would not implement these 'other changes'. After that, my 'fix' would take another 2 days to re-implement, so I ditched it... Sadly. If you all together find 1000 eur, I'll re-implement it.

ltune
Posts: 125
Joined: 20 Jul 2011, 20:25
Contact:

23 Apr 2012, 10:11

I don't think this is even possible due to cross browser issues. Scrolling has two tables, one for header and one for data, percentage width behave differently in two tables.
Sebek is right, width and height should have attr specified with per cent as well. Seperate tables for tbody and tfoot is not a good idea. You use tables as a design means. HTML has elements thead and tbody and tfoot [1] to achieve this and there are clean solutions with scrollable tbody [2] supported by Mozilla 1.x, IE 6.x, Opera 7.x. (Probably any browser with css2 selectors functionality).
As data-table is huge component, I dont know if you still can fix it.. Probably there will be to many compatibility issues with javascript/ ajax elements that rely on this implementation.

Maybe next time stick closer to the HTML specifications;)

Greets,

Adam


[1]http://www.w3.org/TR/html401/struct/tab ... l#h-11.2.3
[2]http://www.imaputz.com/cssStuff/bigFourVersion.html
Busy applying primefaces patches to my local repo at /dev/null

ltune
Posts: 125
Joined: 20 Jul 2011, 20:25
Contact:

23 Apr 2012, 11:18

Icefaces has copied many componenets from you, but their ace:datatable is rendered as single <table> element [1]. Maybe reuse theirs?


[1]http://icefaces-showcase.icesoft.org/sh ... aTableBean
Busy applying primefaces patches to my local repo at /dev/null

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

23 Apr 2012, 14:41

If with sticking to html specs you mean:
- no sizing
- no scrolling
- no fixed colums
- no fixed rows
- no real header and footer besides the column headers and footers
- no inline editing
- no select row on click
- no select using radio/checkbox
- no lots of other interesting functionality

I agree...

What I actually mean is: If you have a patch that fixes this, feel free to contribute...

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 26 guests