Skip to content

Commit 1fca7da

Browse files
xkamxkam
committed
examples
1 parent 354c6c6 commit 1fca7da

File tree

11 files changed

+162
-0
lines changed

11 files changed

+162
-0
lines changed

‎examples/cdn-es5/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
A minimal example showing ActiveWidgets datagrid for React
3+
4+
```js
5+
import React from "react";
6+
import ReactDOM from "react-dom";
7+
import {Datagrid} from "@activewidgets/react";
8+
import {columns, rows} from "./data.js"
9+
import "./styles.css";
10+
11+
function App() {
12+
return (
13+
<Datagrid columns={columns} rows={rows} />
14+
);
15+
}
16+
17+
const rootElement = document.getElementById("root");
18+
ReactDOM.render(<App />, rootElement);
19+
```
20+
21+
[![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/cdn-es5/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>CDN/ES5 - ActiveWidgets/React</title>
6+
7+
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
8+
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
9+
10+
<link href="https://cdn.activewidgets.com/react/3/ax.css" rel="stylesheet" />
11+
<script src="https://cdn.activewidgets.com/react/3/ax.js"></script>
12+
13+
<link href="src/styles.css" rel="stylesheet" />
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
<script src="src/index.js"></script>
18+
</body>
19+
</html>

‎examples/cdn-es5/package.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "react-cdn-es5",
3+
"version": "1.0.0",
4+
"description": "ActiveWidgets/React from CDN",
5+
"keywords": [],
6+
"main": "index.html",
7+
"private": true
8+
}

‎examples/cdn-es5/sanbox.config.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"infiniteLoopProtection": true,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "static"
6+
}

‎examples/cdn-es5/src/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
var Datagrid = ActiveWidgets.React.Datagrid;
3+
4+
var rows = [
5+
{ framework: 'React', source: 'CDN', landuage: 'ES5'}
6+
];
7+
8+
var App = React.createElement(Datagrid, {rows: rows});
9+
10+
ReactDOM.render(App, document.getElementById("app"));

‎examples/cdn-es5/src/styles.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
.ax-datagrid {
3+
margin: 60px;
4+
font-family: "Segoe UI", "Helvetica Neue";
5+
font-size: 13px;
6+
}
7+
8+
.ax-headers-view {
9+
font-weight: bold;
10+
color: #666;
11+
border-bottom: 1px solid #aaa;
12+
}
13+
14+
.ax-gridlines {
15+
border-bottom: 1px solid #eee;
16+
}

‎examples/hello-world/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
A minimal example showing ActiveWidgets datagrid for React
3+
4+
```js
5+
import React from "react";
6+
import ReactDOM from "react-dom";
7+
import {Datagrid} from "@activewidgets/react";
8+
import {columns, rows} from "./data.js"
9+
import "./styles.css";
10+
11+
function App() {
12+
return (
13+
<Datagrid columns={columns} rows={rows} />
14+
);
15+
}
16+
17+
const rootElement = document.getElementById("root");
18+
ReactDOM.render(<App />, rootElement);
19+
```
20+
21+
[![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/hello-world/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Hello World - ActiveWidgets/React</title>
6+
<link href="src/styles.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script src="src/index.js"></script>
11+
</body>
12+
</html>

‎examples/hello-world/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "react-hello-world",
3+
"version": "1.0.0",
4+
"description": "Hello World - ActiveWidgets/React",
5+
"keywords": [],
6+
"main": "index.html",
7+
"scripts": {
8+
"start": "parcel --open",
9+
"build": "parcel build"
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/hello-world/src/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import { Datagrid } from "@activewidgets/react";
4+
5+
const rows = [
6+
{ message: 'Hello, World!' }
7+
];
8+
9+
const App = () => (
10+
<Datagrid rows={rows} />
11+
);
12+
13+
ReactDOM.render(<App />, document.getElementById("app"));

0 commit comments

Comments
 (0)