How to determine fitting table row count

Question

In my angularjs application, I'm displaying a "main table" on (nearly) every page. This table has thousands of logical rows, but only a few physical rows (so it's fast avoiding huge DOM overhead).

The number of physical rows is data-independent (I display them even when there are no logical rows). I implemented scrolling of the table and I want it to exactly fit in the window, so that no scrolling of the page is necessary.

For this, I need is to know how many rows do fit. The height of every row is fixed (using height: 20px !IMPORTANT and overflow: hidden). The table is the last thing on the page. So in theory, all I need is

var t = $("main-table");
var extraHeight = $(window).height - t.position().top - t.height() - someReserve;
var extraRows = Math.floor(extraHeight) / normalRowHeight);
physicalRows.length += extraRows;

The problem is that I don't know when the values settle down. I start with physicalRows.length = 10 and after executing the above code, I should get the length right. But I don't... so I iterate it using $timeout and it works.

But it doesn't look good with the table growing and shrinking randomly. For example, I get the following lengths:

10 -> 33 -> 31 -> 30 -> 30 (done)

Tuning the number didn't help, even doubling normalRowHeight didn't avoid overshooting. I tried to limit the growth, so that shrinking is avoided. Shrinking looks especially bad as a window scrollbar gets temporarily displayed, making the right table edge jump left and back. But the only thing working was

extraRows = Math.max(extraRows, 1);

which looked terrible with the table growing row by row. Without it, I occasionally get a sequence like

10 -> 33 -> 56 -> 36 -> 31 -> 30 -> 30 (done)

The increase to 56 came from the HTML not being updated between iterations.

What can I do? Is there a way to find out when the sizes are right?

Solution summary

I introduced the iterative computation as the direct one didn't work right. The problems had multiple causes:

• The row height was not exactly constant, which led to multiple iterations needed.
• I was listening to both window size and table position and size. There was some debouncing, but it worked for each event source separately. Sometime two events departed in the same digest iteration (i.e., before the table could resize), which led to the sequence 10 -> 33 -> 56.

My problem was trying a too complicated solution for a simple problem. The iterating hid the original problem and caused others. The answers made me to give up the stupid idea.

Answer 1

If you not find any solution then you can initially hide your dataTable div and then when no of rows and height decide, apply no of rows and again show dataTable