reflow datatable on mobile displaying 2 columns

[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

[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,

[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>

[mert.sincan]

Hi,

Can I help you better if you share the screenshot?

Best Regards,

[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

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

[spadovan]

Thank U aragorn, it works perfectly !

[mert.sincan]

Glad to hear, thanks a lot for the update!

Best Regards,