How to hide columns based on width of screen?

rotaercz

I looked at Automatic Column Hiding which hides columns from the right.

When the screen is smaller than a particular width, how can I target and hide specific columns in the middle? But when it's bigger than said width, show those columns?

colin

Hi @rotaercz ,

See the Responsive plugin, that's exactly the use-case for that. With that, you can set the priority for columns, as in this example, so you determine which columns are hidden.

Cheers,

Colin

rotaercz

Will this work with

cell.data(html).draw();

even if the cell/column is hidden?

colin

Hi @rotaercz ,

Yep, that'll still work. The cell will still be there, just not displayed.

Cheers,

Colin

rotaercz

Thank you for the quick response!

I looked at the Column priority documentation but it's unclear to me what the priority numbers mean. Does 1 mean always show?

EDIT: Is there a way to show/hide columns based on exact width? Basically I'd like to hide 3 particular columns when it's smaller or equal to 800 pixels wide and show those 3 columns when it's larger than 800.

colin

Hi @rotaercz ,

Not by width, but you can set a higher priority - see this page here.

This is the section of interest:

Priority order in Responsive is a numerical value, where a lower value equates to a higher priority. For example a column with a priority of 2 will be removed from the display before a column with a priority of 1.

Cheers,

Colin

rotaercz

Thank you.

I tried it but it seems to only remove the column when it's extremely squished. I used priority 1 for the ones I wanted to be shown at all times and priority 10000 for those that should be hidden but it wasn't hiding it soon enough so it looked really squished. I think I may have to give up on this functionality. It's not a big deal.

colin

You can also set the point when the columns are squished - see this example here.

C