react ag-grid note 1

react ag-grid note 1 

https://www.youtube.com/watch?v=6hxbPqziELk&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW&index=1

npx create-react-app my-app

cd my-app

npm install --save ag-grid-react

npm run start

App.js

import { AgGridReact } from 'ag-grid-react';

import { useMemo, useState } from 'react';

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

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

import './App.css';

const MyCellComponent = p => {

return <>

<button onClick={ ()=>window.alert("Action!")}>+</button>

{p.value}

</>

};

function App() {

// Row Data: The data to be displayed.

const [rowData, setRowData] = useState([

{ make: "Tesla", model: "Model Y", price: 64950, electric: true },

{ make: "Ford", model: "F-Series", price: 33850, electric: false },

{ make: "Toyota", model: "Corolla", price: 29600, electric: false },

{ make: "Mercedes", model: "EQA", price: 48890, electric: true },

{ make: "Fiat", model: "500", price: 15774, electric: false },

{ make: "Nissan", model: "Juke", price: 20675, electric: false },

]);

// Column Definitions: Defines & controls grid columns.

const [colDefs, setColDefs] = useState([

{

field: "make",

cellRenderer: MyCellComponent,

cellEditor: 'agSelectCellEditor',

cellEditorParams: { values: ['Tesla','Ford']}

},

{

field: "model",

checkboxSelection: true

},

{

field: "price",

cellClassRules: {

'green-cell': p=>p.value > 30000

}

},

{ field: "electric" },

]);

const defaultColDef = useMemo( ()=>{

return {

flex: 1,

editable: true,

filter: true,

floatingFilter: true

}

});

const rowClassRules = useMemo( ()=>({

'red-row': p=>p.data.make == 'Tesla'

})

);

return (

<div className='ag-theme-quartz-dark' style={{height: 500}}>

<AgGridReact rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} rowClassRules={rowClassRules}></AgGridReact>

</div>

);

}

export default App;

App.css

.green-cell{

background-color: rgb(100,150,100);

}

.red-row{

background-color: rgb(150, 100, 100);

}