reflow datatable on mobile displaying 2 columns

Post Reply
spadovan
Posts: 157
Joined: 05 Jun 2013, 12:04

24 Jun 2020, 10:12

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
Primefaces 8.0.1, Wildfly 14.0.1, JDK 8

aragorn
Posts: 4042
Joined: 29 Jun 2013, 12:38

25 Jun 2020, 08:55

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,

spadovan
Posts: 157
Joined: 05 Jun 2013, 12:04

25 Jun 2020, 09:22

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>
Primefaces 8.0.1, Wildfly 14.0.1, JDK 8

aragorn
Posts: 4042
Joined: 29 Jun 2013, 12:38

30 Jun 2020, 14:28

Hi,

Can I help you better if you share the screenshot?

Best Regards,

spadovan
Posts: 157
Joined: 05 Jun 2013, 12:04

01 Jul 2020, 08:32

Hi Aragorn,

this is the page on desktop:

Image

and this is how it appears on mobile device with the css you suggested:

Image

i'd like to have column2 next to column1, then on a new row column 3 and 4.

thaks
Primefaces 8.0.1, Wildfly 14.0.1, JDK 8

aragorn
Posts: 4042
Joined: 29 Jun 2013, 12:38

02 Jul 2020, 22:33

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%;
    }
}

spadovan
Posts: 157
Joined: 05 Jun 2013, 12:04

03 Jul 2020, 08:28

Thank U aragorn, it works perfectly !
Primefaces 8.0.1, Wildfly 14.0.1, JDK 8

aragorn
Posts: 4042
Joined: 29 Jun 2013, 12:38

04 Jul 2020, 09:27

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests