Skip to content

Commit bd7ebe2

Browse files
xkamxkam
committed
readme
1 parent e3d5316 commit bd7ebe2

File tree

3 files changed

+135
-21
lines changed

3 files changed

+135
-21
lines changed

‎README.md

Lines changed: 131 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,146 @@
11

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

4-
## Fast datagrid component for Vue.js
4+
# ActiveWidgets/Vue • Datagrid
55

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

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

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

13-
```bash
14-
npm install @activewidgets/vue
15+
[![Datagrid demo](https://cdn.activewidgets.com/assets/screens/demo.png)](https://vue.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/vue](https://docs.activewidgets.com/api/packages/vue/) to your project dependencies -
26+
27+
```sh
28+
> npm i --save @activewidgets/vue
29+
```
30+
31+
## Usage
32+
33+
Now you can import ActiveWidgets component classes -
34+
35+
```js
36+
import { components } from "@activewidgets/vue";
1537
```
1638

17-
### Usage
39+
and register them with Vue.
1840

1941
```js
20-
import Vue from 'vue';
2142
import {components} from '@activewidgets/vue';
22-
import {columns, rows} from './data.js';
2343

24-
const data = {columns, rows};
44+
// ...
45+
46+
export default { components, data };
47+
```
48+
49+
It makes `ax-datagrid` and other `ax-...` tags available in your component template -
2550

26-
new Vue({
27-
el: '#app',
28-
template: '<ax-datagrid :rows="rows" :columns="columns"></ax-datagrid>',
29-
components: components,
30-
data: data
31-
});
51+
```html
52+
<template>
53+
<ax-datagrid :rows="rows"></ax-datagrid>
54+
</template>
3255
```
56+
[Live example](https://vue.activewidgets.com/examples/local/hello-world/) | [Source on github](https://github.com/activewidgets/vue/tree/master/examples/hello-world) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/vue/tree/master/examples/hello-world)
57+
58+
## CDN links
59+
60+
For quick prototyping the package is also available over ActiveWidgets CDN -
61+
62+
```html
63+
<script src="https://cdn.activewidgets.com/vue"></script>
64+
```
65+
66+
In this case you will find the components at `ActiveWidgets.Vue` global namespace.
67+
68+
```js
69+
var components = ActiveWidgets.Vue.components;
70+
71+
// or
72+
73+
var Datagrid = ActiveWidgets.Vue.Datagrid;
74+
```
75+
76+
## Data properties
77+
78+
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 -
79+
80+
- [field](https://docs.activewidgets.com/api/datagrid/columns/#field) - where the cell data comes from (string|function)
81+
- [header](https://docs.activewidgets.com/api/datagrid/columns/#header) - column header (string|object)
82+
- [width](https://docs.activewidgets.com/api/datagrid/columns/#width) - column width (number, in pixels)
83+
- [align](https://docs.activewidgets.com/api/datagrid/columns/#align) - cell text alignment (left|right|center)
84+
- [format](https://docs.activewidgets.com/api/datagrid/columns/#format) - number/date format (string|function)
85+
- [fixed](https://docs.activewidgets.com/api/datagrid/columns/#fixed) - fixed (true/false) for columns on the left or right side
86+
87+
The `style` (string|object) or `className` properties allow to change the styling of the column and cell elements.
88+
89+
```js
90+
function data(){
91+
92+
const columns = [
93+
{header: 'Code', field: 'customerID', style: 'background:#def', fixed: true},
94+
{header: 'Company Name', field: 'companyName', width: 160},
95+
{header: 'Contact', field: 'contactName', width: 120},
96+
{header: 'Title', field: 'contactTitle', width: 120},
97+
{header: 'Address', field: 'address', width: 120, align: right}
98+
];
99+
100+
const rows = northwind.customers;
101+
102+
return { columns, rows };
103+
}
104+
```
105+
106+
```html
107+
<template>
108+
<ax-datagrid :columns="columns" :rows="rows"></ax-datagrid>
109+
</template>
110+
```
111+
[Live example](https://vue.activewidgets.com/examples/local/columns/) | [Source on github](https://github.com/activewidgets/vue/tree/master/examples/columns) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/vue/tree/master/examples/columns)
112+
113+
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}){
121+
alert(`row ${row.key} clicked!`);
122+
}
123+
124+
const methods = { onMouse };
125+
export default { components, data, methods };
126+
```
127+
128+
```html
129+
<template>
130+
<ax-datagrid @mouse="onMouse" :columns="columns" :rows="rows"></ax-datagrid>
131+
</template>
132+
```
133+
[Live example](https://vue.activewidgets.com/examples/local/events/) | [Source on github](https://github.com/activewidgets/vue/tree/master/examples/events) | [Edit on Codesandbox](https://codesandbox.io/s/github/activewidgets/vue/tree/master/examples/events)
134+
135+
## More info
136+
137+
- [Live demo](https://react.activewidgets.com)
138+
- [Developer guide](https://docs.activewidgets.com/guide/)
139+
- [API reference](https://docs.activewidgets.com/api/)
140+
- [Licensing](https://activewidgets.com/licenses/)
141+
- [Support forum](https://activewidgets.com/messages/)
142+
143+
144+
---
33145

34-
See http://www.activewidgets.com/
146+
[![ActiveWidgets](https://activewidgets.com/include/logo/aw-logo-40.png)](https://activewidgets.com)

‎examples/events/src/app.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
<template>
3-
<ax-datagrid :columns="columns" :rows="rows" @mouse="onMouse"></ax-datagrid>
3+
<ax-datagrid @mouse="onMouse" :columns="columns" :rows="rows"></ax-datagrid>
44
</template>
55
<script>
66

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,12 @@
7272
"url": "git+https://github.com/activewidgets/vue.git"
7373
},
7474
"keywords": [
75+
"activewidgets",
76+
"datagrid",
7577
"vue"
7678
],
7779
"bugs": {
7880
"url": "https://github.com/activewidgets/vue/issues"
7981
},
80-
"homepage": "https://github.com/activewidgets/vue#readme"
82+
"homepage": "https://activewidgets.com"
8183
}

0 commit comments

Comments
 (0)