Show/Hide Table columns dynamically

In this blog post we are going to create an HTML table with configurable columns. And by that I mean the ability to show and hide columns through some sort of a drop down or checkbox as in our case. The code doesn’t do error checks since it is only supposed to demo the concept. You are more than welcome to add error checking and additional features. Let’s see a demo first:

See the Pen Table show hide columns by Grepsoft (@grepsoft) on CodePen.dark

This can be helpful if you have a table with a lot of columns. The data can come from a server or some file but one thing to keep in mind is that the shape of data is very important. The concept is very simple and the way this works is we go through each row one by one like so:

data.rows.forEach(function(row, index, array) {...}

Then we get the corresponding header or column and check if it’s supposed to be visible:

data.header.forEach(function(col, index, array) {
if(!col.visible) {
return;
}

If not we simply go over to the next column and continue like that. The beauty of this is that if source data changes then this will automatically adapt. This can be easily simulated through the Add column feature in the demo.

The table gets reinitialized with new data and the column on/off selector gets updated as well.

Soure Code

Leave a Reply

Your email address will not be published. Required fields are marked *