primefaces datatable reflow in desktop browser - css

Question

primefaces 5.2
i have a primefaces datatable, the table is very long which is why i want to show it in column stacked mode, i tried using reflow attribute of the datatable.
now if i use the developers mode in chrome and switch to mobile view when i reduce the size of the screen it does in fact behave responsive and goes into stacked column mode, now i want to show that type of table in normal desktop view as well. i thought simple things like just reducing the size of the table would help but no matter how small i reduce the size it just crams the table into that tiny space instead of making it responsive.
am i missing something about how to make something behave responsive on a desktop browser.
<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}"
rowIndexVar="rowindex" reflow="true"
>
in normal size the table looks like this
in chrome developers mode mobile view
if i resize the table to get the same effect, instead of a responsive size change this happens
<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}"
rowIndexVar="rowindex" reflow="true" style="width:200px"
>
if i resize my browser with same table above and make it smaller, it works
maybe i am just not understanding what responsive actually means, is it not possible to trigger a responsive behaviour by changing the size of the table, it seems to only work when the size of the browser changes
My main objective of doing this doesn't really have much to do with making the table responsive the real thing that i want to achieve is getting the table into column stacked mode and from what i have seen this is the only way PF does it
any help would be appreciated

Answer 1

Reflow mode works with CSS media query. When your window width is less than 35em (see also the primefaces.css snippet below) then reflow mode is applied.
Thus, applying a width: 200px; to your dataTable isn't taken into account and will not result in a stacked datatable.
To achieve your goal (applying stack mode when your window width is larger than 35em) you could create (I can't figure out a cleaner solution) your own css class which got rid of the media query. Something like table-reflow-desktop:
.table-reflow-desktop .ui-datatable-data td .ui-column-title {
display: none;
}
.table-reflow-desktop thead th,
.table-reflow-desktop tfoot td {
display: none;
}
.table-reflow-desktop .ui-datatable-data td {
text-align: left;
display: block;
border: 0px none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
.table-reflow-desktop .ui-datatable-data.ui-widget-content {
border: 0px none;
}
.table-reflow-desktop .ui-datatable-data tr.ui-widget-content {
border-left: 0px none;
border-right: 0px none;
}
.table-reflow-desktop .ui-datatable-data td .ui-column-title {
padding: .4em;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4em;
}
And don't forget to apply this class to your p:dataTable:
<p:dataTable id="tb1" var="ths" value="#{thb.sitetracking}" rowIndexVar="rowindex" styleClass="table-reflow-desktop">
For reference, here is the original PrimeFaces 5.2 css part which is responsible of the reflow mode:
/** Reflow **/
.ui-datatable-reflow .ui-datatable-data td .ui-column-title {
display: none;
}
#media ( max-width: 35em) {
.ui-datatable-reflow thead th,
.ui-datatable-reflow tfoot td {
display: none;
}
.ui-datatable-reflow .ui-datatable-data td {
text-align: left;
display: block;
border: 0px none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
.ui-datatable-reflow .ui-datatable-data.ui-widget-content {
border: 0px none;
}
.ui-datatable-reflow .ui-datatable-data tr.ui-widget-content {
border-left: 0px none;
border-right: 0px none;
}
.ui-datatable-reflow .ui-datatable-data td .ui-column-title {
padding: .4em;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4em;
}
}