ExamplesRows & Selection
Streaming
A live ticker feed pushing updateCells batches four times a second (deferred vs immediate re-sort).
A live ticker: updateCells streams new values in place, four batches per second. The
Auto-sort switch picks how the display reacts. reorder: "immediate" re-sorts every tick,
reorder: "defer" lets the values land and shows a Re-sort bar when the display order goes
stale.
Click the Change % header to sort: with Auto-sort off, rows hold their position as new values stream in and a "Re-sort" bar appears once the order goes stale; with Auto-sort on, the grid re-sorts on every tick (4/s).
pnpm dlx shadcn@latest add @gridcn/data-grid-streaming-demo
What's in the demo
- A ticker feed pushing
change/volumepatches for every row every 250 ms - Auto-sort on: the grid re-sorts by the sorted column on every batch (watch the rows shuffle as prices cross each other)
- Auto-sort off: rows hold their position. When a deferred batch changed the sort order, a
Re-sort bar appears, and
reconcileView()applies it in one step
Behavior reference
- Streaming updates guide:
updateCells/updateRows, the two reorder modes, and why deferred batches exist - Performance: what makes a 100k-row grid stream smoothly