How to dynamically set which columns are displayed in datatables?

How to dynamically set which columns are displayed in datatables?

chandlergershchandlergersh Posts: 1Questions: 1Answers: 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.


  • colincolin Posts: 769Questions: 0Answers: 147

    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.



Sign In or Register to comment.