Wednesday, November 24, 2021

AgGrid in react.js



1. AgGrid in react.js Example: GridRenderer.js

import React, { Component } from 'react';
import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
import "ag-grid-enterprise";
import { LicenseManager } from "ag-grid-enterprise";

//Input LicenseKey here
LicenseManager.setLicenseKey(
);

class GridRenderer extends Component {

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className={this.props.gridOptions.pagination == true ? "ag-theme-balham pagi" : "ag-theme-balham"}>
                <AgGridReact
                    gridOptions={this.props.gridOptions}
                    rowData={this.props.rowData}
                    onGridReady={this.props.onGridReady}
                >
                </AgGridReact>
            </div>
        );
    }

};

export default GridRenderer;

2) To call this component from another component

import React, { Component, useState } from 'react';
import GridRenderer from '../../components/GridRenderer';
import Select from 'react-select';
import { Spinner } from 'react-bootstrap';

class ApplicationList extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (

                                        <div className="grid-wrapper mb-3">
                                            <GridRenderer
                                                gridOptions={this.props.type === 3 ? this.props.gridOptions3 : this.props.gridOptions2}
                                                rowData={this.props.searchResult}
                                                onGridReady={this.props.onGridReady2}
                                            />
                                        </div>
        )
    }
};

export default ApplicationList;


 


No comments:

Post a Comment