See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
## Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install
Follow the 3 steps below:
1. Npm
```sh
npm install ng2-alfresco-datatable --save
```
2. Html
Include these dependencies in your index.html page:
```html
```
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
**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, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
@Component({
selector: 'alfresco-app-demo',
template: `
`
})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
// schema
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
cssClass: 'full-width',
sortable: true
}
]
);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule.forRoot()
],
declarations: [DataTableDemo],
bootstrap: [DataTableDemo]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```
You can also use HTML-based schema declaration like shown below:
```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, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
@Component({
selector: 'alfresco-app-demo',
template: `
`
})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{
id: 1,
name: 'Name 1',
createdBy : { name: 'user'},
createdOn: 123,
icon: 'http://example.com/img.png'
},
{
id: 2,
name: 'Name 2',
createdBy : { name: 'user 2'},
createdOn: 123,
icon: 'http://example.com/img.png'
}
]
);
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
DataTableModule.forRoot()
],
declarations: [DataTableDemo],
bootstrap: [DataTableDemo]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
```
### DataTable Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
| `rows` | Object[] | [] | The rows that the datatable should show |
| `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| `actions` | boolean | false | Toggles data actions column |
| `actionsPosition` | string (left\|right) | right | Position of the actions dropdown menu. |
| `fallbackThumbnail` | string | | Fallback image for row ehre thubnail is missing|
| `contextMenu` | boolean | false | Toggles custom context menu for the component |
| `allowDropFiles` | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
### DataColumn Properties
Here's the list of available properties you can define for a Data Column definition.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
| type | string (text\|image\|date) | text | Value type |
| format | string | | Value format (if supported by components), for example format of the date |
| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
| title | string | | Display title of the column, typically used for column headers |
| template | `TemplateRef` | | Custom column template |
| sr-title | string | | Screen reader title, used for accessibility purposes |
| class | string | | Additional CSS class to be applied to column (header and cells) |
### DataTable Events
| Name | Description
| --- | --- |
| [rowClick](#rowclick-event) | Emitted when user clicks the row |
| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
### DataTable DOM Events
Below are the DOM events raised by DataTable component.
| Name | Description |
| --- | --- |
| row-click | Emitted when user clicks the row |
| row-dblclick | Emitted when user double-clicks the row |
These events are bubbled up the element tree and can be subscribed to from within parent components.
```html
```
```ts
onRowClick(event) {
console.log(event);
}
```
### Advanced usage
```html
Sorry, no content
```
#### Column Templates
It is possible assigning a custom column template like the following:
```html
V. {{value}}
```
Example above shows access to the underlying cell value by binding `value` property to the underlying context `value`:
```html
```
Alternatively you can get access to the entire data context using the following syntax:
```html
```
That means you are going to create local variable `entry` that is bound to the data context via Angular's special `$implicit` keyword.
```html
V. {{entry.data.getValue(entry.row, entry.col)}}
```
In the second case `entry` variable is holding a reference to the following data context:
```ts
{
data: DataTableAdapter,
row: DataRow,
col: DataColumn
}
```
#### rowClick event
_This event is emitted when user clicks the row._
Event properties:
```ts
sender: any // DataTable instance
value: DataRow, // row clicked
event: Event // original HTML DOM event
```
Handler example:
```ts
onRowClicked(event: DataRowEvent) {
console.log(event.value);
}
```
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
#### rowDblClick event
_This event is emitted when user double-clicks the row._
Event properties:
```ts
sender: any // DataTable instance
value: DataRow, // row clicked
event: Event // original HTML DOM event
```
Handler example:
```ts
onRowDblClicked(event: DataRowEvent) {
console.log(event.value);
}
```
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
#### showRowContextMenu event
_Emitted before context menu is displayed for a row._
Note that DataTable itself does not populate context menu items,
you can provide all necessary content via handler.
Event properties:
```ts
value: {
row: DataRow,
col: DataColumn,
actions: []
}
```
Handler example:
```ts
onShowRowContextMenu(event: DataCellEvent) {
event.value.actions = [
{ ... },
{ ... }
]
}
```
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
DataTable will automatically render provided menu items.
_Please refer to [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
documentation for more details on context actions format and behavior._
#### showRowActionsMenu event
_Emitted before actions menu is displayed for a row.
Requires `actions` property to be set to `true`._
Event properties:
```ts
value: {
row: DataRow,
action: any
}
```
Note that DataTable itself does not populate action menu items,
you can provide all necessary content via handler.
_This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour._
#### executeRowAction event
_Emitted when row action is executed by user._
Usually accompanies `showRowActionsMenu` event.
DataTable itself does not execute actions but provides support for external
integration. If there were actions provided with `showRowActionsMenu` event
then `executeRowAction` will be automatically executed when user clicks
corresponding menu item.
```html
```
```ts
import { DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
onShowRowActionsMenu(event: DataCellEvent) {
let myAction = {
title: 'Hello'
// your custom metadata needed for onExecuteRowAction
};
event.value.actions = [
myAction
];
}
onExecuteRowAction(event: DataRowActionEvent) {
let args = event.value;
console.log(args.row);
console.log(args.action);
window.alert(`My custom action: ${args.action.title}`);
}
```
Developers are allowed putting any payloads as row actions.
The only requirement for the objects is having `title` property.
Once corresponding action is clicked in the dropdown menu DataTable invokes `executeRowAction` event
where you can handle the process, inspect the action payload and all custom properties defined earlier,
and do corresponding actions.
## Data sources
DataTable component gets data by means of data adapter.
It is possible having data retrieved from different kinds of sources by implementing
a custom `DataTableAdapter` using the following interfaces:
```ts
interface DataTableAdapter {
selectedRow: DataRow;
getRows(): Array;
setRows(rows: Array): void;
getColumns(): Array;
setColumns(columns: Array): void;
getValue(row: DataRow, col: DataColumn): any;
getSorting(): DataSorting;
setSorting(sorting: DataSorting): void;
sort(key?: string, direction?: string): void;
}
interface DataRow {
isSelected: boolean;
hasValue(key: string): boolean;
getValue(key: string): any;
}
interface DataColumn {
key: string;
type: string; // text|image|date
format?: string;
sortable?: boolean;
title?: string;
srTitle?: string;
cssClass?: string;
template?: TemplateRef;
}
```
DataTable provides [ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts) out-of-box.
This is a simple data adapter implementation that binds to object arrays
and turns object fields into columns:
```ts
let data = new ObjectDataTableAdapter(
// data
[
{ id: 1, name: 'Name 1' },
{ id: 2, name: 'Name 2' }
],
// schema
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
]
);
```
## Generate schema
Is possible to auto generate your schema if you have only the data row
```ts
let data = [
{ id: 2, name: 'abs' },
{ id: 1, name: 'xyz' }
];
let schema = ObjectDataTableAdapter.generateSchema(data);
/*Auto generated schema value:
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: false
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: false
}
]
*/
```
# Pagination Component
The pagination object is a generic component to paginate component. The Alfresco API are paginated and returns a Pagination object. You can use the pagination object to feed the pagination component and then listen to the event which return the current pagination and query again the API with the options choose by the user.
### Properties
| Name | Type | Default | Description
| --- | --- | --- | --- |
| `supportedPageSizes` | numer[] | [5, 10, 20, 50, 100] | This array describe the set of options showed in the pick list |
| `maxItems` | boolean | false | Max number of element showed per page. If you pick another size from the pick list this option will be overwritten |
| `pagination` | Pagination | {count: 0, totalItems: 0, skipCount: 0, maxItems: 20 , hasMoreItems: true} | The Alfresco Api return a pagination object, you can use it to feed the pagination component, or create your own. |
### Events
| Name | Description
| --- | --- |
| `changePageSize` | Emitted when user picks one of the options from the pick list |
| `nextPage` | Emitted when user clicks next page button |
| `prevPage` | Emitted when user clicks prev page button |
All the events carry with them the current pagination object.
## Build from sources
Alternatively you can build component from sources with the following commands:
```sh
npm install
npm run build
```
### Build the files and keep watching for changes
```sh
$ npm run build:w
```
## Running unit tests
```sh
npm test
```
### Running unit tests in browser
```sh
npm test-browser
```
This task rebuilds all the code, runs tslint, license checks and other quality check tools
before performing unit testing.
### Code coverage
```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
```
## NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
## License
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
