Skip to content

Commit 1524ee3

Browse files
salamaashoushsalamaashoush
committed
update docs
1 parent 5f09cb0 commit 1524ee3

File tree

3 files changed

+107
-96
lines changed

3 files changed

+107
-96
lines changed

‎README.md

Lines changed: 2 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,5 @@
11
# Gridjs-workspace
22

3-
This project was generated using [Nx](https://nx.dev).
3+
This project is [Nx](https://nx.dev) workspace.
44

5-
<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="450"></p>
6-
7-
🔎 **Nx is a set of Extensible Dev Tools for Monorepos.**
8-
9-
## Quick Start & Documentation
10-
11-
[Nx Documentation](https://nx.dev/angular)
12-
13-
[10-minute video showing all Nx features](https://nx.dev/angular/getting-started/what-is-nx)
14-
15-
[Interactive Tutorial](https://nx.dev/angular/tutorial/01-create-application)
16-
17-
## Adding capabilities to your workspace
18-
19-
Nx supports many plugins which add capabilities for developing different types of applications and different tools.
20-
21-
These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.
22-
23-
Below are our core plugins:
24-
25-
- [Angular](https://angular.io)
26-
- `ng add @nrwl/angular`
27-
- [React](https://reactjs.org)
28-
- `ng add @nrwl/react`
29-
- Web (no framework frontends)
30-
- `ng add @nrwl/web`
31-
- [Nest](https://nestjs.com)
32-
- `ng add @nrwl/nest`
33-
- [Express](https://expressjs.com)
34-
- `ng add @nrwl/express`
35-
- [Node](https://nodejs.org)
36-
- `ng add @nrwl/node`
37-
38-
There are also many [community plugins](https://nx.dev/nx-community) you could add.
39-
40-
## Generate an application
41-
42-
Run `ng g @nrwl/angular:app my-app` to generate an application.
43-
44-
> You can use any of the plugins above to generate applications as well.
45-
46-
When using Nx, you can create multiple applications and libraries in the same workspace.
47-
48-
## Generate a library
49-
50-
Run `ng g @nrwl/angular:lib my-lib` to generate a library.
51-
52-
> You can also use any of the plugins above to generate libraries as well.
53-
54-
Libraries are sharable across libraries and applications. They can be imported from `@gridjs/mylib`.
55-
56-
## Development server
57-
58-
Run `ng serve my-app` for a dev server. Navigate to <http://localhost:4200/>. The app will automatically reload if you change any of the source files.
59-
60-
## Code scaffolding
61-
62-
Run `ng g component my-component --project=my-app` to generate a new component.
63-
64-
## Build
65-
66-
Run `ng build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
67-
68-
## Running unit tests
69-
70-
Run `ng test my-app` to execute the unit tests via [Jest](https://jestjs.io).
71-
72-
Run `nx affected:test` to execute the unit tests affected by a change.
73-
74-
## Running end-to-end tests
75-
76-
Run `ng e2e my-app` to execute the end-to-end tests via [Cypress](https://www.cypress.io).
77-
78-
Run `nx affected:e2e` to execute the end-to-end tests affected by a change.
79-
80-
## Understand your workspace
81-
82-
Run `nx dep-graph` to see a diagram of the dependencies of your projects.
83-
84-
## Further help
85-
86-
Visit the [Nx Documentation](https://nx.dev/angular) to learn more.
87-
88-
## ☁ Nx Cloud
89-
90-
### Computation Memoization in the Cloud
91-
92-
<p align="center"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-cloud-card.png"></p>
93-
94-
Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.
95-
96-
Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.
97-
98-
Visit [Nx Cloud](https://nx.app/) to learn more.
5+
Please check [Gridjs Angular](./libs/gridjs-angular/README.md) docs.

‎libs/gridjs-angular/README.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,106 @@
11
# gridjs-angular
22

33
Angular wrapper for [Gridjs](https://github.com/grid-js/gridjs)
4+
5+
## Install
6+
7+
```bash
8+
npm install gridjs gridjs-angular
9+
```
10+
11+
## Usage
12+
13+
In your module
14+
15+
```ts
16+
import { GridjsAngularModule } from 'gridjs-angular';
17+
18+
@NgModule({
19+
imports: [CommonModule,GridjsAngularModule],
20+
declarations: [...],
21+
exports: [...],
22+
})
23+
export class AppModule {}
24+
```
25+
26+
In your component template
27+
28+
```ts
29+
import { Component } from '@angular/core';
30+
import { GridJsConfig } from 'gridjs-angular';
31+
32+
@Component({
33+
template: `<gridjs-angular
34+
[gridConfig]="gridConfig"
35+
(cellClick)="handleCellClick($event)"
36+
(rowClick)="handleRowClick($event)"
37+
(beforeLoad)="handleBeforeLoad($event)"
38+
(gridLoad)="handleGridLoad($event)"
39+
></gridjs-angular>`,
40+
})
41+
class ExampleComponent {
42+
public gridConfig: GridJsConfig = {
43+
columns: ['Name', 'Email', 'Phone Number'],
44+
data: [
45+
['John', 'john@example.com', '(353) 01 222 3333'],
46+
['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
47+
['Eoin', 'eoin@gmail.com', '0097 22 654 00033'],
48+
['Sarah', 'sarahcdd@gmail.com', '+322 876 1233'],
49+
['Afshin', 'afshin@mail.com', '(353) 22 87 8356'],
50+
],
51+
};
52+
53+
handleCellClick(event: any) {
54+
console.log('cellClicked', event);
55+
}
56+
57+
handleRowClick(event: any) {
58+
console.log('rowClicked', event);
59+
}
60+
61+
handleBeforeLoad(event: any) {
62+
console.log('beforeLoad', event);
63+
}
64+
65+
handleGridLoad(event: any) {
66+
console.log('load', event);
67+
}
68+
}
69+
```
70+
71+
## Inputs
72+
73+
- You can pass all Grid.js configs to the `<gridjs-angular>` component as inputs. See [Grid.js Config](https://gridjs.io/docs/config) for more details.
74+
75+
- `gridConfig` You can all pass Gridjs config as one object and it will be merged other gridjs inputs.
76+
77+
- `plugins` Gridjs plugins array. See [Grid.js Plugins](https://gridjs.io/docs/plugin/basics)
78+
79+
## Outputs
80+
81+
- You can pass all Gridjs events as outputs with a little difference `load` event renamed to `beforeLoad`. See [Gridjs Events](https://gridjs.io/docs/examples/event-handler)
82+
83+
### Can I Grid.js rendering helpers? Yes
84+
85+
- Using `h` function is working fine. See this example plugin.
86+
87+
```ts
88+
{
89+
id: 'myplugin',
90+
component: h(() => h('h1', {}, 'Hello world!'), {}),
91+
position: PluginPosition.Header,
92+
}
93+
```
94+
95+
- You can also use `html` in column formatter like this.
96+
97+
```ts
98+
{
99+
name: 'Email',
100+
formatter: (_, row) => html(
101+
`<a href='mailto:${row.cells[1].data}'>${row.cells[1].data}</a>`
102+
)
103+
}
104+
```
105+
106+
### Can I use Angular components in plugins, formatters, etc? Not yet

‎libs/gridjs-angular/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": "0.0.1",
44
"peerDependencies": {
55
"@angular/common": "^9.0.0 || ^10.0.0",
6-
"@angular/core": "^9.0.0 || ^10.0.0"
6+
"@angular/core": "^9.0.0 || ^10.0.0",
7+
"gridjs": "^1.17.0"
78
},
89
"dependencies": {
910
"tslib": "^2.0.0"

0 commit comments

Comments
 (0)