add sass

package.json

@@ -6,6 +6,10 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "ag-grid-community": "^23.2.1",
+    "ag-grid-enterprise": "^23.2.1",
+    "ag-grid-react": "^23.2.1",
+    "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

src/App.js

@@ -1,26 +1,57 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from 'react';
+import './App.scss';
+import { AgGridReact } from 'ag-grid-react';
+import 'ag-grid-enterprise';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      columnDefs: [{
+        headerName: "Make", field: "make", rowGroup: true
+      }, {
+        headerName: "Price", field: "price"
+      }],
+      rowData: null,
+      autoGroupColumnDef: {
+        headerName: "Model",
+        field: "model",
+        cellRenderer: 'agGroupCellRenderer',
+        cellRendererParams: {
+          checkbox: true
+        }
+      }
+    }
+  }
+  componentDidMount() {
+    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 => this.setState({ rowData }))
+  }
+
+  onButtonClick = e => {
+    const selectedNodes = this.gridApi.getSelectedNodes()
+    const selectedData = selectedNodes.map(node => node.data)
+    const selectedDataStringPresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ')
+    alert(`Selected nodes: ${selectedDataStringPresentation}`)
+  }
+
+  render() {
+    return (
+      <div style={{ height: '250px', width: '600px' }} className="ag-theme-alpine">
+        <button onClick={this.onButtonClick}>Get selected rows</button>
+        <AgGridReact
+          rowSelection="multiple"
+          onGridReady={params => this.gridApi = params.api}
+          columnDefs={this.state.columnDefs}
+          groupSelectsChildren={true}
+          autoGroupColumnDef={this.state.autoGroupColumnDef}
+          rowData={this.state.rowData}>
+        </AgGridReact>
+      </div>
+    );
+  }
 }
 
-export default App;
+export default App;

src/App.scss

@@ -0,0 +1,8 @@
+@import "../node_modules/ag-grid-community/src/styles/ag-grid.scss";
+@import "../node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";
+
+.ag-theme-alpine {
+  @include ag-theme-alpine((
+    odd-row-background-color: #BFC8DC
+  ));
+}