Merge pull request #3 from DevExpress-Examples/react

React

Author: LeSe0-devexpress

React/package-lock.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 5050",
     "prebuild": "devextreme-license --out src/devextreme-license.ts --force",
     "build": "tsc -b && vite build",
     "test": "vitest",
@@ -15,8 +15,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "devextreme": "26.1.2-beta",
-    "devextreme-react": "26.1.2-beta",
+    "devextreme": "26.1.3",
+    "devextreme-react": "26.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

React/package.json

@@ -1,4 +1,14 @@
-.main {
-  margin: 50px;
-  width: 90vw;
+.demo-container {
+    display: flex;
+    justify-content: center;
+    margin: 20px;
+}
+
+#grid-container {
+    max-width: 1200px;
+    width: 100%;
+}
+
+#grid-container .ai-cell {
+  background-color: var(--dx-datagrid-row-alternation-bg);
 }

React/src/App.css

@@ -1,16 +1,122 @@
-import { useCallback, useState } from 'react';
+import { useMemo, useRef } from 'react';
+import DataGrid, {
+  AI,
+  AIAssistant,
+  Column,
+  FilterRow,
+  GroupPanel,
+  HeaderFilter,
+  Pager,
+  Paging,
+  SearchPanel,
+} from 'devextreme-react/data-grid';
+import type { ButtonGroupTypes } from 'devextreme-react/button-group';
+import type { ChatTypes } from 'devextreme-react/chat';
+import type dxChat from 'devextreme/ui/chat';
+import 'devextreme/dist/css/dx.fluent.blue.light.css';
 import './App.css';
-import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import Button from 'devextreme-react/button';
+
+import AIService from './service';
+import { AI_ASSISTANT_URL, AI_COLUMN_URL, sales } from './data';
+
+const HELP_PROMPT = `💡 The DataGrid AI Assistant allows you to control the component using natural language. You can execute commands such as the following:
+  • Sort records
+  • Apply a filter
+  • Search for a specific value
+  • Group records by a field
+  • Focus and select rows
+  • Modify paging settings
+  • Pin, resize, and reorder columns
+  • Configure data summaries
+  • Pick a suggestion or enter a custom request to get started.`;
+
+const allowedPageSizes = [10, 25, 50, 100];
+
+const service = new AIService(AI_COLUMN_URL, AI_ASSISTANT_URL);
 
 function App(): JSX.Element {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
+  const chatRef = useRef<dxChat | null>(null);
+
+  const chatOptions = useMemo(() => ({
+    onInitialized: (e: ChatTypes.InitializedEvent) => {
+      chatRef.current = e.component || null;
+    },
+    user: { id: 'user' },
+    suggestions: {
+      items: [
+        { text: '💡 Help', prompt: HELP_PROMPT },
+        { text: '🔍 Filter Sector by Health', prompt: 'Filter Sector by Health' },
+        { text: '↕️ Sort by Region', prompt: 'Sort by Region' },
+        { text: '🧩 Group by Product', prompt: 'Group by Product', width: 170 },
+      ],
+      onItemClick: (e: ButtonGroupTypes.ItemClickEvent) => {
+        const { prompt, text } = e.itemData;
+        const userId = text === '💡 Help' ? 'help' : 'user';
+
+        const message = {
+          id: Date.now(),
+          timestamp: new Date(),
+          author: { id: userId },
+          text: prompt,
+        };
+
+        chatRef.current?.getDataSource().store().push([{
+          type: 'insert',
+          data: message,
+        }]);
+      },
+    },
+  }), []);
+
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
+    <div className="demo-container">
+      <DataGrid
+        id="grid-container"
+        dataSource={sales}
+        aiIntegration={service.columnAiIntegration}
+        showBorders
+        keyExpr="Id"
+        filterSyncEnabled
+      >
+        <SearchPanel visible width={240} placeholder="Search..." />
+        <GroupPanel visible />
+        <HeaderFilter visible />
+        <FilterRow visible />
+        <Paging defaultPageSize={10} />
+        <Pager
+          visible
+          allowedPageSizes={allowedPageSizes}
+          showPageSizeSelector
+        />
+
+        <AIAssistant
+          enabled
+          aiIntegration={service.assistantAiIntegration}
+          chat={chatOptions}
+        />
+
+        <Column dataField="Product" />
+        <Column dataField="Amount" caption="Sale Amount" dataType="number" format="currency" />
+        <Column dataField="Region" dataType="string" />
+        <Column dataField="Sector" dataType="string" />
+        <Column dataField="SaleDate" dataType="date" />
+        <Column dataField="Customer" dataType="string" />
+        <Column
+          name="AI column"
+          caption="AI Column"
+          type="ai"
+          width={200}
+          fixed
+          fixedPosition="right"
+          cssClass="ai-cell"
+        >
+          <AI
+            prompt="Identify the country where product is manufactured. When looking up a country, consider Sector and Customers."
+            mode="auto"
+            noDataText="No data"
+          />
+        </Column>
+      </DataGrid>
     </div>
   );
 }