Responsive Design - Data Table
I have an application where I have created a CSS page using the Primefaces Theme Designer. I did not make any changes to the CSS design, only created the CSS from the Arya theme dark (though I believe the problem happens with all the themes). The problem I am encountering is with the data table. I have a table where I use rowtoggler. When I apply the ResponsivePriority to columns and the columns are hidden, when I click on the > arrow to expand the row, the columns of the main table shrink to about 1 character in length (so you can no longer read the column contents). If, however, I do NOT use ResponsivePriority, but rather hide columns using my column toggler, the column size remains stable when I click the > arrow to expand the row. What coding do I have to apply to have the columns remain stable when using ResponsivePriority?
Hi,
Best Regards,
The "colspan" value needs to be calculated dynamically for rowexpansion feature to work with responsive feature. This is not an issue with the designer. Please open an issue on github PrimeFaces with Feature request: https://github.com/primefaces/primeface ... new/chooseI have an application where I have created a CSS page using the Primefaces Theme Designer. I did not make any changes to the CSS design, only created the CSS from the Arya theme dark (though I believe the problem happens with all the themes). The problem I am encountering is with the data table. I have a table where I use rowtoggler. When I apply the ResponsivePriority to columns and the columns are hidden, when I click on the > arrow to expand the row, the columns of the main table shrink to about 1 character in length (so you can no longer read the column contents). If, however, I do NOT use ResponsivePriority, but rather hide columns using my column toggler, the column size remains stable when I click the > arrow to expand the row. What coding do I have to apply to have the columns remain stable when using ResponsivePriority?
The reflow and displayPriority features already work together correctly. Or if the issue you are talking about is responsivePriority, it also works correctly with reflow. Could you please explain in more detail?Can you combine reflow and column priority, that is, have a certain number of columns displayed on medium display, but have reflow on small screen?
Best Regards,
The issue is predominantly with the tablet screen size. In large screen, everything looks fine. In mobile screen reflow kicks in and that too is fine. But in the tablet screen, the columns are reduced to small sizes that do not adequately show the field contents (values are truncated to the point that they no longer make sense). Why does the datatable not respect responsivePriority and drop the lower priority columns. If I do not use reflow it will do it. But if I add reflow it does not.
These are the 3 displays:
1920 X 1200 (Desktop)
768 X 762 (Tablet)
375 x 762 (Phone)
https://photos.app.goo.gl/LNq7CY3cVBzDN7zi7
Here is the code for the table
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<!-- Copyright, 2017 Microvision Technology Corporation -->
<!-- All Original Content Copyright, 2017 Microvision Technology Corporation. -->
<!-- All Original Content Copyright, 2017 Microvision Technology Corporation, All Rights Reserved -->
<body>
<ui:composition>
<p:dataTable id="dataTable"
var="datarow"
rowKey="datarowkey"
value="#{mainController.mdata}"
rows="5"
reflow="true"
paginator="#{mainController.exceedsMaxRows}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="Returned {totalRecords} rows"
rowsPerPageTemplate="5,50,100,200,300,400,500"
emptyMessage="0 Records Returned "
lazy="true"
binding ="#{mainController.dataTable}">
<f:facet name="header">
<p:panelGrid columns="1">
<p:commandButton id="toggler2" type="button" value="Hide Columns..."
icon="ui-icon-calculator" />
</p:panelGrid>
<p:columnToggler trigger="toggler2" datasource="dataTable">
<p:ajax event="toggle" listener="#{mainController.onToggle}"/>
</p:columnToggler>
</f:facet>
<p:column responsivePriority="1" headerText="RR" sortBy="#{datarow.rr}" exportable="#{mainController.fieldList[0]}">
<p:commandButton type="button" icon="pi pi-search" styleClass="p-d-lg-none" />
<h:outputText value="#{datarow.rr}"></h:outputText>
</p:column>
<p:column responsivePriority="1" headerText="RN" sortBy="#{datarow.rn}" visible="#{mainController.fieldList[1]}" exportable="#{mainController.fieldList[1]}">
<h:outputText value="#{datarow.rn}"></h:outputText>
</p:column>
<p:column responsivePriority="1" headerText="Shop 1" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 2" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 3" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 4" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 5" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 6" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 7" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 8" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 9" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 10" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 11" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="2" headerText="Laptop" sortBy="#{datarow.laptopserial}" visible="#{mainController.fieldList[3]}" exportable="#{mainController.fieldList[3]}">
<h:outputText value="#{datarow.laptopserial}"></h:outputText>
</p:column>
<p:column responsivePriority="3" headerText="User" sortBy="#{datarow.username}" visible="#{mainController.fieldList[4]}"
exportable="false">
<h:outputText value="#{datarow.username_html}" escape="false"/>
</p:column>
<p:column responsivePriority="4" headerText="User" sortBy="#{datarow.username_html}" toggleable="false"
exportable="#{mainController.fieldList[4]}" style="display:none !important; width:0px !important; visibility: collapse !important;" >
<h:outputText value="#{datarow.username_full}"/>
</p:column>
<p:column responsivePriority="1" headerText="Date" sortBy="#{datarow.timedate}" visible="#{mainController.fieldList[6]}" exportable="false">
<h:outputText value="#{datarow.timedate}">
<f:convertDateTime pattern="#{commonController.displayDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>
<p:column headerText="Date" toggleable="false" exportable="#{mainController.fieldList[6]}"
style="display:none !important; width:0px !important; visibility: collapse !important;">
<h:outputText value="#{datarow.timedate}">
<f:convertDateTime pattern="#{commonController.exportDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>
<p:column responsivePriority="10" headerText="APU Hours" sortBy="#{datarow.apuhours}" visible="#{mainController.fieldList[8]}" exportable="#{mainController.fieldList[8]}">
<h:outputText value="#{datarow.apuhours}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="APU Defective" sortBy="#{datarow.apudefective}" visible="#{mainController.fieldList[9]}" exportable="#{mainController.fieldList[9]}">
<h:outputText value="#{datarow.apudefective}"></h:outputText>
</p:column>
</p:dataTable>
</ui:composition>
</body>
</html>
1920 X 1200 (Desktop)
768 X 762 (Tablet)
375 x 762 (Phone)
https://photos.app.goo.gl/LNq7CY3cVBzDN7zi7
Here is the code for the table
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<!-- Copyright, 2017 Microvision Technology Corporation -->
<!-- All Original Content Copyright, 2017 Microvision Technology Corporation. -->
<!-- All Original Content Copyright, 2017 Microvision Technology Corporation, All Rights Reserved -->
<body>
<ui:composition>
<p:dataTable id="dataTable"
var="datarow"
rowKey="datarowkey"
value="#{mainController.mdata}"
rows="5"
reflow="true"
paginator="#{mainController.exceedsMaxRows}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="Returned {totalRecords} rows"
rowsPerPageTemplate="5,50,100,200,300,400,500"
emptyMessage="0 Records Returned "
lazy="true"
binding ="#{mainController.dataTable}">
<f:facet name="header">
<p:panelGrid columns="1">
<p:commandButton id="toggler2" type="button" value="Hide Columns..."
icon="ui-icon-calculator" />
</p:panelGrid>
<p:columnToggler trigger="toggler2" datasource="dataTable">
<p:ajax event="toggle" listener="#{mainController.onToggle}"/>
</p:columnToggler>
</f:facet>
<p:column responsivePriority="1" headerText="RR" sortBy="#{datarow.rr}" exportable="#{mainController.fieldList[0]}">
<p:commandButton type="button" icon="pi pi-search" styleClass="p-d-lg-none" />
<h:outputText value="#{datarow.rr}"></h:outputText>
</p:column>
<p:column responsivePriority="1" headerText="RN" sortBy="#{datarow.rn}" visible="#{mainController.fieldList[1]}" exportable="#{mainController.fieldList[1]}">
<h:outputText value="#{datarow.rn}"></h:outputText>
</p:column>
<p:column responsivePriority="1" headerText="Shop 1" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 2" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 3" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 4" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 5" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 6" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 7" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 8" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 9" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 10" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="Shop 11" sortBy="#{datarow.shopcode}" visible="#{mainController.fieldList[2]}" exportable="#{mainController.fieldList[2]}">
<h:outputText value="#{datarow.shopcode}"></h:outputText>
</p:column>
<p:column responsivePriority="2" headerText="Laptop" sortBy="#{datarow.laptopserial}" visible="#{mainController.fieldList[3]}" exportable="#{mainController.fieldList[3]}">
<h:outputText value="#{datarow.laptopserial}"></h:outputText>
</p:column>
<p:column responsivePriority="3" headerText="User" sortBy="#{datarow.username}" visible="#{mainController.fieldList[4]}"
exportable="false">
<h:outputText value="#{datarow.username_html}" escape="false"/>
</p:column>
<p:column responsivePriority="4" headerText="User" sortBy="#{datarow.username_html}" toggleable="false"
exportable="#{mainController.fieldList[4]}" style="display:none !important; width:0px !important; visibility: collapse !important;" >
<h:outputText value="#{datarow.username_full}"/>
</p:column>
<p:column responsivePriority="1" headerText="Date" sortBy="#{datarow.timedate}" visible="#{mainController.fieldList[6]}" exportable="false">
<h:outputText value="#{datarow.timedate}">
<f:convertDateTime pattern="#{commonController.displayDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>
<p:column headerText="Date" toggleable="false" exportable="#{mainController.fieldList[6]}"
style="display:none !important; width:0px !important; visibility: collapse !important;">
<h:outputText value="#{datarow.timedate}">
<f:convertDateTime pattern="#{commonController.exportDatePattern}" timeZone="#{commonController.ESTEDTtimezone}"/>
</h:outputText>
</p:column>
<p:column responsivePriority="10" headerText="APU Hours" sortBy="#{datarow.apuhours}" visible="#{mainController.fieldList[8]}" exportable="#{mainController.fieldList[8]}">
<h:outputText value="#{datarow.apuhours}"></h:outputText>
</p:column>
<p:column responsivePriority="11" headerText="APU Defective" sortBy="#{datarow.apudefective}" visible="#{mainController.fieldList[9]}" exportable="#{mainController.fieldList[9]}">
<h:outputText value="#{datarow.apudefective}"></h:outputText>
</p:column>
</p:dataTable>
</ui:composition>
</body>
</html>
Hi,
"DataTable has two responsive modes: responsivePriority and reflow. In priority mode, responsiveness is based on column responsivePriority that vary between 1 and 6. Lower value means higher priority. On the other hand in reflow mode that is enabled by setting reflow to true, all columns will be visible but displayed as stacked."
Please change your 11 values to 1-6 range and try again. When i tried with 1-6 values i couldn't see any issue.
Best Regards,
"DataTable has two responsive modes: responsivePriority and reflow. In priority mode, responsiveness is based on column responsivePriority that vary between 1 and 6. Lower value means higher priority. On the other hand in reflow mode that is enabled by setting reflow to true, all columns will be visible but displayed as stacked."
Please change your 11 values to 1-6 range and try again. When i tried with 1-6 values i couldn't see any issue.
Best Regards,
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests