CODEWITHSUNDEEP
cssjsfjsf-2primefacesdatatable
yahh
yahh

Reputation: 1195

primefaces datatable reflow in desktop browser

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

enter image description here

in chrome developers mode mobile view

enter image description here

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

enter image description here

if i resize my browser with same table above and make it smaller, it works

enter image description here

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

Upvotes: 3

Views: 4790

Answers (1)

Mathieu Castets
Mathieu Castets

Reputation: 6040

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

Upvotes: 4

Related Questions