React Data Grid

Fill Handle

react logo
Enterprise

When working with a Range Selection, a Fill Handle allows you to run operations on cells as you adjust the size of the range.

Enabling the Fill Handle

To enable the Fill Handle, simply set enableFillHandle to true in the gridOptions as shown below:

const [columnDefs, setColumnDefs] = useState([
    { field: 'country' },
    { field: 'year' },
    { field: 'sport' },
    { field: 'total' }
]);
const enableRangeSelection = true;
const enableFillHandle = true;

<AgGridReact
    columnDefs={columnDefs}
    enableRangeSelection={enableRangeSelection}
    enableFillHandle={enableFillHandle}
/>

It's important to note that if you enable both enableFillHandle and enableRangeHandle, the Fill Handle will take precedence.

Default Fill Handle

The default Fill Handle behaviour will be as close as possible to other spreadsheet applications. Note the following:

Single Cell

  • When a single cell is selected and the range is increased, the value of that cell will be copied to the cells added to the range.
  • When a single cell containing a number value is selected and the range is increased while pressing the ⌥ Esc/Option key, that value will be incremented (or decremented if dragging to the left or up) by the value of one until all new cells have been filled.

Multi Cell

  • When a range of numbers is selected and that range is extended, the Grid will detect the linear progression of the selected items and fill the extra cells with calculated values.
  • When a range of strings or a mix of strings and numbers are selected and that range is extended, the range items will be copied in order until all new cells have been properly filled.
  • When a range of numbers is selected and the range is increased while pressing the ⌥ Esc/Option key, the behaviour will be the same as when a range of strings or mixed values is selected.

Range Reduction

  • When reducing the size of the range, cells that are no longer part of the range will be cleared (set to null).

Preventing Range Reduction

Reducing a range selection with the Fill Handle will clear cell contents by default, as can be observed in the Range Reduction example above.

If this behaviour for decreasing selection needs to be prevented, the flag suppressClearOnFillReduction should be set to true.

Fill Handle Axis

By the default, the Fill Handle can be dragged horizontally or vertically. If dragging only vertically, or only horizontally is a requirement, the gridOptions property fillHandleDirection property can be set. This default value is xy.