Responsive Design - Data Table

Post Reply
slong
Posts: 18
Joined: 09 Feb 2016, 01:05

04 Jun 2021, 21:25

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?

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

07 Jun 2021, 13:21

Hi,

What version of PrimeFaces are you using?

slong
Posts: 18
Joined: 09 Feb 2016, 01:05

08 Jun 2021, 15:00

10X

slong
Posts: 18
Joined: 09 Feb 2016, 01:05

08 Jun 2021, 15:52

Also, another question: 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?

slong
Posts: 18
Joined: 09 Feb 2016, 01:05

08 Jun 2021, 15:53

The above question refers to the DataTable component

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

11 Jun 2021, 09:46

Hi,
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?
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/choose
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?
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?

Best Regards,

slong
Posts: 18
Joined: 09 Feb 2016, 01:05

16 Jun 2021, 01:36

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.

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

16 Jun 2021, 11:01

Hi,

Could you please send a screenshot with this issue in tablet view. Also please add tablets' screen resolution.

Best Regards,

slong
Posts: 18
Joined: 09 Feb 2016, 01:05

17 Jun 2021, 18:13

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>

siris
Posts: 322
Joined: 29 Jul 2019, 13:57

21 Jun 2021, 09:38

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,

Post Reply

Return to “PrimeFaces Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests