Skip to content

Commit 68f1d85

Browse files
xkamxkam
committed
demo
1 parent 1e7e242 commit 68f1d85

File tree

9 files changed

+278
-3
lines changed

9 files changed

+278
-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/jQuery</title>
6+
</head>
7+
<body>
8+
<ax-datagrid>Loading...</ax-datagrid>
9+
<script src="src/index.js"></script>
10+
</body>
11+
</html>

‎examples/demo/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "jquery-demo",
3+
"version": "1.0.0",
4+
"description": "Demo - ActiveWidgets/jQuery",
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/jquery": "0.0.10",
13+
"jquery": "*"
14+
},
15+
"devDependencies": {
16+
"parcel-bundler": "^1"
17+
},
18+
"private": true
19+
}

‎examples/demo/src/index.js‎

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

‎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/demo/src/templates.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
import { tpl } from "@activewidgets/jquery";
3+
import * as flags from '@activewidgets/examples/flags';
4+
5+
6+
export function company({data}){
7+
return tpl`<div>
8+
<div class="bold blue">${data.customerID}</div>
9+
<div class="small">${data.companyName}</div>
10+
</div>`;
11+
}
12+
13+
export function contact({data}){
14+
return tpl`<div>
15+
<div class="bold">${data.contactName}</div>
16+
<div class="small">${data.contactTitle}</div>
17+
</div>`;
18+
}
19+
20+
export function address({data}){
21+
return tpl`<div>
22+
<div class="small">${data.address}</div>
23+
<div class="small">${data.postalCode} <span>${data.city}</span></div>
24+
</div>`;
25+
}
26+
27+
export function country({text}){
28+
return tpl`<div><img src=${flags[text]}/>${text}</div>`;
29+
}
30+
31+
export function phone({data}){
32+
return tpl`<div>
33+
<div class="small phone">${data.phone}</div>
34+
<div class="small fax">${data.fax}</div>
35+
</div>`;
36+
}

‎examples/viewer/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22
import {Viewer} from '@activewidgets/examples';
3-
import '../../';
3+
import '@activewidgets/jquery';
44
import $ from 'jquery';
55
import * as pages from './examples.js';
6-
import readme from '../README.md';
6+
import readme from '../demo/README.md';
77
import logo from './jquery.svg';
88
import pkg from '../../package.json';
99

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"preact": "10.1.1"
2727
},
2828
"devDependencies": {
29-
"@activewidgets/examples": "0.0.2",
29+
"@activewidgets/examples": "0.0.3",
3030
"@activewidgets/options": "0.0.10",
3131
"@activewidgets/puppeteer": "0.0.4",
3232
"@activewidgets/testing": "0.0.3",

0 commit comments

Comments
 (0)