Basically an element without its own geometry that renders in multiple locations on the screen. E.g. if a dom table (or a grid) has 10 columns x 1000 rows, it must have 10k real td (div) elements. A table in most desktop frameworks will only have 10 cells which will be rendered at multiple (visible only) y-positions. When you scroll, they render a few in advance on a scroll-cache surface. This saves memory and reduces reflow pressure because a framework knows the geometry of a cell.

Of course if a table (any collection really) contains differently looking items, it may have more than 10 cells, and rendering controller may choose between them based on which row/column is rendered.

React mentions in their docs a plugin which simulates exactly that (forgot the name, something like react-dynamic-scroll).

Also, some frameworks use cells to render active elements basics, e.g. an input without a frame, or a check mark cell without a background. This helps to make controls editable without instatiating a real input/check/button element at the coordinates of a cell. This makes every button in a container a single button which signals clicks to its container, which based on x,y knows which item that is and signals rendering controller that item X was “clicked on the button B”.

Wow, I've been trying to come up with a way to do this on the web for a while now, but haven't cracked it yet. Had no idea it was a common thing in other UI technologies.

Here is the react docs part: https://reactjs.org/docs/optimizing-performance.html#virtual...

Click on the links, there are live examples.