Add React implementation in v24.2.5

Author: charlescordialDevExpress

React/package-lock.json

@@ -10,8 +10,8 @@
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "devextreme": "24.2.3",
-    "devextreme-react": "24.2.3",
+    "devextreme": "24.2.5",
+    "devextreme-react": "24.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

React/package.json

@@ -1,16 +1,64 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import './App.css';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import Button from 'devextreme-react/button';
+import DataGrid, {
+  Column, Paging, Pager, Editing,
+} from 'devextreme-react/data-grid';
+import { employees } from './data';
+
+const allowedPageSizes = [5, 10, 20];
 
 function App(): JSX.Element {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
+  const onContextMenuPreparing = useCallback((e: any): void => {
+    if (e.row.rowType === 'data') {
+      e.items = [
+        {
+          text: 'edit',
+          onItemClick(): void {
+            e.component.editRow(e.row.rowIndex);
+          },
+        },
+        {
+          text: 'insert',
+          onItemClick(): void {
+            e.component.addRow();
+          },
+        },
+        {
+          text: 'delete',
+          onItemClick(): void {
+            e.component.deleteRow(e.row.rowIndex);
+          },
+        },
+      ];
+    }
+  }, []);
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
+    <div>
+      <DataGrid
+        id="gridContainer"
+        dataSource={employees}
+        keyExpr="ID"
+        onContextMenuPreparing={onContextMenuPreparing}
+      >
+        <Column dataField="FirstName" />
+        <Column dataField="LastName" />
+        <Column dataField="Title" />
+        <Column dataField="City" />
+        <Column dataField="Country" />
+
+        <Paging pageSize={10} />
+        <Pager
+          visible={true}
+          allowedPageSizes={allowedPageSizes}
+          showPageSizeSelector={true} />
+
+        <Editing
+          mode="row"
+          allowUpdating={true}
+          allowDeleting={true}
+          allowAdding={true} />
+      </DataGrid>
     </div>
   );
 }

React/src/App.tsx

@@ -0,0 +1,45 @@
+export interface Employee {
+  ID: number;
+  FirstName: string;
+  LastName: string;
+  City: string;
+}
+
+export const employees = [
+  {
+    ID: 1,
+    FirstName: 'John',
+    LastName: 'Heart',
+    City: 'Los Angeles',
+  },
+  {
+    ID: 2,
+    FirstName: 'Olivia',
+    LastName: 'Peyton',
+    City: 'Los Angeles',
+  },
+  {
+    ID: 3,
+    FirstName: 'Robert',
+    LastName: 'Reagan',
+    City: 'Bentonville',
+  },
+  {
+    ID: 4,
+    FirstName: 'Greta',
+    LastName: 'Sims',
+    City: 'Atlanta',
+  },
+  {
+    ID: 5,
+    FirstName: 'Brett',
+    LastName: 'Wade',
+    City: 'Reno',
+  },
+  {
+    ID: 6,
+    FirstName: 'Sandra',
+    LastName: 'Johnson',
+    City: 'Miami',
+  },
+];