added grid and hgrid remote paging samples

samples/grids/grid/remote-paging-grid/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "1.14.3",
+    "igniteui-react": "18.6.0",
+    "igniteui-react-core": "18.6.0",
+    "igniteui-react-datasources": "18.6.0",
+    "igniteui-react-grids": "18.6.0",
+    "igniteui-react-inputs": "18.6.0",
+    "igniteui-react-layouts": "18.6.0",
+    "igniteui-webcomponents": "4.7.0",
+    "lit-html": "^2.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts

@@ -0,0 +1,34 @@
+const URL = `https://data-northwind.indigo.design/`;
+
+export class RemoteService {
+
+public getData(dataState: any, index?: number, perPage?: number): any {
+    return fetch(this.buildUrl(dataState, index, perPage))
+        .then((result) => result.json());
+}
+
+private buildUrl(dataState: any, index?: number, perPage?: number) {
+    let qS = "";
+    if (dataState) {
+            qS += `${dataState.key}`;
+    }
+
+    // Add index and perPage to the query string if they are defined
+    if (index !== undefined) {
+        qS += `?index=${index}`;
+        if (perPage !== undefined) {
+            qS += `&perPage=${perPage}`;
+        }
+    } else if (perPage !== undefined) {
+        qS += `?perPage=${perPage}`;
+    }
+
+    return `${URL}${qS}`;
+}
+
+public getDataLength(dataState: any): Promise<number> {
+    return fetch(this.buildUrl(dataState))
+        .then((result) => result.json())
+        .then((data) => data.length);
+}
+}

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

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import ReactDOM from "react-dom/client";
+import "./index.css";
+
+import { IgrGrid, IgrPaginator, IgrGridModule } from "igniteui-react-grids";
+import { IgrColumn } from "igniteui-react-grids";
+
+import "igniteui-react-grids/grids/combined";
+import "igniteui-react-grids/grids/themes/light/bootstrap.css";
+import { RemoteService } from "./RemotePagingService";
+
+IgrGridModule.register();
+
+export default function App() {
+  let data = [];
+const grid = useRef<IgrGrid>(null);
+const paginator = useRef<IgrPaginator>(null);
+const remoteServiceInstance = new RemoteService();
+let [page] = useState(0);
+let [perPage, setPerPage] = useState(15);
+
+useEffect(() => {
+  if (paginator.current) {
+    setPerPage(15);
+    grid.current.isLoading = true;
+  }
+
+  grid.current.isLoading = true;
+  loadData('Customers');
+}, [page, 15]);
+
+function loadData(dataKey: string) {
+    const dataState = { key: dataKey };
+
+    // Set loading state
+    grid.current.isLoading = true;
+
+    // Fetch data length
+    remoteServiceInstance.getDataLength(dataState).then((length: number) => {
+        paginator.current.totalRecords = length;
+    });
+
+    // Fetch data
+    remoteServiceInstance.getData(dataState).then((data: any[]) => {
+      grid.current.isLoading = false;
+      grid.current.data = data;
+      grid.current.markForCheck();
+    });
+  }
+
+  function paginate(pageArgs: number) {
+    page = pageArgs;
+    const skip = page * perPage;
+    const top = perPage;
+
+    remoteServiceInstance.getData({ key: 'Customers' }, skip, top).then((incData:any)=> {
+      data = incData; 
+      grid.current.isLoading = false;
+      grid.current.markForCheck();// Update the UI after receiving data
+    });
+}
+
+  return (
+    <div className="container sample ig-typography">
+      <div className="container fill">
+        <IgrGrid
+          ref={grid}
+          primaryKey="customerId"
+          height="600px"
+        >
+        <IgrPaginator 
+          perPage="15"
+          ref={paginator}
+          pageChange={(evt: { page: number }) => paginate(evt.page)}
+          perPageChange={() => paginate(0)}></IgrPaginator>
+          <IgrColumn field="customerId" hidden={true}></IgrColumn>
+          <IgrColumn field="companyName" header="Company Name"></IgrColumn>
+          <IgrColumn field="contactName" header="Contact Name"></IgrColumn>
+          <IgrColumn field="contactTitle" header="Contact Title"></IgrColumn>
+          <IgrColumn field="address.country" header="Country"></IgrColumn>
+          <IgrColumn field="address.phone" header="Phone"></IgrColumn>
+        </IgrGrid>
+
+      </div>
+    </div>
+  );
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);

samples/grids/hierarchical-grid/remote-paging-hgrid/.eslintrc.js

@@ -0,0 +1,76 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };