ag grid react

 

1. Install nodist from nodists/nodist: Natural node.js and npm version manager for windows. (github.com)

after the installation, the node and npm are available:

C:\Users\peterpeng>node -v

v20.10.0

C:\Users\peterpeng>npm -v

10.2.3

2. Install yarn

npm install --global yarn

C:\Users\peterpeng>yarn --version

1.22.22

3.

git clone https://github.com/ag-grid/ag-grid-server-side-nodejs-example.git
cd ag-grid-server-side-nodejs-example
    insert the data into MS SQL Server table (8001 rows)
  Not necessary, can get the data directly from https://www.ag-grid.com/example-assets/olympic-winners.json 


npx create-react-app olympic-winners
cd olympic-winners
npm install ag-grid-react ag-grid-community axios

npm start

App.js
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import './OlympicWinners.css'; 

const OlympicWinners = () => {
  const [rowData, setRowData] = useState([]);
  const [country, setCountry] = useState('United States');
  const [year, setYear] = useState(2008);
  const gridRef = useRef();

  const fetchWinners = async () => {
    try {
      const response = await axios.get('https://www.ag-grid.com/example-assets/olympic-winners.json', {
        params: {
          country,
          year,
        },
      });
      setRowData(response.data);
    } catch (error) {
      console.error('Error fetching data', error);
    }
  };

  useEffect(() => {
    fetchWinners();
  }, []);

  const handleUpdate = async (updatedData) => {
    try {
      await axios.put('http://localhost:3000/api/olympic-winners', updatedData);
      fetchWinners();
    } catch (error) {
      console.error('Error updating data', error);
    }
  };

  const handleDelete = async (id) => {
    try {
      await axios.delete(`http://localhost:3000/api/olympic-winners/${id}`);
      fetchWinners();
    } catch (error) {
      console.error('Error deleting data', error);
    }
  };

  const onCellEditingStopped = async (event) => {
    const updatedData = event.data;
    await handleUpdate(updatedData);
  };

  const DeleteButton = (props) => {
    const onClick = () => {
      props.onClick(props.data.id);
    };

    return <button onClick={onClick}>Delete</button>;
  };

  const columnDefs = [
    { field: 'athlete', editable: true },
    { field: 'age', editable: true },
    { field: 'country', editable: true },
    { field: 'country_group', editable: true },
    { field: 'year', editable: true },
    { field: 'date', editable: true },
    { field: 'sport', editable: true },
    { field: 'gold', editable: true },
    { field: 'silver', editable: true },
    { field: 'bronze', editable: true },
    { field: 'total', editable: true },
    {
      headerName: 'Actions',
      cellRenderer: DeleteButton,
      cellRendererParams: {
        onClick: handleDelete,
      },
    },
  ];

  return (
    <div className="app-container">
      <nav className="left-nav">
        <ul>
          <li><a href="#">Dashboard</a></li>
          <li><a href="#">Olympic Winners</a></li>
          <li><a href="#">Statistics</a></li>
          <li><a href="#">Settings</a></li>
        </ul>
      </nav>
      <div className="main-content">
        <header className="top-nav">
          <h1>Olympic Data Management</h1>
          <div>
            <span>User: Admin</span>
            <button style={{marginLeft: '10px'}}>Logout</button>
          </div>
        </header>
        <main className="content">
          <div className="container">
            <h2 className="header">Olympic Winners</h2>
            <div>
              <div className="form-group">
                <label>
                  Country:
                  <input
                    type="text"
                    value={country}
                    onChange={(e) => setCountry(e.target.value)}
                  />
                </label>
              </div>
              <div className="form-group">
                <label>
                  Year:
                  <input
                    type="number"
                    value={year}
                    onChange={(e) => setYear(Number(e.target.value))}
                  />
                </label>
              </div>
              <button onClick={fetchWinners}>Fetch Winners</button>
            </div>
            <div className="ag-theme-alpine" style={{marginTop: '20px'}}>
              <AgGridReact
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={{ sortable: true, filter: true }}
                rowSelection="single"
                onCellEditingStopped={onCellEditingStopped}
              />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};

export default OlympicWinners;



OlympicWinners.css
/* OlympicWinners.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

.app-container {
  display: flex;
  height: 100vh;
}

.left-nav {
  width: 200px;
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}

.left-nav ul {
  list-style-type: none;
  padding: 0;
}

.left-nav li {
  margin-bottom: 10px;
}

.left-nav a {
  color: white;
  text-decoration: none;
}

.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.top-nav {
  background-color: #34495e;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  padding: 20px;
  overflow-y: auto;
}

.container {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

label {
  font-weight: bold;
  margin-right: 10px;
}

input[type="text"],
input[type="number"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.ag-theme-alpine {
  height: 500px;
  width: 100%;
}




The below doesn't show any grid:
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import './CRInsertLogs.css'; 
const CRInsertLogs = () => {
  const [rowData, setRowData] = useState([]);
  const gridRef = useRef();
  const fetchCRInsertLogs = async () => {
    try {
      const response = await axios.get('http://localhost:3000/api/importLog');
      setRowData(response.data);
    } catch (error) {
      console.error('Error fetching data', error);
    }
  };
  useEffect(() => {
    fetchCRInsertLogs();
  }, []);
  const handleUpdate = async (updatedData) => {
    try {
      await axios.put('http://localhost:3000/api/importLog', updatedData);
      fetchCRInsertLogs();
    } catch (error) {
      console.error('Error updating data', error);
    }
  };
  const handleDelete = async (id) => {
    try {
      await axios.delete(`http://localhost:3000/api/importLog/${id}`);
      fetchCRInsertLogs();
    } catch (error) {
      console.error('Error deleting data', error);
    }
  };
  const onCellEditingStopped = async (event) => {
    const updatedData = event.data;
    await handleUpdate(updatedData);
  };
  const DeleteButton = (props) => {
    const onClick = () => {
      props.onClick(props.data.id);
    };
    return <button onClick={onClick}>Delete</button>;
  };
  const colDefs = [
    { field: 'Id', editable: false },
    { field: 'FundIssuerIdentifier', editable: false },
    { field: 'CreateEmailTS', editable: false },
    { field: 'EMailSubject', editable: false },
    { field: 'FileName', editable: false },
    { field: 'Directory', editable: false },
    { field: 'Status', editable: true },
    { field: 'ProcessResult', editable: true },
    { field: 'InseredBy', editable: false },
    { field: 'InsertedDate', editable: false },
    { field: 'NumberOfFiles', editable: false },
    { field: 'Description', editable: false },
    {
      headerName: 'Actions',
      cellRenderer: DeleteButton,
      cellRendererParams: {
        onClick: handleDelete,
      },
    },
  ];
  return (
    <div
    className="ag-theme-quartz" // applying the Data Grid theme
    style={{ height: 500 }} // the Data Grid will fill the size of the parent container
   >
     <AgGridReact
         rowData={rowData}
         columnDefs={colDefs}
     />
   </div>    
  );
};
export default CRInsertLogs;