igniteui-cli 12.0.6 → 12.1.0-beta.0

package/lib/commands/new.js

@@ -107,7 +107,10 @@ command = {
                 }
             }
             const theme = projectLib.themes[themeIndex];
-            const projectTemplate = argv.template || projectLib.projectIds[0];
+            const indexOfEmptyOrFirst = projectLib.projectIds.indexOf("empty") !== -1 ?
+                projectLib.projectIds.indexOf("empty") :
+                0;
+            const projectTemplate = argv.template || projectLib.projectIds[indexOfEmptyOrFirst];
             cli_core_1.Util.log(`Project Name: ${argv.name}, framework ${argv.framework}, type ${projectLib.projectType}, theme ${theme}`);
             const projTemplate = projectLib.getProject(projectTemplate);
             if (projTemplate == null) {

package/lib/templates/IgniteUIForReactTemplate.js

@@ -15,7 +15,6 @@ class IgniteUIForReactTemplate {
         this.listInCustomTemplates = false;
         this.dependencies = [];
         this.framework = "react";
-        this.projectType = "igr-es6";
         this.hasExtraConfiguration = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "12.0.6",
+  "version": "12.1.0-beta.0",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~16.0.1206",
-    "@igniteui/cli-core": "~12.0.6",
+    "@igniteui/angular-templates": "~16.0.1210-beta.0",
+    "@igniteui/cli-core": "~12.1.0-beta.0",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

package/templates/react/igr-es6/index.js

@@ -4,7 +4,7 @@ const cli_core_1 = require("@igniteui/cli-core");
 class IgrReactProjectLibrary extends cli_core_1.BaseProjectLibrary {
     constructor() {
         super(__dirname);
-        this.name = "Ignite UI for React";
+        this.name = "Ignite UI for React (deprecated)";
         this.projectType = "igr-es6";
         this.themes = ["default"];
         const groups = require("./groups.json");

package/templates/react/igr-ts/bullet-graph/default/files/src/views/__path__/index.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './index';
+
+test('renders $(ClassName) component', () => {
+    const wrapper = render(<$(ClassName) />);
+    expect(wrapper).toBeTruthy();
+});

package/templates/react/igr-ts/bullet-graph/default/files/src/views/__path__/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { IgrBulletGraphModule } from 'igniteui-react-gauges';
+import { IgrBulletGraph } from 'igniteui-react-gauges';
+import style from './style.module.css';
+
+IgrBulletGraphModule.register();
+
+
+export default function $(ClassName)() {
+    const title = 'Bullet Graph';
+
+    return (
+		<div>
+			<h1 className={style.title}>{title}</h1>
+			<div>
+				Read more on the&nbsp;
+				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/bulletgraph.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<div className={style.graph}>
+					<IgrBulletGraph
+						height="80px" width="400px"
+						minimumValue={0} value={70} interval={10}
+						maximumValue={100} targetValue={90}
+						isScaleInverted={false}
+						scaleBackgroundBrush="DodgerBlue"
+						scaleBackgroundOutline="DarkViolet"
+						scaleBackgroundThickness={2}
+						scaleStartExtent={0.05}
+						scaleEndExtent={0.95}>
+					</IgrBulletGraph>
+				</div>
+				<div className={style.graph}>
+					<IgrBulletGraph
+						value={50}
+						valueBrush="DodgerBlue"
+						valueStrokeThickness={1}
+						valueInnerExtent={0.5}
+						valueOuterExtent={0.65}
+						targetValue={80}
+						targetValueBreadth={10}
+						targetValueBrush="LimeGreen"
+						targetValueOutline="LimeGreen"
+						targetValueStrokeThickness={1}
+						targetValueInnerExtent={0.3}
+						targetValueOuterExtent={0.85}
+						height="80px" width="400px"
+						minimumValue={0}
+						maximumValue={100}>
+					</IgrBulletGraph>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/bullet-graph/default/files/src/views/__path__/style.module.css

@@ -0,0 +1,12 @@
+:local(.container) {
+    padding-top: 24px;
+    display: flex;
+    flex-flow: row;
+    justify-content: space-around;
+}
+:local(.title) {
+    color: rgb(0, 153, 255);
+}
+:local(.graph) {
+    width: 50%;
+}

package/templates/react/igr-ts/bullet-graph/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/bullet-graph/default/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Bullet Graph"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "bullet-graph";
+        this.projectType = "igr-ts";
+        this.name = "Bullet Graph";
+        this.description = `allows for a linear and concise view of measures compared against a scale.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-gauges@18.2.2-beta.0"];
+    }
+}
+module.exports = new IgrTsBulletGraphTemplate();

package/templates/react/igr-ts/bullet-graph/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/bullet-graph/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsBulletGraphComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Bullet Graph";
+        this.group = "Gauges";
+        this.description = `allows for a linear and concise view of measures compared against a scale.`;
+    }
+}
+module.exports = new IgrTsBulletGraphComponent();

package/templates/react/igr-ts/category-chart/default/files/src/views/__path__/index.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './index';
+
+test('renders $(ClassName) component', () => {
+    const wrapper = render(<$(ClassName) />);
+    expect(wrapper).toBeTruthy();
+});

package/templates/react/igr-ts/category-chart/default/files/src/views/__path__/index.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { IgrCategoryChartModule } from 'igniteui-react-charts';
+import { IgrCategoryChart } from 'igniteui-react-charts';
+import style from './style.module.css';
+
+IgrCategoryChartModule.register();
+
+const data = [
+    { 'CountryName': 'China', 'Pop1995': 1216, 'Pop2005': 1297, 'Pop2015': 1361, 'Pop2025': 1394 },
+    { 'CountryName': 'India', 'Pop1995': 920, 'Pop2005': 1090, 'Pop2015': 1251, 'Pop2025': 1396 },
+    { 'CountryName': 'United States', 'Pop1995': 266, 'Pop2005': 295, 'Pop2015': 322, 'Pop2025': 351 },
+    { 'CountryName': 'Indonesia', 'Pop1995': 197, 'Pop2005': 229, 'Pop2015': 256, 'Pop2025': 277 },
+    { 'CountryName': 'Brazil', 'Pop1995': 161, 'Pop2005': 186, 'Pop2015': 204, 'Pop2025': 218 }
+];
+
+export default function $(ClassName)() {
+    const title = 'Category Chart';
+	const [chartData, setChartData] = useState([]);
+
+	useEffect(() => {
+		setChartData(data);
+	}, []);
+
+	return (
+		<div>
+			<h1 className={style.title}>{title}</h1>
+			<div>
+				Read more on the&nbsp;
+				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/categorychart.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<IgrCategoryChart dataSource={chartData}
+					width="100%"
+					height="500px">
+				</IgrCategoryChart>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/category-chart/default/files/src/views/__path__/style.module.css

@@ -0,0 +1,9 @@
+:local(.container) {
+    padding-top: 24px;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+}
+:local(.title) {
+    color: rgb(0, 153, 255);
+}

package/templates/react/igr-ts/category-chart/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/category-chart/default/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsCategoryChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Category Chart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "category-chart";
+        this.projectType = "igr-ts";
+        this.name = "Category Chart";
+        this.description = `makes visualizing category data easy. Simplifies the complexities
+							of the data visualization domain into manageable API`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@18.2.2-beta.0"];
+    }
+}
+module.exports = new IgrTsCategoryChartTemplate();

package/templates/react/igr-ts/category-chart/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/category-chart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsCategoryChartComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Category Chart";
+        this.group = "Charts";
+        this.description = `makes visualizing category data easy. Simplifies the complexities
+							of the data visualization domain into manageable API`;
+    }
+}
+module.exports = new IgrTsCategoryChartComponent();

package/templates/react/igr-ts/doughnut-chart/default/files/src/views/__path__/index.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './index';
+
+test('renders $(ClassName) component', () => {
+    const wrapper = render(<$(ClassName) />);
+    expect(wrapper).toBeTruthy();
+});

package/templates/react/igr-ts/doughnut-chart/default/files/src/views/__path__/index.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { IgrDoughnutChartModule } from 'igniteui-react-charts';
+import { IgrDoughnutChart } from 'igniteui-react-charts';
+import { IgrRingSeriesModule } from 'igniteui-react-charts';
+import { IgrRingSeries } from 'igniteui-react-charts';
+import { IgrItemLegendModule } from 'igniteui-react-charts';
+import { IgrItemLegend } from 'igniteui-react-charts';
+import style from './style.module.css';
+
+IgrItemLegendModule.register();
+
+IgrDoughnutChartModule.register();
+IgrRingSeriesModule.register();
+
+
+const data = [
+    { MarketShare: 30, Company: "Google", },
+    { MarketShare: 15, Company: "Microsoft", },
+    { MarketShare: 30, Company: "Apple", },
+    { MarketShare: 15, Company: "Samsung", },
+    { MarketShare: 10, Company: "Other", },
+];
+
+export default function $(ClassName)() {
+    const title = 'Doughnut Chart';
+    const [chartData, setChartData] = useState([]);
+    const legendRef = useRef();
+    const chartRef = useRef();
+
+    useEffect(() => {
+		setChartData(data);
+	}, []);
+
+	return (
+		<div>
+			<h1 className={style.title}>{title}</h1>
+			<div>
+				Read more on the&nbsp;
+				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/doughnutchart.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<div className={style.legend}>
+					<IgrItemLegend ref={legendRef} />
+				</div>
+				<div className={style.chart}>
+					<IgrDoughnutChart ref={chartRef}
+						width="300px"
+						height="300px">
+						<IgrRingSeries
+							name="ring1"
+							dataSource={chartData}
+							labelMemberPath="Company"
+							valueMemberPath="MarketShare"
+							legend={legendRef.current}
+							/>
+					</IgrDoughnutChart>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/doughnut-chart/default/files/src/views/__path__/style.module.css

@@ -0,0 +1,9 @@
+:local(.container) {
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    padding-top: 24px;
+}
+:local(.title) {
+    color: rgb(0, 153, 255);
+}

package/templates/react/igr-ts/doughnut-chart/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/doughnut-chart/default/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsDoughnutChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Doughnut Chart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "doughnut-chart";
+        this.projectType = "igr-ts";
+        this.name = "Doughnut Chart";
+        this.description = `proportionally illustrate the occurrences of variables.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@18.2.2-beta.0"];
+    }
+}
+module.exports = new IgrTsDoughnutChartTemplate();

package/templates/react/igr-ts/doughnut-chart/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/doughnut-chart/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsDoughnutChartComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Doughnut Chart";
+        this.group = "Charts";
+        this.description = `proportionally illustrate the occurrences of variables.`;
+    }
+}
+module.exports = new IgrTsDoughnutChartComponent();

package/templates/react/igr-ts/financial-chart/default/files/src/views/__path__/index.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './index';
+
+test('renders $(ClassName) component', () => {
+    const wrapper = render(<$(ClassName) />);
+    expect(wrapper).toBeTruthy();
+});

package/templates/react/igr-ts/financial-chart/default/files/src/views/__path__/index.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import { IgrFinancialChartModule } from 'igniteui-react-charts';
+import { IgrFinancialChart } from 'igniteui-react-charts';
+import style from './style.module.css';
+
+IgrFinancialChartModule.register();
+
+const data = [
+    { time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 },
+    { time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 },
+    { time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 },
+    { time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 },
+    { time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 },
+    { time: new Date(2013, 1, 8), open: 261.40, high: 265.25, low: 260.56, close: 261.95, volume: 3879628 },
+    { time: new Date(2013, 1, 11), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 },
+    { time: new Date(2013, 1, 12), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 },
+    { time: new Date(2013, 1, 13), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 },
+    { time: new Date(2013, 1, 14), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 },
+    { time: new Date(2013, 1, 15), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 }
+];
+
+
+export default function $(ClassName)() {
+    const title = 'Financial Chart';
+	const [chartData, setChartData] = useState([]);
+
+	useEffect(() => {
+		setChartData(data);
+	}, []);
+
+	return (
+		<div>
+			<h1 className={style.title}>{title}</h1>
+			<div>
+				Read more on the&nbsp;
+				<a href="https://www.infragistics.com/products/ignite-ui-react/react/components/financialchart.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<IgrFinancialChart
+					width="700px"
+					height="500px"
+					dataSource={chartData}>
+				</IgrFinancialChart>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/financial-chart/default/files/src/views/__path__/style.module.css

@@ -0,0 +1,10 @@
+:local(.container) {
+    padding-top: 24px;
+    display: flex;
+    flex-flow: row;
+	justify-content: center;
+	text-align: left;
+}
+:local(.title) {
+    color: rgb(0, 153, 255);
+}

package/templates/react/igr-ts/financial-chart/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/financial-chart/default/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsFinancialChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Financial Chart"];
+        this.controlGroup = "Charts";
+        // set to true once bug with chart destoy is fixed
+        this.listInComponentTemplates = false;
+        this.id = "financial-chart";
+        this.projectType = "igr-ts";
+        this.name = "Financial Chart";
+        this.description = `charting component that makes it easy to visualize financial data by
+							using a simple and intuitive API.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@18.2.2-beta.0"];
+    }
+}
+module.exports = new IgrTsFinancialChartTemplate();

package/templates/react/igr-ts/financial-chart/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/financial-chart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsFinancialChartComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Financial Chart";
+        this.group = "Charts";
+        this.description = `charting component that makes it easy to visualize financial data by
+							using a simple and intuitive API.`;
+    }
+}
+module.exports = new IgrTsFinancialChartComponent();

package/templates/react/igr-ts/grid/basic/files/src/views/__path__/data.tsx

@@ -0,0 +1,46 @@
+export default [{
+    Discontinued: false,
+    OrderDate: new Date('2012-02-12'),
+    ProductID: 1,
+    ProductName: 'Chai',
+    QuantityPerUnit: '10 boxes x 20 bags',
+    ReorderLevel: 10,
+    UnitPrice: 18.0000,
+    UnitsInStock: 39
+}, {
+    Discontinued: false,
+    OrderDate: new Date('2003-03-17'),
+    ProductID: 2,
+    ProductName: 'Chang',
+    QuantityPerUnit: '24 - 12 oz bottles',
+    ReorderLevel: 25,
+    UnitPrice: 19.0000,
+    UnitsInStock: 17
+}, {
+    Discontinued: false,
+    OrderDate: new Date('2006-03-17'),
+    ProductID: 3,
+    ProductName: 'Aniseed Syrup',
+    QuantityPerUnit: '12 - 550 ml bottles',
+    ReorderLevel: 25,
+    UnitPrice: 10.0000,
+    UnitsInStock: 13
+}, {
+    Discontinued: false,
+    OrderDate: new Date('2016-03-17'),
+    ProductID: 4,
+    ProductName: 'Chef Antons Cajun Seasoning',
+    QuantityPerUnit: '48 - 6 oz jars',
+    ReorderLevel: 0,
+    UnitPrice: 22.0000,
+    UnitsInStock: 53
+}, {
+    Discontinued: true,
+    OrderDate: new Date('2011-11-11'),
+    ProductID: 5,
+    ProductName: 'Chef Antons Gumbo Mix',
+    QuantityPerUnit: '36 boxes',
+    ReorderLevel: 0,
+    UnitPrice: 21.3500,
+    UnitsInStock: 0
+}];

package/templates/react/igr-ts/grid/basic/files/src/views/__path__/index.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './index';
+
+test('renders $(ClassName) component', () => {
+    const wrapper = render(<$(ClassName) />);
+    expect(wrapper).toBeTruthy();
+});

package/templates/react/igr-ts/grid/basic/files/src/views/__path__/index.tsx

@@ -0,0 +1,63 @@
+import { React } from 'react';
+import style from './style.module.css';
+import 'igniteui-react-grids/grids';
+import { IgrGridModule, IgrGrid, IgrColumn } from 'igniteui-react-grids';
+import 'igniteui-react-grids/grids/themes/light/bootstrap.css'
+
+import data from './data';
+
+IgrGridModule.register();
+
+export default function $(ClassName)() {
+	const title = 'Grid';
+
+	return (
+      <div>
+        <h1 className={style.title}>{title}</h1>
+        <div>
+          Read more on the&nbsp;
+          <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/grid.html">
+            official documentation page
+          </a>
+        </div>
+        <div className={style.container}>
+          <div className={style.grid}>
+            <IgrGrid
+              autoGenerate="false"
+              data={data}>
+              <IgrColumn
+                  field="ProductID"
+                  header="Product ID"
+                  dataType="Number">
+              </IgrColumn>
+              <IgrColumn
+                  field="ProductName"
+                  header="Product Name"
+                  dataType="String">
+              </IgrColumn>
+              <IgrColumn
+                  field="QuantityPerUnit"
+                  header="Quantity Per Unit"
+                  dataType="String">
+              </IgrColumn>
+              <IgrColumn
+                  field="UnitsInStock"
+                  header="Units In Stock"
+                  dataType="Number">
+              </IgrColumn>
+              <IgrColumn
+                  field="OrderDate"
+                  header="Order Date"
+                  dataType="Date">
+              </IgrColumn>
+            </IgrGrid>
+          </div>
+          <div className={style.grid}>
+            <IgrGrid
+              autoGenerate="true"
+              data={data} />
+          </div>
+        </div>
+      </div>
+	)
+}