CODEWITHSUNDEEP
html
blubberbo
blubberbo

Reputation: 4613

Html table hide columns best practice

I have an html table and I want to be able to hide and show columns dynamically (based on certain values on page load). It could be a large number of columns I need to hide.

I was considering taking the values from the columns that I want to be hidden and putting their values in a data- attribute on the <tr> element to and avoid creating dom elements that aren't being shown in the ui. I need the values somewhere because they are used in click events.

Are there any best practices out there that say it is bad to load columns into a table and hide them with say display: none;, or am I just over thinking it and being anal and should just hide them with css?

Upvotes: 2

Views: 330

Answers (1)

RTarson
RTarson

Reputation: 351

I'm unsure of any types of practices particularly for this application. Also based on the information given so far.

The way you are doing it is not the best choice of going about this situation. You are taking data and putting them all in their own elements which not only clusters up HTML with unessessary elements (that are always hidden by CSS) but also can be more taxing then it has to on you and your viewers computer.

When you could be using the data attribute this is a great way to keep the information more consolated, less clutter, well organized, easy to read and manage. Also even when a element has the styling display:none it is still using the computer performance to render all of those elements.

You can read this thread that explains: Read More

Upvotes: 1

Related Questions