Skip to content

Commit c5f1fd8

Browse files
xkamxkam
committed
readme, examples
1 parent 1017904 commit c5f1fd8

File tree

11 files changed

+157
-127
lines changed

11 files changed

+157
-127
lines changed

‎README.md‎

Lines changed: 128 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,142 @@
11

2-
[![ActiveWidgets](http://www.activewidgets.com/include/logo/aw-logo-40.png?activewidgets/react)](http://www.activewidgets.com/)
2+
###
33

4-
## Fast datagrid component for React
4+
# ActiveWidgets/React • Datagrid
55

6-
ActiveWidgets 3.0 datagrid, implemented as React Component.
6+
[![npm version](https://img.shields.io/npm/v/@activewidgets/react)](https://www.npmjs.com/package/@activewidgets/react "View this project on npm")
7+
[![npm downloads](https://img.shields.io/npm/dm/@activewidgets/react)](https://www.npmjs.com/package/@activewidgets/react "npm package downloads/month")
8+
[![Github issues](https://img.shields.io/github/issues/activewidgets/react)](https://github.com/activewidgets/react/issues "See Github issues")
9+
[![Github repo](https://img.shields.io/github/stars/activewidgets/react?label=GitHub&style=social)](https://github.com/activewidgets/react "Open Github repo")
710

8-
- [Examples](https://rs.activewidgets.com/)
9-
- [Docs](https://rd.activewidgets.com/)
11+
ActiveWidgets is a multi-framework UI component library. This package provides **datagrid component** for **React**.
1012

11-
### Installation
13+
[Live demo](https://react.activewidgets.com) / [Developer guide](https://docs.activewidgets.com/guide/) / [API reference](https://docs.activewidgets.com/api/)
1214

13-
```bash
14-
npm install @activewidgets/react
15+
[![Datagrid demo](https://cdn.activewidgets.com/assets/screens/demo.png)](https://react.activewidgets.com)
16+
17+
- [Installation](#installation)
18+
- [Usage](#usage)
19+
- [CDN links](#cdn-links)
20+
- [Data properties](#data-properties)
21+
- [User events](#user-events)
22+
23+
## Installation
24+
25+
Add [@activewidgets/react](https://docs.activewidgets.com/api/packages/react/) to your project dependencies -
26+
27+
```sh
28+
> npm i --save @activewidgets/react
29+
```
30+
31+
## Usage
32+
33+
Now you can import ActiveWidgets component classes -
34+
35+
```js
36+
import { Datagrid } from "@activewidgets/react";
37+
```
38+
39+
and use them as any standard React component.
40+
41+
```js
42+
import React from "react";
43+
import ReactDOM from "react-dom";
44+
import { Datagrid } from "@activewidgets/react";
45+
46+
const rows = [
47+
{ message: 'Hello, World!' }
48+
];
49+
50+
function App(){
51+
return <Datagrid rows={rows} />
52+
}
53+
54+
ReactDOM.render(<App />, document.getElementById("app"));
55+
```
56+
57+
[Live example](https://react.activewidgets.com/examples/local/hello-world/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/hello-world) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/hello-world)
58+
59+
## CDN links
60+
61+
For quick prototyping the package is also available over ActiveWidgets CDN -
62+
63+
```html
64+
<script src="https://cdn.activewidgets.com/react"></script>
65+
```
66+
67+
In this case you will find the components at `ActiveWidgets.React` global namespace.
68+
69+
```js
70+
var Datagrid = ActiveWidgets.React.Datagrid;
71+
72+
var rows = [
73+
{ framework: 'React', source: 'CDN', language: 'ES5' }
74+
];
75+
76+
var App = React.createElement(Datagrid, { rows: rows });
77+
ReactDOM.render(App, document.getElementById("app"));
1578
```
1679

17-
### Usage
80+
[Live example](https://react.activewidgets.com/examples/local/cdn-es5/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/cdn-es5) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/cdn-es5)
81+
82+
## Data properties
83+
84+
You have to provide [columns](https://docs.activewidgets.com/api/datagrid/columns/) and [rows](https://docs.activewidgets.com/api/datagrid/rows/) properties to the datagrid to show some data. The properties of each `column` object define how the data will be rendered -
85+
86+
- [field](https://docs.activewidgets.com/api/datagrid/columns/#field) - where the cell data comes from (string|function)
87+
- [header](https://docs.activewidgets.com/api/datagrid/columns/#header) - column header (string|object)
88+
- [width](https://docs.activewidgets.com/api/datagrid/columns/#width) - column width (number, in pixels)
89+
- [align](https://docs.activewidgets.com/api/datagrid/columns/#align) - cell text alignment (left|right|center)
90+
- [format](https://docs.activewidgets.com/api/datagrid/columns/#format) - number/date format (string|function)
91+
- [fixed](https://docs.activewidgets.com/api/datagrid/columns/#fixed) - fixed (true/false) for columns on the left or right side
92+
93+
The `style` (string|object) or `className` properties allow to change the styling of the column and cell elements.
1894

1995
```js
20-
import React from 'react';
21-
import ReactDOM from 'react-dom';
22-
import {Datagrid} from '@activewidgets/react';
23-
import {columns, rows} from './data.js';
96+
const columns = [
97+
{header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
98+
{header: 'Company Name', field: 'companyName', width: 160},
99+
{header: 'Contact', field: 'contactName', width: 120},
100+
{header: 'Title', field: 'contactTitle', width: 120},
101+
{header: 'Address', field: 'address', width: 120, align: 'right'}
102+
];
103+
104+
const rows = northwind.customers;
105+
106+
function App(){
107+
return <Datagrid columns={columns} rows={rows} />
108+
}
109+
```
110+
111+
[Live example](https://react.activewidgets.com/examples/local/columns/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/columns) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/columns)
112+
24113

25-
const app = <Datagrid columns={columns} rows={rows} />;
114+
## User events
115+
116+
In addition to the standard DOM keyboard and mouse events the datagrid emits composite
117+
[mouse](https://docs.activewidgets.com/api/datagrid/mouse-event/) event which makes it easier to find the elements affected by the user action -
118+
119+
```js
120+
function onMouse({row, column}){
121+
alert(`row ${row.key} clicked!`);
122+
}
26123

27-
ReactDOM.render(app, document.getElementById('app'));
124+
function App(){
125+
return <Datagrid onMouse={onMouse} columns={columns} rows={rows} />
126+
}
28127
```
29128

30-
See http://www.activewidgets.com/
129+
[Live example](/examples/react/events/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/events) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/events)
130+
131+
## More info
132+
133+
- [Live demo](https://react.activewidgets.com)
134+
- [Developer guide](https://docs.activewidgets.com/guide/)
135+
- [API reference](https://docs.activewidgets.com/api/)
136+
- [Licensing](https://activewidgets.com/licenses/)
137+
- [Support forum](https://activewidgets.com/messages/)
138+
139+
140+
---
141+
142+
[![ActiveWidgets](https://activewidgets.com/include/logo/aw-logo-40.png)](https://activewidgets.com)

‎examples/cdn-es5/README.md‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1+
[Open fullscreen](/cdn-es5/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/cdn-es5) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/cdn-es5)
12

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)
3+
React example

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
var Datagrid = ActiveWidgets.React.Datagrid;
88

99
var rows = [
10-
{ framework: 'React', source: 'CDN', language: 'ES5'}
10+
{ framework: 'React', source: 'CDN', language: 'ES5' }
1111
];
1212

13-
var App = React.createElement(Datagrid, {rows: rows});
13+
var App = React.createElement(Datagrid, { rows: rows });
1414

1515
ReactDOM.render(App, document.getElementById("app"));

‎examples/columns/README.md‎

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

2-
A minimal example showing ActiveWidgets datagrid for React
2+
[Open fullscreen](/columns/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/columns) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/columns)
33

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)
4+
React example

‎examples/columns/src/index.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ReactDOM from "react-dom";
99
import { Datagrid } from "@activewidgets/react";
1010
import { northwind } from "@activewidgets/examples/data";
1111

12+
1213
const columns = [
1314
{header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
1415
{header: 'Company Name', field: 'companyName', width: 160},
@@ -22,8 +23,12 @@ const columns = [
2223
{header: 'Country', field: 'country'}
2324
];
2425

25-
const App = () => (
26-
<Datagrid columns={columns} rows={northwind.customers} />
27-
);
26+
const rows = northwind.customers;
27+
28+
29+
function App(){
30+
return <Datagrid columns={columns} rows={rows} />
31+
}
32+
2833

2934
ReactDOM.render(<App />, document.getElementById("app"));

‎examples/demo/README.md‎

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,4 @@
11

22
[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)
33

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)
4+
React demo

‎examples/events/README.md‎

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

2-
A minimal example showing ActiveWidgets datagrid for React
2+
[Open fullscreen](/events/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/events) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/events)
33

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)
4+
React example

‎examples/events/src/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import ReactDOM from "react-dom";
99
import { Datagrid } from "@activewidgets/react";
1010
import { columns, rows } from "@activewidgets/examples/data";
1111

12-
function onMouse({row}){
12+
function onMouse({row, column}){
1313
alert(`row ${row.key} clicked!`);
1414
}
1515

16-
const App = () => (
17-
<Datagrid columns={columns} rows={rows} onMouse={onMouse} />
18-
);
16+
function App(){
17+
return <Datagrid columns={columns} rows={rows} onMouse={onMouse} />
18+
}
1919

2020
ReactDOM.render(<App />, document.getElementById("app"));

‎examples/hello-world/README.md‎

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

2-
A minimal example showing ActiveWidgets datagrid for React
2+
[Open fullscreen](/hello-world/) | [Source on github](https://github.com/activewidgets/react/tree/master/examples/hello-world) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/react/tree/master/examples/hello-world)
33

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)
4+
React example

‎examples/hello-world/src/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const rows = [
1212
{ message: 'Hello, World!' }
1313
];
1414

15-
const App = () => (
16-
<Datagrid rows={rows} />
17-
);
15+
function App(){
16+
return <Datagrid rows={rows} />
17+
}
1818

1919
ReactDOM.render(<App />, document.getElementById("app"));

0 commit comments

Comments
 (0)