Skip to content

Commit d14f42c

Browse files
xkamxkam
committed
demo
1 parent b1ee0d2 commit d14f42c

File tree

10 files changed

+320
-3
lines changed

10 files changed

+320
-3
lines changed

‎examples/demo/README.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
[Open fullscreen](/demo/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/demo) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/demo)
3+
4+
5+
A minimal example showing ActiveWidgets datagrid for React
6+
7+
```js
8+
import React from "react";
9+
import ReactDOM from "react-dom";
10+
import {Datagrid} from "@activewidgets/react";
11+
import {columns, rows} from "./data.js"
12+
import "./styles.css";
13+
14+
function App() {
15+
return (
16+
<Datagrid columns={columns} rows={rows} />
17+
);
18+
}
19+
20+
const rootElement = document.getElementById("root");
21+
ReactDOM.render(<App />, rootElement);
22+
```
23+
24+
[![Edit react-get-started](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/get-started)

‎examples/demo/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Demo - ActiveWidgets/Angular</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="src/main.js"></script>
10+
</body>
11+
</html>

‎examples/demo/package.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "angular-demo",
3+
"version": "1.0.0",
4+
"description": "Demo - ActiveWidgets/Angular",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"scripts": {
8+
"start": "parcel index.html --open",
9+
"build": "parcel build index.html"
10+
},
11+
"dependencies": {
12+
"@activewidgets/angular": "0.0.10",
13+
"@angular/core": "^8",
14+
"@angular/common": "^8",
15+
"@angular/compiler": "^8",
16+
"@angular/compiler-cli": "^8",
17+
"@angular/platform-browser": "^8",
18+
"@angular/platform-browser-dynamic": "^8",
19+
"rxjs": "^6",
20+
"typescript": ">=3.4 <3.6",
21+
"zone.js": "~0.9.1"
22+
},
23+
"devDependencies": {
24+
"parcel-bundler": "^1"
25+
},
26+
"private": true
27+
}

‎examples/demo/src/app.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
<ax-datagrid [columns]="columns" [rows]="rows" [options]="options" (row)="onRow($event)">
3+
4+
<ng-template name="company" let-data="data">
5+
<div>
6+
<div class="bold blue">{{data.customerID}}</div>
7+
<div class="small">{{data.companyName}}</div>
8+
</div>
9+
</ng-template>
10+
11+
<ng-template name="contact" let-data="data">
12+
<div>
13+
<div class="bold">{{data.contactName}}</div>
14+
<div class="small">{{data.contactTitle}}</div>
15+
</div>
16+
</ng-template>
17+
18+
<ng-template name="address" let-data="data">
19+
<div>
20+
<div class="small">{{data.address}}</div>
21+
<div class="small">{{data.postalCode}} <span>{{data.city}}</span></div>
22+
</div>
23+
</ng-template>
24+
25+
<ng-template name="country" let-text="text">
26+
<div><img [src]="flags[text]"/>{{text}}</div>
27+
</ng-template>
28+
29+
<ng-template name="phone" let-data="data">
30+
<div>
31+
<div class="small phone">{{data.phone}}</div>
32+
<div class="small fax">{{data.fax}}</div>
33+
</div>
34+
</ng-template>
35+
36+
</ax-datagrid>

‎examples/demo/src/app.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
2+
import { Component } from '@angular/core';
3+
import { northwind } from '@activewidgets/examples/data';
4+
import * as flags from '@activewidgets/examples/flags';
5+
import options from './options';
6+
import template from './app.html';
7+
import './styles.css';
8+
9+
10+
export class App {
11+
12+
constructor(){
13+
14+
this.columns = [
15+
{ header: 'Company', template: 'company', fixed: true },
16+
{ header: 'Contact', template: 'contact', style: 'background:#f4f4f4', key: 'contact' },
17+
{ header: 'Address', template: 'address', key: 'address' },
18+
{ header: 'Country', type: 'country flag', field: 'country' },
19+
{ header: 'Phone/Fax', type: 'phone & fax'},
20+
{ header: 'Last Order', type: 'money', field: 'amount' },
21+
{ header: 'Order Date', type: 'date', field: 'date' }
22+
];
23+
24+
this.rows = northwind.customers;
25+
this.options = options;
26+
this.flags = flags;
27+
}
28+
29+
30+
onRow(row){
31+
32+
const {data, cells} = row;
33+
34+
// calculated values
35+
cells.amount = 2000 * Math.random();
36+
cells.date = Date.now() - 500 * 86400000 * Math.random();
37+
38+
39+
// dynamic row style
40+
if (data.country == 'France'){
41+
row.class = 'bg-green';
42+
}
43+
44+
// dynamic cell styles
45+
if (data.city == 'London'){
46+
cells.address = {class: 'circle'};
47+
}
48+
49+
if (data.contactTitle == 'Owner'){
50+
cells.contact = {class: 'star'};
51+
}
52+
}
53+
54+
55+
static get annotations() { return [new Component({
56+
selector: '#app',
57+
template
58+
})]}
59+
}

