Skip to content

Commit 1e10e03

Browse files
xkamxkam
committed
examples
1 parent 8bba8da commit 1e10e03

File tree

19 files changed

+174
-1260
lines changed

19 files changed

+174
-1260
lines changed

‎examples/README.md‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11

22
# ![](viewer/react.svg) React examples
33

4-
coming soon...
4+
# Introduction
5+
6+
ActiveWidgets is a developer-friendly multi-framework datagrid component library for the web. It is built for the performance-critical enterprise applications with complex screens and very large datasets. Yet the library tries to remain compact and simple and allows writing code that everyone can understand and maintain.
7+
8+
## Modern datagrid
9+
10+
The dark days of IE6 are finally over. Today's browsers offer multi-threading, GPU acceleration, fine-grained scheduling and many other ways to achieve an exceptional performance. ActiveWidgets 3.0 is designed from the ground up to take advantage of the capabilities of a modern browser and deliver better, faster, less complex and more reliable product.
11+
12+
## Frameworks support
13+
14+
ActiveWidgets goal is to deliver _Universal Web Components_, which can be used in all popular frameworks as well as raw javascript/html/css, legacy and multi-framework environments.
15+

‎examples/cdn-es5/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
<meta charset="UTF-8" />
55
<title>CDN/ES5 - ActiveWidgets/React</title>
66

7+
<script src="https://polyfill.io/v3/polyfill.min.js?features=Promise"></script>
8+
79
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
810
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
911

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11

2-
.ax-datagrid {
2+
body {
33
margin: 60px;
4-
font-family: "Segoe UI", "Helvetica Neue";
5-
font-size: 13px;
4+
font: 14px/1.2143 'Segoe UI', 'Avenir', 'Helvetica Neue', 'Tahoma', sans-serif;
5+
}
6+
7+
.ax-datagrid {
8+
max-height: 80px;
69
}
710

811
.ax-headers-view {

‎examples/get-started/README.md‎ renamed to ‎examples/columns/README.md‎

File renamed without changes.

‎examples/columns/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>Columns, rows - ActiveWidgets/React</title>
6+
<link href="src/styles.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div id="app">Loading...</div>
10+
<script src="src/index.js"></script>
11+
</body>
12+
</html>

‎examples/get-started/package.json‎ renamed to ‎examples/columns/package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "react-get-started",
2+
"name": "react-columns",
33
"version": "1.0.0",
4-
"description": "ActiveWidgets datagrid for React",
4+
"description": "Columns, rows - ActiveWidgets/React",
55
"keywords": [],
66
"main": "src/index.js",
77
"scripts": {
@@ -14,8 +14,7 @@
1414
"react-dom": "^16"
1515
},
1616
"devDependencies": {
17-
"@babel/core": "^7",
1817
"parcel-bundler": "^1"
1918
},
2019
"private": true
21-
}
20+
}

‎examples/columns/src/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import { Datagrid } from "@activewidgets/react";
4+
import * as data from "@activewidgets/examples/northwind";
5+
6+
const columns = [
7+
{header: 'Code', field: 'CustomerID', width: 80, style: 'background:#def', fixed: true},
8+
{header: 'Company Name', field: 'CompanyName', width: 160},
9+
{header: 'Contact', field: 'ContactName', width: 120},
10+
{header: 'Title', field: 'ContactTitle', width: 120},
11+
{header: 'Address', field: 'Address', width: 120},
12+
{header: 'City', field: 'City'},
13+
{header: 'Zip', field: 'PostalCode', align: 'right'},
14+
{header: 'Phone', field: 'Phone'},
15+
{header: 'Fax', field: 'Fax'},
16+
{header: 'Country', field: 'Country'}
17+
];
18+
19+
const App = () => (
20+
<Datagrid columns={columns} rows={data.customers} />
21+
);
22+
23+
ReactDOM.render(<App />, document.getElementById("app"));

‎examples/columns/src/styles.css‎

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

‎examples/events/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/events/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>User events - ActiveWidgets/React</title>
6+
<link href="src/styles.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div id="app">Loading...</div>
10+
<p>&#10140; Click on a datagrid row to open an alert box</p>
11+
<script src="src/index.js"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)