Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Build a custom component for ag-Grid React

Hi, I have tried to create a custom component for ag-Grid React, and I followed the instructions of dash-component-boilerplate. I shared my experience on Build A Custom Dash Component. Dash is a Python framework for building… | by Jacky Shi | Medium, if you need to build an ag-Grid component as well.

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 {

    onSelectionChanged () {
    var selectedRows = this.props.gridApi.getSelectedRows();
    this.props.setProps({selectedRows: selectedRows});
    }

    render() {
    const {id, columnDefs, setProps, rowData} = this.props;

     return (
         <div id={id}>
             <div> An ag-Grid Component in Dash </div>
             <div className="ag-theme-alpine" style={ {height: '300px', width: '800px'} }>
                 <AgGridReact
                     onGridReady={(params) => {
                         setProps({gridApi:params.api, isGridReady:true})
                     }}
                     rowSelection='single' 
                     onSelectionChanged={this.onSelectionChanged.bind(this)}
                     columnDefs={columnDefs}
                     rowData={rowData}>
                 </AgGridReact>
             </div>
         </div>
     );
    

    }
    }

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

};