Streaming updates
View sourcePush 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
Try this
Click "Start stream" to push randomised row updates about 2-3 times per second.
- Watch the Amount column — values change on whichever row gets the update.
- Click "Send one update" for a single random 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 when the update does not change the row's position in the active server view. - rowAdded.
{ type: "rowAdded", row, indexHint?, viewKey? }— inserts the row atindexHint(or appended). The demo pairs this withrowRemovedso amount changes move to the right sorted position without a page refetch. - 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.