#878 doc and demo datatable

2025-07-24 17:32:15 +00:00 · 2016-11-09 00:11:26 +00:00
parent 76f17b2e74
commit e778940f94
3 changed files with 109 additions and 99 deletions
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -39,38 +39,57 @@ necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng

 ## Install

-```sh
-npm install --save ng2-alfresco-datatable
-```
+Follow the 3 steps below:

-### Dependencies
+1. Npm

-You must separately install the following libraries for your application:
+    ```sh
+    npm install ng2-alfresco-datatable --save
+    ```

- [ng2-translate](https://github.com/ocombe/ng2-translate)
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
+2. Html

-```sh
-npm install --save ng2-translate ng2-alfresco-core
-```
+    Include these dependencies in your index.html page:

-#### Material Design Lite
+    ```html

-The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
-design dependency to your project:
+    <!-- Google Material Design Lite -->
+    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+    <script src="node_modules/material-design-lite/material.min.js"></script>
+    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">

-```sh
-npm install --save material-design-icons material-design-lite
-```
+    <!-- Polyfill(s) for Safari (pre-10.x) -->
+    <script src="node_modules/intl/dist/Intl.min.js"></script>
+    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>

-Also make sure you include these dependencies in your `index.html` file:
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
+    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>

-```html
-<!-- Google Material Design Lite -->
-<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-<script src="node_modules/material-design-lite/material.min.js"></script>
-<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-```
+    <!-- Polyfill(s) for dialogs -->
+    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
+    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+    <style>._dialog_overlay { position: static !important; } </style>
+
+    <!-- Modules  -->
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    ```
+
+3. SystemJs
+
+    Add the following components to your systemjs.config.js file:
+
+    - ng2-translate
+    - alfresco-js-api
+    - ng2-alfresco-core
+    - ng2-alfresco-datatable
+
+    Please refer to the following example file: [systemjs.config.js](demo/systemjs
+    .config.js) .

 ## Basic usage example

@@ -78,32 +97,33 @@ Also make sure you include these dependencies in your `index.html` file:
 **my.component.ts**

 ```ts
+
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { CoreModule } from 'ng2-alfresco-core';
+import { DataTableModule }  from 'ng2-alfresco-datatable';
+import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 import { Component } from '@angular/core';
-import { 
-    CONTEXT_MENU_DIRECTIVES, 
-    CONTEXT_MENU_PROVIDERS 
-} from 'ng2-alfresco-core';
-import {
-    ALFRESCO_DATATABLE_DIRECTIVES,
-    ObjectDataTableAdapter
-} from 'ng2-alfresco-datatable';
+import { CONTEXT_MENU_DIRECTIVES, CONTEXT_MENU_PROVIDERS } from 'ng2-alfresco-core';
+import { ALFRESCO_DATATABLE_DIRECTIVES, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';

@Component({
-    selector: 'my-view',
+    selector: 'alfresco-app-demo',
    template: `<alfresco-datatable [data]="data">
        </alfresco-datatable>`,
    directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
    providers: [CONTEXT_MENU_PROVIDERS]
 })
-export class MyView {
+export class DataTableDemo {
    data: ObjectDataTableAdapter;

    constructor() {
        this.data = new ObjectDataTableAdapter(
            // data
            [
-                { id: 1, name: 'Name 1' },
-                { id: 2, name: 'Name 2' }
+                {id: 1, name: 'Name 1'},
+                {id: 2, name: 'Name 2'}
            ],
            // schema
            [
@@ -124,6 +144,22 @@ export class MyView {
        );
    }
 }
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        CoreModule.forRoot(),
+        DataTableModule
+    ],
+    declarations: [DataTableDemo],
+    bootstrap: [DataTableDemo]
+})
+export class AppModule {
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
 ```

 ![DataTable demo](docs/assets/datatable-demo.png)
@@ -132,10 +168,10 @@ export class MyView {

 | Name | Type | Default | Description
 | --- | --- | --- | --- |
-| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
-| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
-| actions | boolean | false | Toggles data actions column |
-| fallbackThubnail | string |  | Fallback image for row ehre thubnail is missing|
+| `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
+| `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
+| `actions` | boolean | false | Toggles data actions column |
+| `fallbackThubnail` | string |  | Fallback image for row ehre thubnail is missing|

 ### Events

@@ -366,6 +402,7 @@ let data = new ObjectDataTableAdapter(
 ```

 ## Generate schema 
+
 Is possible to auto generate your schema if you have only the data row  

 ```ts
@@ -397,11 +434,11 @@ let schema = ObjectDataTableAdapter.generateSchema(data);

 ```

-
 ## Build from sources

 Alternatively you can build component from sources with the following commands:

+
 ```sh
 npm install
 npm run build
@@ -413,7 +450,7 @@ npm run build
 $ npm run build:w
 ```

-### Running unit tests
+## Running unit tests

 ```sh
 npm test
@@ -433,3 +470,17 @@ before performing unit testing.
 ```sh
 npm run coverage
 ```
+
+## Demo
+
+If you want have a demo of how the component works, please check the demo folder :
+
+```sh
+cd demo
+npm install
+npm start
+```
+
+## License
+
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@@ -22,30 +22,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "license-check": "1.1.5",
-
-    "ng2-translate": "2.5.0",
-    "ng2-alfresco-core": "0.3.2",
-    "ng2-alfresco-datatable": "0.3.2",
-
-    "material-design-icons": "2.2.3",
-    "material-design-lite": "1.2.1"
+    "ng2-alfresco-datatable": "0.3.2"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.32",
--- a/ng2-components/ng2-alfresco-datatable/package.json
+++ b/ng2-components/ng2-alfresco-datatable/package.json
@@ -44,24 +44,6 @@
    "alfresco"
  ],
  "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
-    "@types/node": "^6.0.42",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.27",
-    "zone.js": "^0.6.23",
-
-    "alfresco-js-api": "^0.3.0",
-    "ng2-translate": "2.5.0",
    "ng2-alfresco-core": "0.3.2"
  },
  "devDependencies": {