Streaming updates

View source

Push row-level updates into a server-backed grid without re-fetching the page. The grid reconciles incoming updates against its block cache; visible rows reflect the new value without losing scroll, sort, or selection.

0 updates delivered

Order #

Customer

Amount

Sales rep

Try this

Click "Start stream" to push a randomised row update every 1.5 seconds.

Watch the Amount column — values change on whichever row gets the update.
Click "Send one update" for a deterministic single update.
Sort the grid first, then start the stream — sort order is preserved across updates.
Scroll the grid while updates are streaming — they keep flowing without disrupting scroll.

Update shapes

rowUpdated. { type: "rowUpdated", rowId, row, revision? } — replaces the cached row in place. Used in the demo above.
rowAdded. { type: "rowAdded", row, indexHint?, viewKey? } — inserts the row at indexHint (or appended). Total row count updates.
rowRemoved. { type: "rowRemoved", rowId, revision? } — drops the row from cache; subsequent rows shift up.
viewInvalidated. { type: "viewInvalidated", viewKey?, reason? } — nuke the cache, refetch from page 0. Use when you can't describe the change as a per-row delta.

Wiring

Pair useServerRowUpdates(apiRef, subscribe) with a subscribe function that calls a handler when your transport (Server-Sent Events, WebSocket, polling) yields an update. The hook returns the unsubscribe automatically when the grid unmounts. Updates carry a revision string for race-safe ordering — the cache drops updates with stale revisions.