react data grid test

webapp/package.json

@@ -20,6 +20,7 @@
     "@mui/material": "5.14.11",
     "@mui/x-date-pickers": "6.18.3",
     "@reduxjs/toolkit": "1.9.6",
+    "@silevis/reactgrid": "^4.1.3",
     "axios": "1.5.1",
     "clsx": "2.0.0",
     "d3": "5.16.0",

webapp/src/components/App/index.tsx

@@ -55,6 +55,7 @@ import ThermalForm from "./Singlestudy/explore/Modelization/Areas/Thermal/Form";
 import RenewablesForm from "./Singlestudy/explore/Modelization/Areas/Renewables/Form";
 import SplitHydroMatrix from "./Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix";
 import GlideDataGrid from "../common/Glide";
+import ReactDataGrid from "../common/ReactGrid";
 
 function App() {
   return (
@@ -186,7 +187,7 @@ function App() {
                         </Route>
                         <Route path="debug" element={<Debug />} />
                         <Route path="glide" element={<GlideDataGrid />} />
-                        <Route path="react-grid" element={<Debug />} />
+                        <Route path="react-grid" element={<ReactDataGrid />} />
                         <Route path="*" element={<Modelization />}>
                           <Route index element={<Map />} />
                         </Route>

webapp/src/components/common/Glide/utils.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import { Person } from ".";
 
 export const generateRandomData = (

webapp/src/components/common/ReactGrid/index.tsx

@@ -0,0 +1,95 @@
+import "@silevis/reactgrid/styles.css";
+import { ReactGrid, Column, Row } from "@silevis/reactgrid";
+import { useEffect, useState } from "react";
+import { generateRandomData, usePerformanceMeasure } from "./utils";
+
+export interface Person {
+  name: string;
+  company: string;
+  email: string;
+  phone: string;
+}
+const getPeople = (): Person[] => [
+  {
+    name: "John Doe",
+    company: "TechCorp",
+    email: "[email protected]",
+    phone: "1234567890",
+  },
+  {
+    name: "Jane Smith",
+    company: "Innovatech",
+    email: "[email protected]",
+    phone: "1234567890",
+  },
+  {
+    name: "Alice Johnson",
+    company: "BuildIt",
+    email: "[email protected]",
+    phone: "1234567890",
+  },
+];
+
+const getColumns = (): Column[] => [
+  {
+    columnId: "name",
+    width: 200,
+  },
+  {
+    columnId: "company",
+    width: 200,
+  },
+  {
+    columnId: "email",
+    width: 200,
+  },
+  {
+    columnId: "phone",
+    width: 200,
+  },
+];
+
+const headerRow: Row = {
+  rowId: "header",
+  cells: [
+    { type: "header", text: "Name" },
+    { type: "header", text: "Company" },
+    { type: "header", text: "Email" },
+    { type: "header", text: "Phone" },
+  ],
+};
+
+const getRows = (people: Person[]): Row[] => [
+  headerRow,
+  ...people.map<Row>((person, idx) => ({
+    rowId: idx,
+    cells: [
+      { type: "text", text: person.name },
+      { type: "text", text: person.company },
+      { type: "text", text: person.email },
+      { type: "text", text: person.phone },
+    ],
+  })),
+];
+
+function ReactDataGrid() {
+  const [data, setData] = useState<Person[]>(getPeople());
+  const { startMeasurement, endMeasurement } =
+    usePerformanceMeasure("DataFetchAndRender");
+
+  useEffect(() => {
+    startMeasurement();
+
+    generateRandomData(1000000).then((fetchedData) => {
+      setData(fetchedData);
+      endMeasurement();
+    });
+  }, [startMeasurement, endMeasurement]);
+
+  const rows = getRows(data);
+  const columns = getColumns();
+
+  return <ReactGrid rows={rows} columns={columns} />;
+}
+
+export default ReactDataGrid;