Question

I want to add style classes to elements in a cell (or the td itself) that will change depending on the state of the data in the cell. For example, the cell might have color: red when the data is unsaved, color: blue while the data is being saved, and color: black once the save completes successfully. Code external to the Cell will need access to change the class names, once callbacks are fired, etc.

I have achieved something like this with a hack in my Cell that gets the Element from onBrowserEvent and adds attributes there. I can set the initial style in render and then change it as needed in onBrowserEvent, and even keep track of that element so that external code can use it. This is incomplete, because I can’t get the element until onBrowserEvent is called, and annoyingly hacky because I have to set the style in two different places.

What’s a better way to achieve this effect without re-rendering the entire table whenever the state of a cell changes?

Answer 1

The disappointing answer here is that you can’t have the best of both worlds – static, all-at-once-rendering, AND dynamic, change-one-element-updating. The only way to change the style of a single cell, within the methods provided by CellTable et al, is to rerender the whole table.

In my own code I’ve kind of formalized the hacks I made to update single cells at a time, by setting the DOM id of a div rendered to each table cell. Then I can use getElementById and proceed from there. I still avoid the overhead of a full widget. It’s a little clunky, but hidden behind a nice interface it’s not too bad.