fix reactjs

DevExpress · Jan 22, 2025 · 0c3f05c · 0c3f05c
1 parent c9f1b98
commit 0c3f05c
Showing 1 changed file with 40 additions and 35 deletions.
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/ReactJs/App.js b/apps/demos/Demos/DataGrid/KeyboardNavigation/ReactJs/App.js
@@ -13,42 +13,47 @@ import { employees, states } from './data.js';
 
 const allowedPageSizes = [5, 10];
 const App = () => (
-  <DataGrid
-    dataSource={employees}
-    keyExpr="ID"
-    focusedRowEnabled={true}
-    showBorders={true}
-  >
-    <Editing
-      allowUpdating={true}
-      allowDeleting={true}
-      selectTextOnEditStart={true}
-      useIcons={true}
-    />
-    <HeaderFilter visible={true} />
-    <FilterPanel visible={true} />
-    <FilterRow visible={true} />
-    <Pager
-      visible={true}
-      allowedPageSizes={allowedPageSizes}
-      showPageSizeSelector={true}
-      showNavigationButtons={true}
-    />
-    <Paging defaultPageSize={10} />
-    <Column dataField="FirstName" />
-    <Column dataField="LastName" />
-    <Column dataField="Position" />
-    <Column
-      dataField="StateID"
-      caption="State"
-      dataType="number"
+  <React.Fragment>
+    <p>
+      Click this text and press <b>Tab</b>
+    </p>
+    <DataGrid
+      dataSource={employees}
+      keyExpr="ID"
+      focusedRowEnabled={true}
+      showBorders={true}
     >
-      <Lookup
-        dataSource={states}
-        valueExpr="ID"
-        displayExpr="Name"
+      <Editing
+        allowUpdating={true}
+        allowDeleting={true}
+        selectTextOnEditStart={true}
+        useIcons={true}
       />
-    </Column>
-  </DataGrid>
+      <HeaderFilter visible={true} />
+      <FilterPanel visible={true} />
+      <FilterRow visible={true} />
+      <Pager
+        visible={true}
+        allowedPageSizes={allowedPageSizes}
+        showPageSizeSelector={true}
+        showNavigationButtons={true}
+      />
+      <Paging defaultPageSize={10} />
+      <Column dataField="FirstName" />
+      <Column dataField="LastName" />
+      <Column dataField="Position" />
+      <Column
+        dataField="StateID"
+        caption="State"
+        dataType="number"
+      >
+        <Lookup
+          dataSource={states}
+          valueExpr="ID"
+          displayExpr="Name"
+        />
+      </Column>
+    </DataGrid>
+  </React.Fragment>
 );
 export default App;