Real-time collaboration PRO
Share edits and presence with multiple users working on the same data.
Decide which users edit which orders together, then prepare an authenticated real-time server and room ID.
View code
Sample data included in the code · 6 rows
Usage guide
#Let multiple users share edits and presence while viewing the same order list.
Integration steps
- Define a shared workspace
Decide which users edit which orders together, then prepare an authenticated real-time server and room ID.
- Configure collaboration
Connect Grid collaboration settings to the real-time service. Define read/edit permissions and concurrent cell-edit handling.
- Verify with two users
Open the same room in separate browsers and edit one side. Verify propagation, presence, and recovery after disconnection.
Exchange changes and user presence within the same app workspace.
The sample Grid is not connected to a collaboration server. Opening two browser tabs alone does not synchronize sample data.
Useful terms
- Room ID
- A name identifying which users and data share a workspace.
- Concurrent editing conflict
- A situation where multiple users change the same value differently.
Using this feature in your product requires the Pro runtime and a valid license.
API reference
#Other properties7
| Attribute / Property | Type / Default | Description |
|---|---|---|
PRO collaborationRoom | stringDefault: undefined | Collaboration room id. When set (Pro build), the grid joins the room and cell edits sync across clients via the self-implemented CRDT. Community: no-op. |
PRO realtimeUrl | stringDefault: undefined | Optional realtime sync URL (WebSocket). Omit for in-process/same-page demos. |
PRO collabUserName | stringDefault: undefined | This client's display name / color for presence. |
PRO collabUserColor | stringDefault: undefined | Select a name to inspect its type contract. |
PRO collabPresence | booleanDefault: true | Broadcast this client's cursor/selection presence (default true). |
PRO collabConflictUi | booleanDefault: true | Show the built-in conflict UI when this client loses a concurrent same-cell edit: a red flash on the cell + a transient notice naming the winning editor. The `collabConflictResolved` event fires regardless, so a host can turn this off and render its own. |
PRO collabPersistence | 'none' | 'indexeddb'Default: 'none' | Local op persistence: `'none'` (default) or `'indexeddb'` to survive a reload. |
Events6
| Events | Detail type | Description |
|---|---|---|
PRO | GridRemoteEditAppliedDetail | Fires after a remote collaboration edit is integrated (Phase 3.1.D). |
PRO | GridPresenceChangedDetail | Fires when the set of remote collaborators (presence) changes (Phase 3.1.D). |
PRO | GridCollabConflict | Fires when a concurrent same-cell edit is resolved by the CRDT (Phase 3.1.D). |
PRO | GridCollaboratorInfo | Fires when a collaborator joins the room (Phase 3.1.D). |
PRO | { id: string } | Fires when a collaborator leaves the room (Phase 3.1.D). |
PRO | { status: GridSyncStatus } | Fires when the collaboration sync status changes (Phase 3.1.D). |
Methods4
| Method / Arguments | Return type | Description |
|---|---|---|
PRO opts?: { realtimeUrl?: string; userName?: string; userColor?: string; presence?: boolean; persistence?: 'none' | 'indexeddb' } | Promise<GridSyncStatus> | Join the collaboration room (Pro, grid.collaboration). An existing session answers its status and a grid without a room answers 'offline' (nothing to join — no license read). Otherwise the request is refused (rejects with the license error) unless entitled; a build without the collab runtime rejects `module-missing` and a runtime or connection failure `load-failed` — never a silent 'offline'. Cell edits then sync across clients in the same `collaborationRoom`. |
PRO | Promise<void> | Leave the collaboration room. |
PRO | Promise<GridSyncStatus> | Current sync status — 'offline' in Community / when not connected. |
PRO | Promise<GridCollaboratorInfo[]> | Connected collaborators . |
Explore each feature
Learn when to use each feature and how to configure it. Each guide identifies live examples and features you connect in your app.