GM01 Grid Modes

Switch between read-only, excel, and input-matrix modes

Live Demo

Switch modes to see how editing behavior changes.

Code
Grid Mode 
 
 
Mode Details
 
Excel Mode
 
Spreadsheet-like editing. Navigate with arrows, type to start editing. Double-click or F2 also enter edit mode.
 
isEditable
true
 
editTrigger
'navigate'
 
dropdownToggleVisibility
'always'
 
shouldShowDropdownOnFocus
false
 
cellSelectionMode
'click'
 
Best for: Spreadsheet-like editing, data analysis.
 
GM02 Edit Triggers
 
Control how users enter edit mode in cells
 
Live Demo
 
    
 
 
Code
 
Edit Trigger 
 
 
 
Description
 
Edit Triggers
 
dblclick — Double-click to edit. Default trigger. Prevents accidental edits.
 
All Triggers
 
  • click — Single click
    •  
  • dblclick — Double click (default)
    •  
  • navigate — Type to edit (Excel-like)
    •  
  • always — Always in edit mode
    •  
  • button — Edit button in cell
 
GM03 Edit Start Selection
 
Control cursor position when entering edit mode
 
Live Demo
 
   
  
Click a cell to edit and observe cursor position.
 
Code
 
Edit Start Selection 
 
 
 
Description
 
Selection Options
 
selectAll — All text is selected when entering edit mode. Typing replaces the entire value.
 
All Options
 
  • selectAll — Select all
    •  
  • mousePosition — At click position (default)
    •  
  • cursorAtStart — At beginning
    •  
  • cursorAtEnd — At end
 
Set globally on the grid or per-column via editorOptions.editStartSelection.
 
GM04 Dropdown Behavior
 
Configure dropdown toggle visibility and auto-open behavior
 
Live Demo
 
 
Focus on Department or Status cells to see dropdown behavior.
 
Code
 
Dropdown Config 
 
 
 
Configuration
 
 
 
 
dropdownToggleVisibility = "always"
 
 
 
always shows the dropdown arrow even when not editing. on-focus shows it only when the cell is focused.
 
API Reference
 
PropertyTypeDefaultDescription
mode'read-only' | 'excel' | 'input-matrix''excel'Sets sensible defaults for common use cases. Setting mode overrides individual properties.
editTrigger'click' | 'dblclick' | 'navigate' | 'always' | 'button''dblclick'How users enter edit mode. Can be overridden per-column.
editStartSelection'selectAll' | 'mousePosition' | 'cursorAtStart' | 'cursorAtEnd''mousePosition'Cursor/selection position when entering edit. Per-column override via editorOptions.editStartSelection.
dropdownToggleVisibility'always' | 'on-focus''always'When to show dropdown toggle arrow. Grid-level and per-column.
shouldShowDropdownOnFocusbooleantrueAuto-open dropdown when cell receives focus. Grid-level only.
shouldOpenDropdownOnEnterbooleanfalseEnter key opens dropdown (true) or moves to next row (false). Grid-level and per-column.
cellSelectionMode'disabled' | 'click' | 'shift''click'How to select cell ranges. 'shift' requires Shift+click to avoid conflict with always-editing cells.
isEditablebooleantrueEnable/disable editing globally. Individual columns can override with column.isEditable.