formatted hgrid sample

Author: tishko0

samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx

@@ -3,7 +3,11 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 
 import { IgrGridCreatedEventArgs, IgrPaginator } from "igniteui-react-grids";
-import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "igniteui-react-grids";
+import {
+  IgrHierarchicalGrid,
+  IgrColumn,
+  IgrRowIsland,
+} from "igniteui-react-grids";
 
 import "igniteui-react-grids/grids/combined";
 import "igniteui-react-grids/grids/themes/light/bootstrap.css";
@@ -41,17 +45,13 @@ export default function App() {
         setData([]);
         // Stop loading even if error occurs. Prevents endless loading
         hierarchicalGrid.current.isLoading = false;
-
-      })
+      });
   }
 
-  function gridCreated(
-    event: IgrGridCreatedEventArgs,
-    parentKey: string
-  ) {
+  function gridCreated(event: IgrGridCreatedEventArgs, parentKey: string) {
     const context = event.detail;
     context.grid.isLoading = true;
-    
+
     const parentId: string = context.parentID;
     const childDataKey: string = context.owner.childDataKey;
 
@@ -66,8 +66,7 @@ export default function App() {
         context.grid.data = [];
         context.grid.isLoading = false;
         context.grid.markForCheck();
-      })
-    
+      });
   }
 
   function onPageNumberChange(args: IgrNumberEventArgs) {
@@ -81,20 +80,19 @@ export default function App() {
   return (
     <div className="container sample ig-typography">
       <div className="container fill">
-
         <IgrHierarchicalGrid
           ref={hierarchicalGrid}
           data={data}
           pagingMode={"remote"}
           primaryKey="customerId"
           height="600px"
         >
-          <IgrPaginator 
+          <IgrPaginator
             perPage={perPage}
             ref={paginator}
             onPageChange={onPageNumberChange}
-            onPerPageChange={onPageSizeChange}>
-          </IgrPaginator>
+            onPerPageChange={onPageSizeChange}
+          ></IgrPaginator>
           <IgrColumn field="customerId" hidden={true}></IgrColumn>
           <IgrColumn field="companyName" header="Company Name"></IgrColumn>
           <IgrColumn field="contactName" header="Contact Name"></IgrColumn>
@@ -105,22 +103,32 @@ export default function App() {
           <IgrRowIsland
             childDataKey="Orders"
             primaryKey="orderId"
-            onGridCreated={(
-              e: IgrGridCreatedEventArgs
-            ) => gridCreated(e, "Customers")}
+            onGridCreated={(e: IgrGridCreatedEventArgs) =>
+              gridCreated(e, "Customers")
+            }
           >
             <IgrColumn field="orderId" hidden={true}></IgrColumn>
-            <IgrColumn field="shipAddress.country" header="Ship Country"></IgrColumn>
+            <IgrColumn
+              field="shipAddress.country"
+              header="Ship Country"
+            ></IgrColumn>
             <IgrColumn field="shipAddress.city" header="Ship City"></IgrColumn>
-            <IgrColumn field="shipAddress.street" header="Ship Address"></IgrColumn>
-            <IgrColumn field="orderDate" header="Order Date" dataType="date"></IgrColumn>
+            <IgrColumn
+              field="shipAddress.street"
+              header="Ship Address"
+            ></IgrColumn>
+            <IgrColumn
+              field="orderDate"
+              header="Order Date"
+              dataType="date"
+            ></IgrColumn>
 
             <IgrRowIsland
               childDataKey="Details"
               primaryKey="productId"
-              onGridCreated={(
-                e: IgrGridCreatedEventArgs
-              ) => gridCreated(e, "Orders")}
+              onGridCreated={(e: IgrGridCreatedEventArgs) =>
+                gridCreated(e, "Orders")
+              }
             >
               <IgrColumn field="productId" hidden={true}></IgrColumn>
               <IgrColumn field="quantity" header="Quantity"></IgrColumn>
@@ -129,7 +137,6 @@ export default function App() {
             </IgrRowIsland>
           </IgrRowIsland>
         </IgrHierarchicalGrid>
-
       </div>
     </div>
   );