CardView - demos - Simple Array

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.html

@@ -0,0 +1,6 @@
+<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
+  <dxi-card-view-column
+    *ngFor="let column of columns"
+    [dataField]="column"
+  ></dxi-card-view-column>
+</dx-card-view>

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts

@@ -0,0 +1,42 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DxCardViewModule } 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[];
+
+  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+
+  constructor(service: Service) {
+    this.customers = service.getCustomers();
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxCardViewModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.service.ts

@@ -0,0 +1,129 @@
+import { Injectable } from '@angular/core';
+
+export interface Customer {
+  ID: number;
+  CompanyName: string;
+  Address: string;
+  City: string;
+  State: string;
+  Zipcode: number;
+  Phone: string;
+  Fax: string;
+}
+
+const 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',
+}, {
+  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',
+}, {
+  ID: 3,
+  CompanyName: 'K&S Music',
+  Address: '1000 Nicllet Mall',
+  City: 'Minneapolis',
+  State: 'Minnesota',
+  Zipcode: 55403,
+  Phone: '(612) 304-6073',
+  Fax: '(612) 304-6074',
+}, {
+  ID: 4,
+  CompanyName: "Tom's Club",
+  Address: '999 Lake Drive',
+  City: 'Issaquah',
+  State: 'Washington',
+  Zipcode: 98027,
+  Phone: '(800) 955-2292',
+  Fax: '(800) 955-2293',
+}, {
+  ID: 5,
+  CompanyName: 'E-Mart',
+  Address: '3333 Beverly Rd',
+  City: 'Hoffman Estates',
+  State: 'Illinois',
+  Zipcode: 60179,
+  Phone: '(847) 286-2500',
+  Fax: '(847) 286-2501',
+}, {
+  ID: 6,
+  CompanyName: 'Walters',
+  Address: '200 Wilmot Rd',
+  City: 'Deerfield',
+  State: 'Illinois',
+  Zipcode: 60015,
+  Phone: '(847) 940-2500',
+  Fax: '(847) 940-2501',
+}, {
+  ID: 7,
+  CompanyName: 'StereoShack',
+  Address: '400 Commerce S',
+  City: 'Fort Worth',
+  State: 'Texas',
+  Zipcode: 76102,
+  Phone: '(817) 820-0741',
+  Fax: '(817) 820-0742',
+}, {
+  ID: 8,
+  CompanyName: 'Circuit Town',
+  Address: '2200 Kensington Court',
+  City: 'Oak Brook',
+  State: 'Illinois',
+  Zipcode: 60523,
+  Phone: '(800) 955-2929',
+  Fax: '(800) 955-9392',
+}, {
+  ID: 9,
+  CompanyName: 'Premier Buy',
+  Address: '7601 Penn Avenue South',
+  City: 'Richfield',
+  State: 'Minnesota',
+  Zipcode: 55423,
+  Phone: '(612) 291-1000',
+  Fax: '(612) 291-2001',
+}, {
+  ID: 10,
+  CompanyName: 'ElectrixMax',
+  Address: '263 Shuman Blvd',
+  City: 'Naperville',
+  State: 'Illinois',
+  Zipcode: 60563,
+  Phone: '(630) 438-7800',
+  Fax: '(630) 438-7801',
+}, {
+  ID: 11,
+  CompanyName: 'Video Emporium',
+  Address: '1201 Elm Street',
+  City: 'Dallas',
+  State: 'Texas',
+  Zipcode: 75270,
+  Phone: '(214) 854-3000',
+  Fax: '(214) 854-3001',
+}, {
+  ID: 12,
+  CompanyName: 'Screen Shop',
+  Address: '1000 Lowes Blvd',
+  City: 'Mooresville',
+  State: 'North Carolina',
+  Zipcode: 28117,
+  Phone: '(800) 445-6937',
+  Fax: '(800) 445-6938',
+}];
+
+@Injectable()
+export class Service {
+  getCustomers() {
+    return customers;
+  }
+}

apps/demos/Demos/CardView/CardTemplate/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/bundles/zone.umd.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/CardView/CardTemplate/React/App.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import CardView, { Column } from 'devextreme-react/card-view';
+import { customers } from './data.ts';
+
+const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+
+const App = () => (
+  <CardView
+    dataSource={customers}
+    keyExpr="ID"
+  >
+    { columns.map((column, index) => <Column dataField={column} key={index} />) }
+  </CardView>
+);
+
+export default App;

