Skip to content

Commit bc4aa55

Browse files
xkamxkam
committed
demo
1 parent 937e774 commit bc4aa55

File tree

8 files changed

+281
-2
lines changed

8 files changed

+281
-2
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/React</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="src/index.js"></script>
10+
</body>
11+
</html>

‎examples/demo/package.json‎

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

‎examples/demo/src/index.js‎

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

‎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 React from "react";
3+
import * as flags from '@activewidgets/examples/flags';
4+
5+
6+
export function company({data}){
7+
return <div>
8+
<div className="bold blue">{data.customerID}</div>
9+
<div className="small">{data.companyName}</div>
10+
</div>;
11+
}
12+
13+
export function contact({data}){
14+
return <div>
15+
<div className="bold">{data.contactName}</div>
16+
<div className="small">{data.contactTitle}</div>
17+
</div>;
18+
}
19+
20+
export function address({data}){
21+
return <div>
22+
<div className="small">{data.address}</div>
23+
<div className="small">{data.postalCode} <span>{data.city}</span></div>
24+
</div>;
25+
}
26+
27+
export function country({text}){
28+
return <div><img src={flags[text]}/>{text}</div>;
29+
}
30+
31+
export function phone({data}){
32+
return <div>
33+
<div className="small phone">{data.phone}</div>
34+
<div className="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';
33
import ReactDOM from 'react-dom';
4-
import {h} from '../../';
4+
import {h} from '@activewidgets/react';
55
import * as pages from './examples.js';
6-
import readme from '../README.md';
6+
import readme from '../demo/README.md';
77
import logo from './react.svg';
88
import pkg from '../../package.json';
99

0 commit comments

Comments
 (0)