I have a portal which I am displaying in the control panel
That portal has a Prime Faces dataTable component which is displayed under xhtml.
The problem: Primefaces dataTable is not covering the whole page with 100% width and height and if I have more columns then it increases the page size horizontally which is not good.
1<?xml version="1.0" encoding="UTF-8"?>
2<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:aui="http://liferay.com/faces/aui"
3 xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core"
4 xmlns:h="http://java.sun.com/jsf/html" xmlns:bridge="http://liferay.com/faces/bridge"
5 xmlns:p="http://primefaces.org/ui" xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
6 xmlns:ui="http://java.sun.com/jsf/facelets">
7
8
9 <p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel" align="center">
10 <f:facet name="start">
11 <h:graphicImage value="../images/preloader.gif" />
12 </f:facet>
13
14 <f:facet name="complete">
15 <h:outputText value="Done....." />
16 </f:facet>
17 </p:ajaxStatus>
18
19 <h:form id="form">
20
21 <p:dataTable var="customerAdmin" value="#{mastercardCustomerAdmin.lazyModel}" paginator="true" rows="10"
22 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
23 rowsPerPageTemplate="5,10,15,25,50" selectionMode="single"
24 id="customerAdminTable" lazy="true" resizableColumns="true"
25 binding="#{mastercardCustomerAdmin.dataTable}" global="true" style="width:100%;height:100%">
26
27 <p:column headerText="Customer ID" sortBy="#{customerAdmin.ID_CUSTOMER}" filterBy="#{customerAdmin.ID_CUSTOMER}">
28 <h:outputText value="#{customerAdmin.ID_CUSTOMER}" />
29 </p:column>
30
31 <p:column headerText="Agent Name" sortBy="#{customerAdmin.NAME_AGENT}" filterBy="#{customerAdmin.NAME_AGENT}">
32 <h:outputText value="#{customerAdmin.NAME_AGENT}" />
33 </p:column>
34
35 <p:column headerText="First Name" sortBy="#{customerAdmin.FIRST_NAME}" filterBy="#{customerAdmin.FIRST_NAME}">
36 <h:outputText value="#{customerAdmin.FIRST_NAME}" />
37 </p:column>
38
39 <p:column headerText="Last Name" sortBy="#{customerAdmin.LAST_NAME}" filterBy="#{customerAdmin.LAST_NAME}">
40 <h:outputText value="#{customerAdmin.LAST_NAME}" />
41 </p:column>
42
43 <p:column headerText="Gender" sortBy="#{customerAdmin.GENDER}" filterBy="#{customerAdmin.GENDER}">
44 <h:outputText value="#{customerAdmin.GENDER}" />
45 </p:column>
46
47 <p:column headerText="DOB" sortBy="#{customerAdmin.BIRTH_DATE}" filterBy="#{customerAdmin.BIRTH_DATE}">
48 <h:outputText value="#{customerAdmin.BIRTH_DATE}" />
49 </p:column>
50
51 <p:column headerText="Email" sortBy="#{customerAdmin.EMAIL}" filterBy="#{customerAdmin.EMAIL}">
52 <h:outputText value="#{customerAdmin.EMAIL}" />
53 </p:column>
54
55 <p:column headerText="Postal Code" sortBy="#{customerAdmin.POST_CODE}" filterBy="#{customerAdmin.POST_CODE}">
56 <h:outputText value="#{customerAdmin.POST_CODE}" />
57 </p:column>
58
59 <p:column headerText="Country" sortBy="#{customerAdmin.NAME_COUNTRY}" filterBy="#{customerAdmin.NAME_COUNTRY}">
60 <h:outputText value="#{customerAdmin.NAME_COUNTRY}" />
61 </p:column>
62
63 <p:column headerText="City" sortBy="#{customerAdmin.CITY}" filterBy="#{customerAdmin.CITY}">
64 <h:outputText value="#{customerAdmin.CITY}" />
65 </p:column>
66
67 <p:column headerText="Address" sortBy="#{customerAdmin.ADDRESS}" filterBy="#{customerAdmin.ADDRESS}">
68 <h:outputText value="#{customerAdmin.ADDRESS}" />
69 </p:column>
70
71 <p:column headerText="Mobile" sortBy="#{customerAdmin.MOBILE_NUMBER}" filterBy="#{customerAdmin.MOBILE_NUMBER}">
72 <h:outputText value="#{customerAdmin.MOBILE_NUMBER}" />
73 </p:column>
74
75 <p:column headerText="Phone" style="width:25%" sortBy="#{customerAdmin.PHONE_NUMBER}" filterBy="#{customerAdmin.PHONE_NUMBER}">
76 <h:outputText value="#{customerAdmin.PHONE_NUMBER}" />
77 </p:column>
78
79 <p:column headerText="Doc Ser" sortBy="#{customerAdmin.DOC_SER}" filterBy="#{customerAdmin.DOC_SER}">
80 <h:outputText value="#{customerAdmin.DOC_SER}" />
81 </p:column>
82
83 <p:column headerText="Doc No" sortBy="#{customerAdmin.DOC_NUM}" filterBy="#{customerAdmin.DOC_NUM}">
84 <h:outputText value="#{customerAdmin.DOC_NUM}" />
85 </p:column>
86
87 <p:column headerText="Doc Who" sortBy="#{customerAdmin.DOC_WHO}" filterBy="#{customerAdmin.DOC_WHO}">
88 <h:outputText value="#{customerAdmin.DOC_WHO}" />
89 </p:column>
90
91 <p:column headerText="Doc Date" sortBy="#{customerAdmin.DOC_DATE}" filterBy="#{customerAdmin.DOC_DATE}">
92 <h:outputText value="#{customerAdmin.DOC_DATE}" />
93 </p:column>
94
95 <p:column headerText="Status" sortBy="#{customerAdmin.STATUS}" filterBy="#{customerAdmin.STATUS}">
96 <h:outputText value="#{customerAdmin.STATUS}" />
97 </p:column>
98
99 <p:column headerText="CID" sortBy="#{customerAdmin.ID_CUST}" filterBy="#{customerAdmin.ID_CUST}">
100 <h:outputText value="#{customerAdmin.ID_CUST}" />
101 </p:column>
102
103 <p:column headerText="Create Date" sortBy="#{customerAdmin.DATE_CREATE}" filterBy="#{customerAdmin.DATE_CREATE}">
104 <h:outputText value="#{customerAdmin.DATE_CREATE}" />
105 </p:column>
106
107 <p:column headerText="Update Date" sortBy="#{customerAdmin.DATE_UPDATE}" filterBy="#{customerAdmin.DATE_UPDATE}">
108 <h:outputText value="#{customerAdmin.DATE_UPDATE}" />
109 </p:column>
110
111 </p:dataTable>
112
113 </h:form>
114
115 </ui:composition>
Whereas Primefaces dataTable is working pretty good in the sample you can see if you resize your browser then the dataTable also resize pretty well
PrimeFaces dataTable SampleI need an urgent help
Thanks
Please sign in to flag this as inappropriate.