apps/demos/Demos/CardView/CardTemplate/React/data.ts

@@ -0,0 +1,120 @@
+export interface Customer {
+  ID: number;
+  CompanyName: string;
+  Address: string;
+  City: string;
+  State: string;
+  Zipcode: number;
+  Phone: string;
+  Fax: string;
+}
+
+export const 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',
+}, {
+  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',
+}, {
+  ID: 3,
+  CompanyName: 'K&S Music',
+  Address: '1000 Nicllet Mall',
+  City: 'Minneapolis',
+  State: 'Minnesota',
+  Zipcode: 55403,
+  Phone: '(612) 304-6073',
+  Fax: '(612) 304-6074',
+}, {
+  ID: 4,
+  CompanyName: "Tom's Club",
+  Address: '999 Lake Drive',
+  City: 'Issaquah',
+  State: 'Washington',
+  Zipcode: 98027,
+  Phone: '(800) 955-2292',
+  Fax: '(800) 955-2293',
+}, {
+  ID: 5,
+  CompanyName: 'E-Mart',
+  Address: '3333 Beverly Rd',
+  City: 'Hoffman Estates',
+  State: 'Illinois',
+  Zipcode: 60179,
+  Phone: '(847) 286-2500',
+  Fax: '(847) 286-2501',
+}, {
+  ID: 6,
+  CompanyName: 'Walters',
+  Address: '200 Wilmot Rd',
+  City: 'Deerfield',
+  State: 'Illinois',
+  Zipcode: 60015,
+  Phone: '(847) 940-2500',
+  Fax: '(847) 940-2501',
+}, {
+  ID: 7,
+  CompanyName: 'StereoShack',
+  Address: '400 Commerce S',
+  City: 'Fort Worth',
+  State: 'Texas',
+  Zipcode: 76102,
+  Phone: '(817) 820-0741',
+  Fax: '(817) 820-0742',
+}, {
+  ID: 8,
+  CompanyName: 'Circuit Town',
+  Address: '2200 Kensington Court',
+  City: 'Oak Brook',
+  State: 'Illinois',
+  Zipcode: 60523,
+  Phone: '(800) 955-2929',
+  Fax: '(800) 955-9392',
+}, {
+  ID: 9,
+  CompanyName: 'Premier Buy',
+  Address: '7601 Penn Avenue South',
+  City: 'Richfield',
+  State: 'Minnesota',
+  Zipcode: 55423,
+  Phone: '(612) 291-1000',
+  Fax: '(612) 291-2001',
+}, {
+  ID: 10,
+  CompanyName: 'ElectrixMax',
+  Address: '263 Shuman Blvd',
+  City: 'Naperville',
+  State: 'Illinois',
+  Zipcode: 60563,
+  Phone: '(630) 438-7800',
+  Fax: '(630) 438-7801',
+}, {
+  ID: 11,
+  CompanyName: 'Video Emporium',
+  Address: '1201 Elm Street',
+  City: 'Dallas',
+  State: 'Texas',
+  Zipcode: 75270,
+  Phone: '(214) 854-3000',
+  Fax: '(214) 854-3001',
+}, {
+  ID: 12,
+  CompanyName: 'Screen Shop',
+  Address: '1000 Lowes Blvd',
+  City: 'Mooresville',
+  State: 'North Carolina',
+  Zipcode: 28117,
+  Phone: '(800) 445-6937',
+  Fax: '(800) 445-6938',
+}];

apps/demos/Demos/CardView/CardTemplate/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.tsx");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"></div>
+    </div>
+  </body>
+</html>

apps/demos/Demos/CardView/CardTemplate/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/CardView/CardTemplate/ReactJs/App.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import CardView, { Column } from 'devextreme-react/card-view';
+import { customers } from './data.js';
+
+const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+const App = () => (
+  <CardView
+    dataSource={customers}
+    keyExpr="ID"
+  >
+    {columns.map((column, index) => (
+      <Column
+        dataField={column}
+        key={index}
+      />
+    ))}
+  </CardView>
+);
+export default App;