More on Framework Component Cell Renderers

In the last video, we learned about registering a basic React component as a cell renderer. This means that we have the full power of React at our disposal! We can then track internal state, make calls to APIs, or whatever else we need to do.

In this video, we update NameFieldComponent to keep track of a flaggedForReview piece of state which we can set to true through a button. We can even access the rest of the row's data to pull the id and display it in an alert. If we were working with a backend, we could also send this data to an API through this button.

Here's the finished code for NameFieldComponent (nothing has changed in App.js):

// src/NameFieldComponent.js
import React, { Component } from "react";

export default class NameFieldComponent extends Component {
  constructor(props) {
    super(props);
    this.value = this.props.value;
    this.rowIndex = this.props.rowIndex;
    this.id = this.props.data.id;
    this.api = props.api;
    this.state = {
      flaggedForReview: false
    };
  }

  flag = () => {
    alert(`${this.value} is flagged for review! (id: ${this.id})`);
    this.setState({ flaggedForReview: true });
  };

  render() {
    return (
      <div>
        <span style={{ color: this.state.flaggedForReview ? "red" : "black" }}>
          {this.value}!
        </span>
        <button
          type="button"
          style={{ marginLeft: "5px" }}
          onClick={this.flag}
          disabled={this.state.flaggedForReview}
        >
          Flag for Review!
        </button>
      </div>
    );
  }
}

When you run npm start, you should be able to see your grid at localhost:3000. Click on the button in the name row. You should see an alert that displays the name and ID of the row, followed by the text turning red and the button becoming disabled. So cool!

Up next, let's learn about ag-Grid's Infinite Row Model!

Helpful Links

• ag-Grid Docs: React Cell Rendering
• ag-Grid Docs: Registering Framework Components