Skip to content

Commit 3ff1cb9

Browse files
xkamxkam
committed
readme
1 parent 19a4b85 commit 3ff1cb9

File tree

3 files changed

+105
-40
lines changed

3 files changed

+105
-40
lines changed

‎README.md

+101-38
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,116 @@
11

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

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

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

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

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

13-
```bash
14-
npm install @activewidgets/angular
15+
[![Datagrid demo](https://cdn.activewidgets.com/assets/screens/demo.png)](https://angular.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+
24+
## Installation
25+
26+
Add [@activewidgets/angular](https://docs.activewidgets.com/api/packages/angular/) to your project dependencies -
27+
28+
```sh
29+
> npm i --save @activewidgets/angular
1530
```
1631

17-
### Usage
32+
## Usage
33+
34+
First you should include `AxModule` in your AppModule imports -
1835

1936
```js
20-
import {Component, NgModule} from '@angular/core';
21-
import {BrowserModule} from '@angular/platform-browser';
22-
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
23-
import {Module} from '@activewidgets/angular';
24-
import {columns, rows} from './data.js';
25-
26-
class AppComponent {
27-
28-
constructor(){
29-
this.rows = rows;
30-
this.columns = columns;
31-
}
32-
33-
static get annotations() { return [new Component({
34-
selector: '#app',
35-
template: `
36-
<ax-datagrid [rows]="rows" [columns]="columns"></ax-datagrid>
37-
`
38-
})]}
39-
}
37+
import { AxModule } from "@activewidgets/angular";
38+
import '@activewidgets/angular/css';
4039

40+
@NgModule({
41+
declarations: [AppComponent],
42+
imports: [BrowserModule, AxModule],
43+
providers: [],
44+
bootstrap: [AppComponent]
45+
})
46+
export class AppModule {}
47+
```
4148

42-
class AppModule {
43-
static get annotations() { return [new NgModule({
44-
imports: [BrowserModule, Module],
45-
declarations: [AppComponent],
46-
bootstrap: [AppComponent]
47-
})]}
48-
}
49+
Then you can use `ax-datagrid` and other `ax-...` tags in your component templates -
50+
51+
```html
52+
<ax-datagrid [rows]="rows"></ax-datagrid>
53+
```
54+
[Live example](https://angular.activewidgets.com/examples/local/hello-world/) | [Source on github](https://github.com/activewidgets/angular/tree/master/examples/hello-world) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/angular/tree/master/examples/hello-world)
55+
56+
57+
## Data properties
58+
59+
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 -
60+
61+
- [field](https://docs.activewidgets.com/api/datagrid/columns/#field) - where the cell data comes from (string|function)
62+
- [header](https://docs.activewidgets.com/api/datagrid/columns/#header) - column header (string|object)
63+
- [width](https://docs.activewidgets.com/api/datagrid/columns/#width) - column width (number, in pixels)
64+
- [align](https://docs.activewidgets.com/api/datagrid/columns/#align) - cell text alignment (left|right|center)
65+
- [format](https://docs.activewidgets.com/api/datagrid/columns/#format) - number/date format (string|function)
66+
- [fixed](https://docs.activewidgets.com/api/datagrid/columns/#fixed) - fixed (true/false) for columns on the left or right side
67+
68+
The `style` (string|object) or `className` properties allow to change the styling of the column and cell elements.
69+
70+
```js
71+
const columns = [
72+
{header: 'Code', field: 'customerID', width: 80, style: 'background:#def', fixed: true},
73+
{header: 'Company Name', field: 'companyName', width: 160},
74+
{header: 'Contact', field: 'contactName', width: 120},
75+
{header: 'Title', field: 'contactTitle', width: 120},
76+
{header: 'Address', field: 'address', width: 120, align: 'right'}
77+
];
78+
79+
const rows = northwind.customers;
80+
```
4981

50-
platformBrowserDynamic().bootstrapModule(AppModule);
82+
```html
83+
<ax-datagrid [columns]="columns" [rows]="rows"></ax-datagrid>
5184
```
5285

53-
See http://www.activewidgets.com/
86+
[Live example](https://angular.activewidgets.com/examples/local/columns/) | [Source on github](https://github.com/activewidgets/angular/tree/master/examples/columns) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/angular/tree/master/examples/columns)
87+
88+
89+
## User events
90+
91+
In addition to the standard DOM keyboard and mouse events the datagrid emits composite
92+
[mouse](https://docs.activewidgets.com/api/datagrid/mouse-event/) event which makes it easier to find the elements affected by the user action -
93+
94+
```js
95+
function onMouse({row, column}){
96+
alert(`row ${row.key} clicked!`);
97+
}
98+
```
99+
```html
100+
<ax-datagrid (mouse)="onMouse($event)" [columns]="columns" [rows]="rows"></ax-datagrid>
101+
```
102+
103+
[Live example](https://angular.activewidgets.com/examples/local/events/) | [Source on github](https://github.com/activewidgets/angular/tree/master/examples/events) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/angular/tree/master/examples/events)
104+
105+
## More info
106+
107+
- [Live demo](https://react.activewidgets.com)
108+
- [Developer guide](https://docs.activewidgets.com/guide/)
109+
- [API reference](https://docs.activewidgets.com/api/)
110+
- [Licensing](https://activewidgets.com/licenses/)
111+
- [Support forum](https://activewidgets.com/messages/)
112+
113+
114+
---
115+
116+
[![ActiveWidgets](https://activewidgets.com/include/logo/aw-logo-40.png)](https://activewidgets.com)

‎examples/events/src/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { columns, rows } from "@activewidgets/examples/data";
99
import './styles.css';
1010

1111

12-
const template = `<ax-datagrid [columns]="columns" [rows]="rows" (mouse)="onMouse($event)"></ax-datagrid>`;
12+
const template = `<ax-datagrid (mouse)="onMouse($event)" [columns]="columns" [rows]="rows"></ax-datagrid>`;
1313

1414

1515
export class App {

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,12 @@
8282
"url": "git+https://github.com/activewidgets/angular.git"
8383
},
8484
"keywords": [
85+
"activewidgets",
86+
"datagrid",
8587
"angular"
8688
],
8789
"bugs": {
8890
"url": "https://github.com/activewidgets/angular/issues"
8991
},
90-
"homepage": "https://github.com/activewidgets/angular#readme"
92+
"homepage": "https://activewidgets.com"
9193
}

0 commit comments

Comments
 (0)