# Build a custom component for ag-Grid React

**URL:** <https://community.plotly.com/t/build-a-custom-component-for-ag-grid-react/41847>\
**Category:** Dash Python\
**Tags:** show-and-tell\
**Created:** [July 1, 2020, 12:49pm UTC](https://community.plotly.com/t/build-a-custom-component-for-ag-grid-react/41847 "2020-07-01T12:49:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jackyshi](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@jackyshi](https://community.plotly.com/u/jackyshi)\
**Post date:** [July 1, 2020, 12:49pm UTC](https://community.plotly.com/t/build-a-custom-component-for-ag-grid-react/41847/1 "2020-07-01T12:49:53Z")

</div>

Hi, I have tried to create a custom component for [ag-Grid React](https://www.ag-grid.com/react-grid/), and I followed the instructions of [dash-component-boilerplate](https://github.com/plotly/dash-component-boilerplate). I shared my experience on [Build A Custom Dash Component. Dash is a Python framework for building… | by Jacky Shi | Medium](https://medium.com/@jackylishi/build-a-custom-dash-component-5d0059c97a8e), if you need to build an ag-Grid component as well.

---

<div class="post-metadata">

**Author:** ![jackyshi](https://avatars.discourse-cdn.com/v4/letter/j/b2d939/32.png) [@jackyshi](https://community.plotly.com/u/jackyshi)\
**Post date:** [July 1, 2020, 1:09pm UTC](https://community.plotly.com/t/build-a-custom-component-for-ag-grid-react/41847/2 "2020-07-01T13:09:52Z")

</div>

Added the React code

> import React, {Component} from ‘react’;  
> import PropTypes from ‘prop-types’;  
> import { AgGridReact } from ‘ag-grid-react’;
> 
> import ‘ag-grid-community/dist/styles/ag-grid.css’;  
> import ‘ag-grid-community/dist/styles/ag-theme-alpine.css’;
> 
> /\*\*
> 
> - Dashcustomgrid is a component wrapped on ag-Grid.
> 
> - It takes two property, `columnDefs`, and `rowData`
> 
> - displays them.  
> \*/  
> export default class Dashcustomgrid extends Component {
> 
> Dashcustomgrid.defaultProps = {};
> 
> Dashcustomgrid.propTypes = {  
> /\*\*  
> \* The ID used to identify this component in Dash callbacks.  
> _/  
> id: PropTypes.string,  
> /_\*  
> _gridApi for ag-Grid.  
> /  
> gridApi: PropTypes.object,  
> /_  
> \*columnDefs for ag-Grid.  
> \*/  
> columnDefs: PropTypes.array,
> 
> ```
> /**
> * rowData for ag-Grid.
> */
> rowData: PropTypes.array,
> 
> /**
> * selectedRows for ag-Grid.
> */
> selectedRows: PropTypes.array,
> /**
> * Dash-assigned callback that should be called to report property changes
> * to Dash, to make them available for callbacks.
> */
> setProps: PropTypes.func
> 
> ```
> 
> };

---

<div class="post-metadata">

**Author:** ![rictuar](https://avatars.discourse-cdn.com/v4/letter/r/d2c977/32.png) [@rictuar](https://community.plotly.com/u/rictuar)\
**Post date:** [June 6, 2023, 6:15pm UTC](https://community.plotly.com/t/build-a-custom-component-for-ag-grid-react/41847/5 "2023-06-06T18:15:00Z")

</div>

thanks for this

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [June 6, 2023, 7:42pm UTC](https://community.plotly.com/t/build-a-custom-component-for-ag-grid-react/41847/6 "2023-06-06T19:42:23Z")

</div>

No need to build your own custom wrapper for Ag Grid 🎉

> **[Dash AG Grid | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-ag-grid)**
>
> How to install Dash AG Grid, a high-performance and highly customizable component based on AG Grid.