🎹 Pagination: Create Overview demo page. (jQuery)

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html

@@ -0,0 +1,7 @@
+<dx-data-grid
+  id="gridContainer"
+  [dataSource]="customers"
+  [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"
+  [showBorders]="true"
+>
+</dx-data-grid>

apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts

@@ -0,0 +1,40 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DxDataGridModule } from 'devextreme-angular';
+import { Customer, Service } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  providers: [Service],
+})
+export class AppComponent {
+  customers: Customer[];
+
+  constructor(service: Service) {
+    this.customers = service.getCustomers();
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxDataGridModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);

apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts

@@ -0,0 +1,150 @@
+import { Injectable } from '@angular/core';
+
+export class Customer {
+  ID: number;
+
+  CompanyName: string;
+
+  Address: string;
+
+  City: string;
+
+  State: string;
+
+  Zipcode: number;
+
+  Phone: string;
+
+  Fax: string;
+
+  Website: string;
+}
+
+let customers: Customer[] = [{
+  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',
+}];
+
+@Injectable()
+export class Service {
+  getCustomers() {
+    return customers;
+  }
+}

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

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" 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/zone.js/dist/zone.js"></script>
+    <script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+
+    <script src="config.js"></script>
+    <script>
+      System.import("app").catch(console.error.bind(console));
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <demo-app>Loading...</demo-app>
+    </div>
+  </body>
+</html>

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

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

apps/demos/Demos/Pagination/Overview/React/Text.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Text = () => {
+  return "test text";
+};
+
+export default Text;

apps/demos/Demos/Pagination/Overview/React/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/React/index.html

@@ -0,0 +1,23 @@
+<!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>