RL01 Property-Based Locking
Lock rows based on data properties (isLocked, lockInfo)
Live Demo
Row 2 (Bob) is locked - try clicking to edit.
Code
Property-Based
How It Works
Lock Sources
lockedMember - Simple boolean property
lockInfoMember - Full object with details
LockInfo Object
isLocked- BooleanlockedBy- User namelockedAt- Timestampreason- Custom message
Visual Indicators
- Lock icon replaces row number
- Muted row styling
- Tooltip shows who locked
RL02 Callback-Based Locking
Compute lock status dynamically based on row data
Live Demo
Row 2 (review) and Row 3 (approved) are locked.
Code
Callback-Based
How It Works
Use Cases
- Status-based locking (approved, archived)
- Permission-based locking
- Computed lock conditions
Callback Options
isLockedCallback - Returns boolean
getLockInfoCallback - Returns full LockInfo or null
Edit Behaviors
block- Cannot edit (default)allow- Can edit, just visualcallback- Use canEditLockedCallback
RL03 External API Locking
Lock/unlock rows via JavaScript API (WebSocket scenarios)
Live Demo
Event Log
Waiting for events...
Code
External API
Actions
Try These Actions
API Methods
lockRowById(id, info?)unlockRowById(id)updateRowById(id, data)replaceRowById(id, row)isRowLocked(rowOrId)getRowLockInfo(rowOrId)
Configuration Reference
| Property | Type | Description |
|---|---|---|
idValueMember | string | Property name for row ID (required for external API) |
idValueCallback | (row) => unknown | Callback to compute row ID |
rowLocking.lockedMember | string | Property name for boolean lock state |
rowLocking.lockInfoMember | string | Property name for full LockInfo object |
rowLocking.isLockedCallback | (row) => boolean | Callback returning lock state |
rowLocking.getLockInfoCallback | (row) => LockInfo | null | Callback returning full lock info |
rowLocking.lockedEditBehavior | 'block' | 'allow' | 'callback' | What happens when editing locked row |
rowLocking.canEditLockedCallback | (row, lockInfo) => boolean | Custom permission check (when behavior='callback') |
rowLocking.lockTooltipCallback | (lockInfo, row) => string | Custom HTML tooltip for locked rows (overrides default) |
Integration with Other Features
Row Locking Interactions
- Fill handle: Locked rows are automatically skipped during fill operations
- Paste: Paste operations respect row locking - locked rows are skipped
- Read-only toggles: Dropdown and date picker toggles are hidden on locked rows
CSS Variables
| Variable | Default | Description |
|---|---|---|
--wg-row-locked-bg | rgba(0, 0, 0, 0.03) | Background for locked rows |
--wg-row-locked-opacity | 0.6 | Opacity for locked row content |