Question

I’m writing a Javascript based table widget that I hope to be capable of handling basically a limitless amount of data. To do this, the table will make Ajax requests for data only as it is needed (when scrolled into view). I have the basic idea working, but one issue I’m struggling with is the resizing of table columns.

Since only a section of all the rows is actually rendered at any time, the table tends to reflow as the max width of the columns changes.

I thought about iterating the table cells each time the table is rendered, and remembering the “max width” of each column. There would still be some reflowing, but once you’ve seen the widest td, it should stop. The issue is that this seems to be a kind of clunky solution, and I find myself writing more code than I’d like to handle it.

Has anyone run into this before, or have any simpler ideas on how to handle it?

Answer 1

For consistency, I would lock the column width to what it is on the first view of the table. That way, there’s no shifting at all.

You should also give the developer a way to specify a static column width for the columns so that they can size them appropriate to their data once they know the widths.