HTML Table - styling individual many thousands of cells

Question

In the process of making a html versions of an app, and one part is a table which can end up having many many cells.

Around: 150 columns, with easily up to 10,000 rows.

Question is performance, and what would be decent why to be able to style each cell based on content?

So in each cell is a number, and the background color filled in based on the percentage that number fits in.

For example: have banding

77-100 = red
33 - 77 = blue
0 < 33 = green
0 = black

What I have tried on a small table is giving the class to each <td> that I would want to color it. (colors being user changeable, so setting a class, should be able to change class definition)

So get something like this:

<tr>
  <td class='percentile-100'>87.5%</td>
  <td class='percentile-77'>75.0%</td>
  <td class='percentile-0'>0.0%</td>

and in CSS, set style for classes. Only 4 styles needed.

Now with (150 * 10,000 = ) 1,500,000 cells to be styled, I'm thinking what impact might be like.

Table being generated from JavaScript with data. But yeah data in the MB area. Table then rendered client side. So as rendering, decides what class value to set.

What other possible ways to style each cell based on content?

Answer 1

I think the best approach is not loading so many rows at one time. I made a program a while back that compared thousands of data points and it loaded horribly slow - the problem was that I was displaying all of the individual results. It was nice in the end, but we only needed to see the totals. I ended up displaying only the totals and making an ajax call to re-get the individual results as needed if someone was looking for them specifically.

In short, if you're worried it'll take to long to style all of the cells, you should probably not load so many at once. May want to look into AJAX pagination.