Fill Handle

Note: Fill handle is an ag-Grid Enterprise feature. You're welcome to test drive all of the enterprise features for free, you just can't ship them to production without a license. We're also using this StackBlitz in this lesson.*

If you've ever used programs like Excel, you may have used a feature where you can copy or increment values by dragging a selection across cells. It turns out this is called a fill handle. A fill handle allows you to run operations on cells as you adjust the size of the range. ag-Grid lets us use a fill handle in conjunction with range selection.

To enable the fill handle, first set the editable property of any columns you want affected to true. We can just set the default column definition to have that property:

// App.js
defaultColDef: {
        flex: 1,
        minWidth: 100,
        editable: true
      },

We then need to add a property to our state:

// App.js
// state object
enableFillHandle: true

And add a prop to our AgGridReact component:

// App.js
// AgGridReact component props
enableFillHandle={this.state.enableFillHandle}

Here's the list of features I demonstrate in the video:

• Select a single text cell, it copies
• Select a single number, it copies
• Select a single number but hold option (alt on Windows), it progresses
• Select a range of text, it copies
• Select a range of numbers, it progresses
• Select a range of numbers but hold option (alt on Windows), it copies
• Reduce the range, cells get cleared

That's all for Selection, congratulations! Up next, we'll learn about cell editing. Stay tuned!