Page 1 of 1
reflow datatable on mobile displaying 2 columns
Posted: 24 Jun 2020, 10:12
by spadovan
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
Re: reflow datatable on mobile displaying 2 columns
Posted: 25 Jun 2020, 08:55
by mert.sincan
Unfortunately, the datatable does not support this feature. Maybe you can use a css like below;
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;
}
}
Best Regards,
Re: reflow datatable on mobile displaying 2 columns
Posted: 25 Jun 2020, 09:22
by spadovan
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
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>
Re: reflow datatable on mobile displaying 2 columns
Posted: 30 Jun 2020, 14:28
by mert.sincan
Hi,
Can I help you better if you share the screenshot?
Best Regards,
Re: reflow datatable on mobile displaying 2 columns
Posted: 01 Jul 2020, 08:32
by spadovan
Hi Aragorn,
this is the page on desktop:
and this is how it appears on mobile device with the css you suggested:
i'd like to have column2 next to column1, then on a new row column 3 and 4.
thaks
Re: reflow datatable on mobile displaying 2 columns
Posted: 02 Jul 2020, 22:33
by mert.sincan
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%;
}
}
Re: reflow datatable on mobile displaying 2 columns
Posted: 03 Jul 2020, 08:28
by spadovan
Thank U aragorn, it works perfectly !
Re: reflow datatable on mobile displaying 2 columns
Posted: 04 Jul 2020, 09:27
by mert.sincan
Glad to hear, thanks a lot for the update!
Best Regards,