[SOLVED] Datatable exclude columns in responsive mode

[ClaudioC]

Dear friends I have a datatable with 12 column. The reflow=true solution is good only if I use phone device, with tablets device it doesn't work as you can see in the image. The priority solution is not good because I have filters and paginator.
So my question is : Is possible with modena to exclude some columns with responsive mode ? Something with CSS or other ?

[mert.sincan]

What is the resolution of the tablet?

Suggestions;
First way) You can change max-width of @media (Default: 35em).
You can add this code in your project.

Code: Select all

@media ( max-width: 650px ) { /* Default 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;
    }
}

Second way) You can try with priority attribute. Exp; you have 4 column in datatable and If you want to show 3 column on tablet device, you can add priority (according to resolution value of your tablet) in one of the column.

Code: Select all

<p:column>..</p:column>
<p:column>..</p:column>
<p:column>..</p:column>
<p:column priority="6">..</p:column>

in PrimeFaces-5.2.x and 5.3

Code: Select all

/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
	th.ui-column-p-1,
	td.ui-column-p-1 {
		display: table-cell;
	}
}

/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
	th.ui-column-p-2,
	td.ui-column-p-2 {
		display: table-cell;
	}
}

/* Show priority 3 at 640px (40em x 16px) */
@media screen and (min-width: 40em) {
	th.ui-column-p-3,
	td.ui-column-p-3 {
		display: table-cell;
	}
}

/* Show priority 4 at 800px (50em x 16px) */
@media screen and (min-width: 50em) {
	th.ui-column-p-4,
	td.ui-column-p-4 {
		display: table-cell;
	}
}

/* Show priority 5 at 960px (60em x 16px) */
@media screen and (min-width: 60em) {
	th.ui-column-p-5,
	td.ui-column-p-5 {
		display: table-cell;
	}
}

/* Show priority 6 at 1,120px (70em x 16px) */
@media screen and (min-width: 70em) {
	th.ui-column-p-6,
	td.ui-column-p-6 {
		display: table-cell;
	}
}

Third way) You can try with tableStyle="table-layout:auto". (scroll on PC and tablet, responsive design on mobile) (you can change as the first way on PC and table)

Code: Select all

<p:dataTable reflow="true" tableStyle="table-layout:auto">

[ClaudioC]

Thanks for your reply. I've tested 2 of 3 way you suggest.
1) WAY

I added this code in my xhtml page :

Code: Select all

<style type="text/css">
           @media ( max-width: 650px ) { /* Default 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;
    }
} 
            
        </style>

and the result on my Samsung Galaxy Tab 3 is the follow :



The result is better than before but it's not what i'm looking for. (Maybe I have to add theese css rules to my core-layout.css file to have something of useful ? )

2)WAY:

For the second way I know that if I have some filters and paginator, the priority tag doesn't work ( i'm using PF 5.2.9 because from this version to newer <pe:inputNumber> doesn't work )

this is my previous post on it : http://forum.primefaces.org/viewtopic.php?f=3&t=43207

3) WAY

This solution is the best for me at the moment. As you can see, it truncate the column but with a swype on the left on my tablet i can see all the columns. Very appreciate and simple to implement.

[mert.sincan]

Thanks for the update.

1) Maybe you can try after changing @media ( max-width: 650px ). (650px is a sample value for my test)

We use this @media queries for Layouts;

Code: Select all

 /* MEDIA QUERIES FOR CORE LAYOUT **************************************************************************************************************** */

/* Large desktop */
@media (min-width: 960px){
}
 
@media (min-width: 960px) and (max-width:1200px){
} 
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px) {
}
 
 
/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {	
}
 
 
/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
}

3) I agree with you.