How to dynamically set which columns are displayed in datatables?
How to dynamically set which columns are displayed in datatables?
chandlergersh
Posts: 3Questions: 2Answers: 0
Let's say I have a total of 7 columns but I only want to display 6 at fullscreen.
At full screen, the ordering of the columns goes 1, 2, 3, 4, 5, 6. (I understand how to hide column 7. I have 7 columns because column 7 is a combination of columns 2 and 3)
Because the table is responsive, at a minimized screen, there are 3 columns left, 1, 2, 3.
Here's my question:
Is there a way to create my table so, for example, when there are 3 columns left, I can choose which columns are shown?
For example, when there are 3 columns left, instead of the default 1, 2, 3 order, can I set the order to something like 1, 7, 4?
So here is how I would like the columns to be ordered as the screen is resized smaller:
1, 2, 3, 4, 5, 6
1, 2, 3, 4, 5
1, 2, 3, 4
1, 7, 4
1, 7
My problem right now is that I have two columns for Name and ID. As the screen resizes, I want to replace these columns with a single column that combines the Name and ID columns into one. So when there are 3 rows left, that is when I would want to replace the "Name" and "ID" columns with a "Name & ID" column. Essentially I am trying to converge columns. (Look at the example above where 2 & 3 goes to 7 as page gets smaller)
Does anyone know how to set column order for a set number of visible columns on the screen? Or does anyone know how to converge the columns at a certain point in resizing of the page? Any web links would be helpful too. Thanks.
This question has an accepted answers - jump to answer
Answers
Hi @chandlergersh ,
You can't get that level of granularity with the Responsive extension I'm afraid. If it's something that's critical to you, you could look at implementing something similar by listening to the jQuery .resize() event, or tweaking the Responsive code itself.
Cheers,
Colin
I did figure out an alternative solution. According to this link, https://datatables.net/forums/discussion/29666/responsive-table-shows-the-hidden-columns, you can show and hide columns based on if the user is on a desktop or on mobile. I was trying to hide rows for the mobile view, so setting columns to appear or disappear when in mobile view did exactly what I was looking for.
Yes you can chose which columns have priority as the viewport gets smaller.
https://datatables.net/extensions/responsive/priority
Steve