Ag Grid Integration in React

 import { Container, Segment } from "semantic-ui-react";

import "./App.css";

import { AgGridColumn, AgGridReact } from "ag-grid-react";

import React, { useState, useEffect } from "react";

import "ag-grid-community/dist/styles/ag-grid.css";

import "ag-grid-community/dist/styles/ag-theme-alpine.css";

function App() {

  const [gridApi, setGridApi] = useState(null);

  const [rowData, setRowData] = useState([

    { make: "Toyota", model: "Celica", price: 35000 },

    { make: "Ford", model: "Mondeo", price: 32000 },

    { make: "Porsche", model: "Boxter", price: 72000 },

  ]);

  useEffect(() => {

    fetch(

      "https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/sample-data/rowData.json"

    )

      .then((result) => result.json())

      .then((rowData) => setRowData(rowData));

  }, []);

  const onButtonClick = (e) => {

    const selectedNodes = gridApi.getSelectedNodes();

    const selectedData = selectedNodes.map((node) => node.data);

    const selectedDataStringPresentation = selectedData

      .map((node) => node.make + " " + node.model)

      .join(", ");

    alert(`Selected nodes: ${selectedDataStringPresentation}`);

  };

  return (

    <Container>

      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>

        <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>

          <button onClick={onButtonClick}>Get selected rows</button>

          <AgGridReact

            rowData={rowData}

            rowSelection="multiple"

            onGridReady={(params) => setGridApi(params.api)}

          >

            <AgGridColumn

              field="make"

              sortable={true}

              filter={true}

              checkboxSelection={true}

            ></AgGridColumn>

            <AgGridColumn

              field="model"

              sortable={true}

              filter={true}

            ></AgGridColumn>

            <AgGridColumn

              field="price"

              sortable={true}

              filter={true}

            ></AgGridColumn>

          </AgGridReact>

        </div>

      </div>

    </Container>

  );

}

export default App;