‎examples/demo/src/main.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
import 'core-js/es7/reflect';
3+
import 'zone.js/dist/zone';
4+
5+
import { NgModule, enableProdMode } from '@angular/core';
6+
import { BrowserModule } from '@angular/platform-browser';
7+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
8+
import { AxModule } from '@activewidgets/angular';
9+
10+
import '@activewidgets/angular/css';
11+
12+
import { App } from './app.js';
13+
14+
15+
enableProdMode();
16+
17+
18+
class Module {
19+
static get annotations() { return [new NgModule({
20+
imports: [BrowserModule, AxModule],
21+
declarations: [App],
22+
bootstrap: [App]
23+
})]}
24+
}
25+
26+
platformBrowserDynamic().bootstrapModule(Module);
27+

‎examples/demo/src/options.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import { intl, format, column, type } from "@activewidgets/options";
3+
4+
5+
export default [
6+
7+
// enable intl. number/date formats
8+
intl('en-US'),
9+
10+
// define named formats
11+
format('money', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2}),
12+
format('date', {year: 'numeric', month: 'short', day: 'numeric'}),
13+
14+
// set column defaults
15+
column({width: 200}),
16+
17+
// define reusable column types
18+
type('country flag', {template: 'country', width: 170}),
19+
type('phone & fax', {template: 'phone', width: 150}),
20+
type('money', {format: 'money', width: 100, align: 'right'}),
21+
type('date', {format: 'date', width: 150, align: 'right'})
22+
];

‎examples/demo/src/styles.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
2+
body {
3+
margin: 60px;
4+
font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
5+
}
6+
7+
8+
.ax-datagrid {
9+
height: calc(100vh - 120px);
10+
min-height: 400px;
11+
}
12+
13+
.ax-headers-view {
14+
font-weight: bold;
15+
color: #666;
16+
border-bottom: 1px solid #aaa;
17+
}
18+
19+
.ax-gridlines {
20+
border-bottom: 1px solid #eee;
21+
}
22+
23+
.ax-cell:hover {
24+
background: rgba(0,127,255,0.1);
25+
}
26+
27+
.ax-cell > div {
28+
width: 100%;
29+
overflow: hidden;
30+
text-overflow: ellipsis;
31+
}
32+
33+
.ax-cell > img {
34+
width: 32px;
35+
height: 32px;
36+
vertical-align: middle;
37+
margin: 0px 10px;
38+
}
39+
40+
.small {
41+
font-size: 13px;
42+
line-height: 1.308;
43+
color: #444;
44+
}
45+
46+
.bold {
47+
font-weight: bold;
48+
color: #666;
49+
}
50+
51+
.blue {
52+
color: #369;
53+
}
54+
55+
.italic {
56+
font-style: italic;
57+
}
58+
59+
.phone:before {
60+
content: '\260E';
61+
color: #666;
62+
margin-right: 10px;
63+
}
64+
65+
.fax:before {
66+
content: 'fax';
67+
color: #666;
68+
margin-right: 10px;
69+
font-size: 11px;
70+
}
71+
72+
.circle {
73+
position: relative;
74+
overflow: visible;
75+
}
76+
77+
.circle span {
78+
font-weight: bold;
79+
color: #900;
80+
}
81+
82+
.circle:after {
83+
content: '';
84+
position: absolute;
85+
top: -15px;
86+
bottom: -15px;
87+
left: -30px;
88+
width: 180px;
89+
border: 2px dotted red;
90+
border-radius: 100px;
91+
background: rgba(255, 0, 0, 0.03);
92+
}
93+
94+
95+
.star .small {
96+
overflow: visible;
97+
}
98+
99+
.star .small:after {
100+
content: '\2605';
101+
display: inline-block;
102+
margin: -1em 5px;
103+
font-size: 2em;
104+
color: #fb0;
105+
text-shadow: 1px 1px 2px #333;
106+
vertical-align: -3px;
107+
}
108+
109+
.bg-green {
110+
background: rgba(0, 255, 0, 0.05);
111+
}

‎examples/viewer/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
88
import {DynamicModule} from 'ng-dynamic-component';
99

1010
import {Viewer} from '@activewidgets/examples';
11-
import * as components from '../../';
11+
import * as components from '@activewidgets/angular';
1212
import * as pages from './examples.js';
13-
import readme from '../README.md';
13+
import readme from '../demo/README.md';
1414
import logo from './angular.svg';
1515
import pkg from '../../package.json';
1616

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@angular/core": "*"
3131
},
3232
"devDependencies": {
33-
"@activewidgets/examples": "0.0.2",
33+
"@activewidgets/examples": "0.0.3",
3434
"@activewidgets/options": "0.0.10",
3535
"@activewidgets/puppeteer": "0.0.4",
3636
"@activewidgets/testing": "0.0.3",

0 commit comments

Comments
 (0)