Hi,
i have a datatable with 7 columns with reflow attribute setted to true.
When i switch to mobile i'd like to display the columns stacked not one by one but two by two.
In other words i'd like to display two columns, then the other two stacked and so on.
How is it possible ?
thank u very much
reflow datatable on mobile displaying 2 columns
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Unfortunately, the datatable does not support this feature. Maybe you can use a css like below;
Best Regards,
Code: Select all
@media (max-width: 640px) {
.ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
width: 50%;
border-top: 0 none;
}
.ui-datatable-reflow .ui-datatable-data.ui-widget-content {
display: flex;
flex-wrap: wrap;
}
}
Github Profile: https://github.com/mertsincan
Thanks for your suggestion aragorn, but it doesn't work.
Only one colum stacked will we displayed even with half of the width.
I don't want to stack the rows in two columns, but to stack the columns by two.
Here is an example code where calbean.dummyList is a way for creating only one row
Only one colum stacked will we displayed even with half of the width.
I don't want to stack the rows in two columns, but to stack the columns by two.
Here is an example code where calbean.dummyList is a way for creating only one row
Code: Select all
public List<String> getDummyList() {
return Arrays.asList("1");
}
Code: Select all
<p:dataTable id="elenco" value="#{calbean.dummyList}" reflow="true" >
<p:column headerText="colonna 1">
<h:outputText value="111" />
</p:column>
<p:column headerText="cvolonna 2" >
<h:outputText value="22222" />
</p:column>
<p:column headerText="cvolonna 3" >
<h:outputText value="3333" />
</p:column>
<p:column headerText="cvolonna 4" >
<h:outputText value="4444" />
</p:column>
</p:dataTable>
Primefaces 12.0.2, Wildfly 24.0.1, JDK 11
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Can I help you better if you share the screenshot?
Best Regards,
Can I help you better if you share the screenshot?
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the screenshots. Please try;
Code: Select all
@media (max-width: 640px) {
.ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
display: flex;
flex-wrap: wrap;
}
.ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
width: 50%;
}
}
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for the update!
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 5 guests