Skip to content

Commit 29142ba

Browse files
Portugal, Marcelomportuga
Portugal, Marcelo
authored and
mportuga
committed
docs(ui-grid): add README to all packages
Also, add missing dependency for importer.
1 parent a86eb0e commit 29142ba

File tree

22 files changed

+1541
-1
lines changed

22 files changed

+1541
-1
lines changed

‎packages/auto-resize/README.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# UI-Grid Auto Resize
2+
3+
The auto-resize plugin for [UI-Grid](https://www.npmjs.com/package/@ui-grid/core) enables the grid to resize itself when its container changes size.
4+
5+
> **Note:** This plugin works by adding a checker on 250ms interval that sees if the grid element has changed in size. It could potentially affect the performance of your site or application negatively.
6+
7+
## Getting Started
8+
9+
You can install `@ui-grid/auto-resize` via:
10+
11+
```shell
12+
npm i --save @ui-grid/auto-resize
13+
```
14+
15+
Once you install you need to load our main file bellow your `@ui-grid/core` file as seen bellow:
16+
17+
```html
18+
<script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">
19+
<script src="/node_modules/@ui-grid/auto-resize/js/ui-grid.auto-resize.min.js">
20+
```
21+
22+
Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:
23+
24+
```javascript
25+
require('@ui-grid/core');
26+
require('@ui-grid/auto-resize');
27+
```
28+
29+
Once you load the file, you need to include **'ui.grid.autoResize'** module in your angularJS app's dependencies, and add the **ui-grid-auto-resize** directive to your grid element.
30+
31+
```javascript
32+
angular.module('myApp', [
33+
'ui.grid',
34+
'ui.grid.autoResize'
35+
]);
36+
```
37+
38+
```html
39+
<div ui-grid="$ctrl.gridOptions" ui-grid-auto-resize>
40+
```
41+
42+
### Example
43+
44+
You can find an example of this plugin in action on our [website](http://ui-grid.info/docs/#!/tutorial/Tutorial:%20213%20Auto-Resizing)
45+
46+
## License
47+
48+
[MIT](https://github.com/angular-ui/ui-grid/blob/master/LICENSE.md)

‎packages/cellnav/README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# UI-Grid Cell Navigation
2+
3+
The cell navigation plugin for [UI-Grid](https://www.npmjs.com/package/@ui-grid/core) allows you to navigate around the grid using the arrow keys, pg-down and pg-up, enter (moves down), shift-enter (moves up), tab (moves right) and shift-tab (moves left). When combined with the editable feature, the left-right arrow keys will be subsumed when in "deep edit" mode, allowing you to move around within the text you're editing. The tab key and shift-tab keys continue to function.
4+
5+
## Getting Started
6+
7+
You can install `@ui-grid/cellnav` via:
8+
9+
```shell
10+
npm i --save @ui-grid/cellnav
11+
```
12+
13+
Once you install you need to load the respective JS and CSS files as seen bellow:
14+
15+
```html
16+
<link rel="stylesheet" href="/node_modules/@ui-grid/core/css/ui-grid.min.css" type="text/css">
17+
<link rel="stylesheet" href="/node_modules/@ui-grid/cellnav/css/ui-grid.cellnav.min.css" type="text/css">
18+
<script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">
19+
<script src="/node_modules/@ui-grid/cellnav/js/ui-grid.cellnav.min.js">
20+
```
21+
22+
Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:
23+
24+
```javascript
25+
require('@ui-grid/core');
26+
require('@ui-grid/cellnav');
27+
```
28+
29+
Once you load the file, you need to include **'ui.grid.cellNav'** module in your angularJS app's dependencies, and add the **ui-grid-cellNav** directive to your grid element.
30+
31+
```javascript
32+
angular.module('myApp', [
33+
'ui.grid',
34+
'ui.grid.cellNav'
35+
]);
36+
```
37+
38+
```html
39+
<div ui-grid="$ctrl.gridOptions" ui-grid-cellNav>
40+
```
41+
42+
### Example
43+
44+
You can find an example of this plugin in action on our [website](http://ui-grid.info/docs/#!/tutorial/Tutorial:%20202%20Cell%20Navigation)
45+
46+
## API Documentation
47+
48+
Documentation for this plugin is provided in the [api documentation](http://ui-grid.info/docs/#!/api/), but we recommend that you pay special attention to the following:
49+
50+
* [columnDef](http://ui-grid.info/docs/#!/api/ui.grid.cellNav.api:ColumnDef)
51+
* [gridOptions](http://ui-grid.info/docs/#!/api/ui.grid.cellNav.api:GridOptions)
52+
* [publicApi](http://ui-grid.info/docs/#!/api/ui.grid.cellNav.api:PublicApi)
53+
54+
## Issues
55+
56+
You can find issues that are specific to this UI-Grid plugin by looking for the label [grid-cellNav](https://github.com/angular-ui/ui-grid/labels/grid-cellNav) in the [ui-grid github issues](https://github.com/angular-ui/ui-grid/issues) page.
57+
58+
## License
59+
60+
[MIT](https://github.com/angular-ui/ui-grid/blob/master/LICENSE.md)

‎packages/core/README.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# UI-Grid Core
2+
3+
UI-Grid (formerly ng-grid), is a 100% angularJS grid written with no dependencies other than AngularJS. It is designed around a core grid module and plugins are layered on as angular modules and directives. This keeps the core small and focused while executing very complex features only when you need them.
4+
5+
In the core module, you get:
6+
7+
* Virtualized rows and columns - only the rows and columns visible in the viewport (+ some extra margin) are actually rendered
8+
* Bind cells to complex properties and functions
9+
* Column sorting with three states: Asc, Desc, None
10+
* Column filtering
11+
* Ability to change header and cell contents with custom templates
12+
* i18nService that allows label translations, with the english translations already loaded.
13+
14+
## Getting Started
15+
16+
You can install `@ui-grid/core` via:
17+
18+
```shell
19+
npm i --save @ui-grid/core
20+
```
21+
22+
Once you install you need to load the respective JS and CSS files as seen bellow:
23+
24+
```html
25+
<link rel="stylesheet" href="/node_modules/@ui-grid/core/css/ui-grid.min.css" type="text/css">
26+
<script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">
27+
```
28+
29+
Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:
30+
31+
```javascript
32+
require('@ui-grid/core');
33+
```
34+
35+
Once you load the file, you need to include **'ui.grid'** module in your angularJS app's dependencies, and add the **ui-grid** directive to your page.
36+
37+
```javascript
38+
angular.module('myApp', [
39+
'ui.grid'
40+
]);
41+
```
42+
43+
```html
44+
<div ui-grid="$ctrl.gridOptions">
45+
```
46+
47+
And don't forget to load your data:
48+
49+
```javascript
50+
this.gridOptions = {
51+
data: [
52+
{name: 'Hobie Brown', company: 'Parker Industries', position: 'Head of Security'},
53+
{name: 'Jacob Fury', company: 'Stark Industries', position: 'Research Scientist'},
54+
{name: 'Max Dillon', company: 'Oscorp', position: 'Elitrical Engineer'}
55+
]
56+
};
57+
```
58+
59+
### Example
60+
61+
You can find an example of this component in action on our [website](http://ui-grid.info/docs/#!/tutorial/Tutorial:%20101%20Intro%20to%20UI-Grid)
62+
63+
## API Documentation
64+
65+
Documentation for the grid is provided in the [api documentation](http://ui-grid.info/docs/#!/api/), but we recommend that you pay special attention to the following:
66+
67+
* [columnDef](http://ui-grid.info/docs/#!/api/ui.grid.class:GridColumn)
68+
* [gridOptions](http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions)
69+
* [publicApi](http://ui-grid.info/docs/#!/api/ui.grid.api:PublicApi)
70+
71+
## Issues
72+
73+
You can find issues that are specific to the core UI-Grid by looking for the label [grid-core](https://github.com/angular-ui/ui-grid/labels/grid-core) in the [ui-grid github issues](https://github.com/angular-ui/ui-grid/issues) page.
74+
75+
## License
76+
77+
[MIT](https://github.com/angular-ui/ui-grid/blob/master/LICENSE.md)

‎packages/edit/README.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# UI-Grid Edit
2+
3+
The edit plugin for [UI-Grid](https://www.npmjs.com/package/@ui-grid/core) allows inline editing of grid data.
4+
5+
## Getting Started
6+
7+
You can install `@ui-grid/edit` via:
8+
9+
```shell
10+
npm i --save @ui-grid/edit
11+
```
12+
13+
Once you install you need to load the respective JS and CSS files as seen bellow:
14+
15+
```html
16+
<link rel="stylesheet" href="/node_modules/@ui-grid/core/css/ui-grid.min.css" type="text/css">
17+
<link rel="stylesheet" href="/node_modules/@ui-grid/edit/css/ui-grid.edit.min.css" type="text/css">
18+
<script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">
19+
<script src="/node_modules/@ui-grid/edit/js/ui-grid.edit.min.js">
20+
```
21+
22+
Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:
23+
24+
```javascript
25+
require('@ui-grid/core');
26+
require('@ui-grid/edit');
27+
```
28+
29+
Once you load the file, you need to include **'ui.grid.edit'** module in your angularJS app's dependencies, and add the **ui-grid-edit** directive to your grid element.
30+
31+
```javascript
32+
angular.module('myApp', [
33+
'ui.grid',
34+
'ui.grid.edit'
35+
]);
36+
```
37+
38+
```html
39+
<div ui-grid="$ctrl.gridOptions" ui-grid-edit>
40+
```
41+
42+
You can use the enableCellEdit options in your column definitions to allow a column to be editable.
43+
44+
Editing is invoked via double-click, f2, or start typing any non-navigable key. Cell editing ends on tab, enter or esc (cancel) on an input editor, and tab, left or right arrows, enter or esc for a dropdown.
45+
46+
By default an input element is provided, with numeric, date and checkbox editors for fields specified as 'number', 'date' and 'boolean' types, for all other fields a simple text editor is provided. (A point to note about date editors is that for date editors to be enabled the datatype of the variable should also be "Date").
47+
48+
A dropdown editor is also available, through setting the editableCellTemplate on the columnDef to 'ui-grid/dropdownEditor'. When using a dropdown editor you need to provide an options array through the editDropdownOptionsArray property on the columnDef. This array by default should be an array of {id: xxx, value: xxx}, although the field tags can be changed through using the editDropdownIdLabel and editDropdownValueLabel options.
49+
50+
A file chooser is available, through setting the 'editableCellTemplateon thecolumnDefto'ui-grid/fileChooserEditor'`. This file chooser will open the file chosen by the user and assign the value of that file to the model element. In the example below we use the file chooser to load a file, and we display the filename in the cell. The file is stored against the row in a hidden column, which we can save to our server or otherwise process.
51+
52+
Custom edit templates should be used for any editor other than the default editors, but be aware that you will likely also need to provide a custom directive similar to the uiGridEditor directive so as to provide BEGIN_CELL_EDIT, CANCEL_CELL_EDIT and END_CELL_EDIT events.
53+
54+
### Example
55+
56+
You can find an example of this plugin in action on our [website](http://ui-grid.info/docs/#!/tutorial/Tutorial:%20201%20Edit%20Feature)
57+
58+
## API Documentation
59+
60+
Documentation for this plugin is provided in the [api documentation](http://ui-grid.info/docs/#!/api/), but we recommend that you pay special attention to the following:
61+
62+
* [columnDef](http://ui-grid.info/docs/#!/api/ui.grid.edit.api:ColumnDef)
63+
* [gridOptions](http://ui-grid.info/docs/#!/api/ui.grid.edit.api:GridOptions)
64+
* [publicApi](http://ui-grid.info/docs/#!/api/ui.grid.edit.api:PublicApi)
65+
66+
## Issues
67+
68+
You can find issues that are specific to this UI-Grid plugin by looking for the label [grid-edit](https://github.com/angular-ui/ui-grid/labels/grid-edit) in the [ui-grid github issues](https://github.com/angular-ui/ui-grid/issues) page.
69+
70+
## License
71+
72+
[MIT](https://github.com/angular-ui/ui-grid/blob/master/LICENSE.md)

‎packages/empty-base-layer/README.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# UI-Grid Empty Base Layer
2+
3+
The empty base layer plugin for [UI-Grid](https://www.npmjs.com/package/@ui-grid/core) provides the ability to have the background of the grid be empty rows, this would be displayed in the case were the grid height is greater then the amount of rows displayed.
4+
5+
## Getting Started
6+
7+
You can install `@ui-grid/empty-base-layer` via:
8+
9+
```shell
10+
npm i --save @ui-grid/empty-base-layer
11+
```
12+
13+
Once you install you need to load the respective JS and CSS files as seen bellow:
14+
15+
```html
16+
<link rel="stylesheet" href="/node_modules/@ui-grid/core/css/ui-grid.min.css" type="text/css">
17+
<link rel="stylesheet" href="/node_modules/@ui-grid/empty-base-layer/css/ui-grid.empty-base-layer.min.css" type="text/css">
18+
<script src="/node_modules/@ui-grid/core/js/ui-grid.core.min.js">
19+
<script src="/node_modules/@ui-grid/empty-base-layer/js/ui-grid.empty-base-layer.min.js">
20+
```
21+
22+
Alternatively, if you are using Webpack or RequireJS to load your dependencies, you can do the following at the top of the file that needs it:
23+
24+
```javascript
25+
require('@ui-grid/core');
26+
require('@ui-grid/empty-base-layer');
27+
```
28+
29+
Once you load the file, you need to include **'ui.grid.emptyBaseLayer'** module in your angularJS app's dependencies, and add the **ui-grid-empty-base-layer** directive to your grid element.
30+
31+
```javascript
32+
angular.module('myApp', [
33+
'ui.grid',
34+
'ui.grid.emptyBaseLayer'
35+
]);
36+
```
37+
38+
```html
39+
<div ui-grid="$ctrl.gridOptions" ui-grid-empty-base-layer>
40+
```
41+
42+
### Example
43+
44+
You can find an example of this plugin in action on our [website](http://ui-grid.info/docs/#!/tutorial/Tutorial:%20218%20Empty%20Grid%20Base%20Layer)
45+
46+
## API Documentation
47+
48+
Documentation for this plugin is provided in the [api documentation](http://ui-grid.info/docs/#!/api/), but we recommend that you pay special attention to the following:
49+
50+
* [gridOptions](http://ui-grid.info/docs/#!/api/ui.grid.emptyBaseLayer.api:GridOptions)
51+
* [directive](http://ui-grid.info/docs/#!/api/ui.grid.emptyBaseLayer.directive:uiGridEmptyBaseLayer)
52+
53+
## Issues
54+
55+
You can find issues that are specific to this UI-Grid plugin by looking for the label [grid-empty-base-layer](https://github.com/angular-ui/ui-grid/labels/grid-empty-base-layer) in the [ui-grid github issues](https://github.com/angular-ui/ui-grid/issues) page.
56+
57+
## License
58+
59+
[MIT](https://github.com/angular-ui/ui-grid/blob/master/LICENSE.md)

0 commit comments

Comments
 (0)