We've seen how to use basic cell renderers with HTML, but that's only the most basic use case. One of ag-Grid's most powerful features is the ability to use framework components as cell renderers — in our case, a React component!
In this video, we do the basic setup of creating a NameFieldComponent and registering it with our grid as a frameworkComponent.
The finished component will look like this:
// 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;
}
render() {
return (
<div>
<span style={{ fontWeight: this.rowIndex % 2 ? "400" : "800" }}>
{this.value}!
</span>
</div>
);
}
}
Inside of App.js, we need to register our framework component with a key and value inside of our state:
// src/App.js
// other code unchanged
this.state = {
// ...above unchanged
frameworkComponents: {
nameFieldComponent: NameFieldComponent
}
}
Then, we can use that component with our name field:
// src/App.js
// other code unchanged
this.state = {
columnDefs: [
{
headerName: "Name",
field: "name",
cellRenderer: "nameFieldComponent"
},
// rest unchanged
]
}
Don't forget to register the frameworkComponents as a prop to AgGridReact!
// src/App.js
// rest unchanged
<AgGridReact
onGridReady={this.onGridReady}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
defaultColDef={this.state.defaultColDef}
frameworkComponents={this.state.frameworkComponents}
></AgGridReact>
At this point, all we're doing is displaying the field and styling the odd and even rows. In the next video, we'll add some internal state to this component and access some other data in the row.