🎹 Pagination: Create Overview demo page. (jQuery version) (#28462)

Co-authored-by: Sergey Arzamasov <[email protected]>

apps/demos/Demos/Pagination/Overview/React/App.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Pagination from "devextreme-react/pagination";
+import { customers } from "./data.ts";
+
+const columns = ["CompanyName", "City", "State", "Phone", "Fax"];
+
+const App = () => {
+  return (
+    <>
+      <Pagination />
+    </>
+  );
+};
+
+export default App;

apps/demos/Demos/Pagination/Overview/React/index.html

@@ -11,7 +11,7 @@
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>
     <script type="text/javascript">
-      System.import("./index.js");
+      System.import("./index.tsx");
     </script>
   </head>
 

apps/demos/Demos/Pagination/Overview/React/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App.tsx';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app'),
+);

apps/demos/Demos/Pagination/Overview/React/App.js → apps/demos/Demos/Pagination/Overview/ReactJs/App.js

@@ -1,5 +1,4 @@
 import React from "react";
-import Text from "./Text.js";
 import Pagination from "devextreme-react/pagination";
 import { customers } from "./data.js";
 
@@ -9,7 +8,6 @@ const App = () => {
   return (
     <>
       <Pagination />
-      <Text />
     </>
   );
 };

apps/demos/Demos/Pagination/Overview/ReactJs/data.js

@@ -0,0 +1,121 @@
+export const customers = [{
+  ID: 1,
+  CompanyName: 'Super Mart of the West',
+  Address: '702 SW 8th Street',
+  City: 'Bentonville',
+  State: 'Arkansas',
+  Zipcode: 72716,
+  Phone: '(800) 555-2797',
+  Fax: '(800) 555-2171',
+  Website: 'http://www.nowebsitesupermart.dx',
+}, {
+  ID: 2,
+  CompanyName: 'Electronics Depot',
+  Address: '2455 Paces Ferry Road NW',
+  City: 'Atlanta',
+  State: 'Georgia',
+  Zipcode: 30339,
+  Phone: '(800) 595-3232',
+  Fax: '(800) 595-3231',
+  Website: 'http://www.nowebsitedepot.dx',
+}, {
+  ID: 3,
+  CompanyName: 'K&S Music',
+  Address: '1000 Nicllet Mall',
+  City: 'Minneapolis',
+  State: 'Minnesota',
+  Zipcode: 55403,
+  Phone: '(612) 304-6073',
+  Fax: '(612) 304-6074',
+  Website: 'http://www.nowebsitemusic.dx',
+}, {
+  ID: 4,
+  CompanyName: "Tom's Club",
+  Address: '999 Lake Drive',
+  City: 'Issaquah',
+  State: 'Washington',
+  Zipcode: 98027,
+  Phone: '(800) 955-2292',
+  Fax: '(800) 955-2293',
+  Website: 'http://www.nowebsitetomsclub.dx',
+}, {
+  ID: 5,
+  CompanyName: 'E-Mart',
+  Address: '3333 Beverly Rd',
+  City: 'Hoffman Estates',
+  State: 'Illinois',
+  Zipcode: 60179,
+  Phone: '(847) 286-2500',
+  Fax: '(847) 286-2501',
+  Website: 'http://www.nowebsiteemart.dx',
+}, {
+  ID: 6,
+  CompanyName: 'Walters',
+  Address: '200 Wilmot Rd',
+  City: 'Deerfield',
+  State: 'Illinois',
+  Zipcode: 60015,
+  Phone: '(847) 940-2500',
+  Fax: '(847) 940-2501',
+  Website: 'http://www.nowebsitewalters.dx',
+}, {
+  ID: 7,
+  CompanyName: 'StereoShack',
+  Address: '400 Commerce S',
+  City: 'Fort Worth',
+  State: 'Texas',
+  Zipcode: 76102,
+  Phone: '(817) 820-0741',
+  Fax: '(817) 820-0742',
+  Website: 'http://www.nowebsiteshack.dx',
+}, {
+  ID: 8,
+  CompanyName: 'Circuit Town',
+  Address: '2200 Kensington Court',
+  City: 'Oak Brook',
+  State: 'Illinois',
+  Zipcode: 60523,
+  Phone: '(800) 955-2929',
+  Fax: '(800) 955-9392',
+  Website: 'http://www.nowebsitecircuittown.dx',
+}, {
+  ID: 9,
+  CompanyName: 'Premier Buy',
+  Address: '7601 Penn Avenue South',
+  City: 'Richfield',
+  State: 'Minnesota',
+  Zipcode: 55423,
+  Phone: '(612) 291-1000',
+  Fax: '(612) 291-2001',
+  Website: 'http://www.nowebsitepremierbuy.dx',
+}, {
+  ID: 10,
+  CompanyName: 'ElectrixMax',
+  Address: '263 Shuman Blvd',
+  City: 'Naperville',
+  State: 'Illinois',
+  Zipcode: 60563,
+  Phone: '(630) 438-7800',
+  Fax: '(630) 438-7801',
+  Website: 'http://www.nowebsiteelectrixmax.dx',
+}, {
+  ID: 11,
+  CompanyName: 'Video Emporium',
+  Address: '1201 Elm Street',
+  City: 'Dallas',
+  State: 'Texas',
+  Zipcode: 75270,
+  Phone: '(214) 854-3000',
+  Fax: '(214) 854-3001',
+  Website: 'http://www.nowebsitevideoemporium.dx',
+}, {
+  ID: 12,
+  CompanyName: 'Screen Shop',
+  Address: '1000 Lowes Blvd',
+  City: 'Mooresville',
+  State: 'North Carolina',
+  Zipcode: 28117,
+  Phone: '(800) 445-6937',
+  Fax: '(800) 445-6938',
+  Website: 'http://www.nowebsitescreenshop.dx',
+}];

apps/demos/Demos/Pagination/Overview/ReactJs/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="IE=edge"
+    />
+    <meta
+      http-equiv="Content-Type"
+      content="text/html; charset=utf-8"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="../../../../node_modules/devextreme-dist/css/dx.light.css"
+    />
+
+    <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+    <script
+      type="text/javascript"
+      src="config.js"
+    ></script>
+    <script type="text/javascript">
+      System.import("./index.js");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>