Custom Editors

Outline

We've reached the real payoff of this cell editing section: creating a custom cell editor using a React component. This video is a bit longer than usual but I wanted to keep it as one cohesive video instead of breaking it into pieces.

To create a custom cell editor with a React component, there are a few basic things to remember:

The grid will provide the value of the cell as a prop (props.value)
You need to return a value to the grid using the getValue() function that is part of the cell editor component API.
There are a number of "lifecycle methods" you can override. One of these is afterGuiAttached(), which lets you add some logic that runs as soon as the editor appears in the UI.

To make a custom editor available to the grid, we first need to create a frameworkComponents object that registers our React component under a specified name. We'll create the object in our App component state:

// App.js
// this.state
frameworkComponents: {
  numericCellEditor: NumericCellEditor,
},

Then we can pass the framework components as a prop to the AgGridReact component:

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

Finally, we'll use our cell editor in the account number column definition:

// App.js
// Column definitions
{
  headerName: "Acct #",
  field: "accountNumber",
  editable: true,
  cellEditor: "numericCellEditor",
},

Here's the final version of our NumericCellEditor component:

// NumericCellEditor.js
import React, { Component } from "react";
import {
  KEY_BACKSPACE,
  KEY_DELETE,
  isLeftOrRight,
  deleteOrBackspace,
  isKeyPressedNumeric,
} from "./helpers";

class NumericCellEditor extends Component {
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
    let initialState =
      props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE
        ? ""
        : props.value;
    this.state = { value: initialState };
  }

  afterGuiAttached() {
    this.editorRef.current.focus();
  }

  getValue() {
    return this.state.value;
  }

  onKeyDown = (event) => {
    if (isLeftOrRight(event) || deleteOrBackspace(event)) {
      event.stopPropagation();
      return;
    }

    if (!isKeyPressedNumeric(event)) {
      if (event.preventDefault) event.preventDefault();
    }
  };

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <input
        ref={this.editorRef}
        onKeyDown={this.onKeyDown}
        value={this.state.value}
        onChange={this.handleChange}
        style={{ width: "100%" }}
      />
    );
  }
}

export default NumericCellEditor;

In the final video of this section, I'll show you where to find information on all of the other grid components you can customize.

The React snippets I use in this video are called Simple React Snippets by Burke Holland.

Go Pro to unlock all content & remove ads

Outline

Outline

I finished! On to the next chapter