Overview

The fill handle appears as a small square at the bottom-right corner of a focused cell. Drag it to copy the cell's value to adjacent cells - just like in Excel.

FH01 Interactive Demo

Click a cell to focus it, then drag the small handle at the bottom-right corner to fill adjacent cells.

Fill Direction:
Fill Log: Drag the fill handle (small square at bottom-right of focused cell) to copy values...
Fill Handle Setup 
 
 
FH02 Type-Based Validation
 
Fill handle automatically validates values based on column type. Incompatible values are skipped.
 
Number Columns
 
Only accepts numeric values. Strings and other types are rejected.
 editor: 'number'
 
Select / Combobox
 
Only accepts values that exist in the options list.
 editor: 'select' | 'combobox'
 
Date Columns
 
Only accepts valid date strings, Date objects, or timestamps (2000-2100).
 editor: 'date'
 
Text / Autocomplete
 
Accepts any value. Use fillDragCallback for custom validation.
 editor: 'text' | 'autocomplete'
 
Custom Validation: Use the fillDragCallback to implement custom fill validation logic beyond the built-in type checks.
 
API Reference
 
Grid Properties
 
PropertyTypeDefaultDescription
fillDirection'vertical' | 'all''vertical'Allowed fill directions (grid-level default)
fillDragCallbackfunction-Callback before fill - return false to cancel
 
Column Properties
 
PropertyTypeDescription
fillDirection'vertical' | 'all'Per-column override for fill direction
 
FillDragDetail Interface
 
TypeScript Types 
 
 
 
Notes
 
  • Fill handle only appears when cell is focused and column is editable
    •  
  • Non-editable cells are automatically skipped during fill
    •  
  • Draft row values (recently edited) are used as source values
    •  
  • Drag threshold (5px) prevents accidental fill on click
    •  
  • onrowchange fires for each modified cell after fill completes
 
Behavior Notes
 
Fill Handle Interactions
 
  • Escape cancels: Press Escape during a fill drag to cancel the operation
    •  
  • Row locking: Locked rows are automatically skipped during fill operations
    •  
  • Direction: Use fillDirection column property to restrict fill to specific directions ('vertical' or 'all')