DataTable Component for Angular 2
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.
Install
npm install --save ng2-alfresco-datatable
Dependencies
You must separately install the following libraries for your application:
npm install --save ng2-translate ng2-alfresco-core
Material Design Lite
The style of this component is based on material design, so if you want to visualize it correctly you have to add the material design dependency to your project:
npm install --save material-design-icons material-design-lite
Also make sure you include these dependencies in your index.html file:
<!-- 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">
Basic usage example
my.component.ts
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';
@Component({
selector: 'my-view',
template: `<alfresco-datatable [data]="data">
</alfresco-datatable>`,
directives: [ALFRESCO_DATATABLE_DIRECTIVES, CONTEXT_MENU_DIRECTIVES],
providers: [CONTEXT_MENU_PROVIDERS]
})
export class MyView {
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
}
]
);
}
}
Properties
| 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 |
Events
| Name | Description |
|---|---|
| rowClick | Emitted when user clicks the row |
| rowDblClick | Emitted when user double-clicks the row |
| showRowContextMenu | Emitted before context menu is displayed for a row |
| showRowActionsMenu | Emitted before actions menu is displayed for a row |
| executeRowAction | Emitted when row action is executed by user |
Advanced usage example
<alfresco-datatable
[data]="data"
[actions]="contentActions"
[multiselect]="multiselect"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowDblClick)="onRowDblClick($event)">
<no-content-template>
<template>
<h1>Sorry, no content</h1>
</template>
</no-content-template>
</alfresco-datatable>
rowClick event
This event is emitted when user clicks the row.
Event properties:
row: DataRow, // row clicked
event: Event // original HTML DOM event
Handler example:
onRowClicked(event) {
console.log(event.row);
}
rowDblClick event
This event is emitted when user double-clicks the row.
Event properties:
row: DataRow, // row clicked
event: Event // original HTML DOM event
Handler example:
onRowDblClicked(event) {
console.log(event.row);
}
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:
args: {
row: DataRow,
col: DataColumn,
actions: []
}
Handler example:
onShowRowContextMenu(event) {
event.args.actions = [
{ ... },
{ ... }
]
}
DataTable will automatically render provided menu items.
Please refer to ContextMenu 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.
Note that DataTable itself does not populate action menu items, you can provide all necessary content via handler.
Event properties:
args: {
row: DataRow,
col: DataColumn,
actions: []
}
Handler example:
onShowRowActionsMenu(event) {
event.args.actions = [
{ ... },
{ ... }
]
}
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.
Event properties:
args: {
row: DataRow
action: any
}
Handler example:
onExecuteRowAction(event) {
// get event arguments
let row = event.args.row;
let action = event.args.action;
// your code to execute action
this.executeContentAction(row, action);
}
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:
interface DataTableAdapter {
generateSchema(row: DataRow): col: DataColumn;
getRows(): Array<DataRow>;
setRows(rows: Array<DataRow>): void;
getColumns(): Array<DataColumn>;
setColumns(columns: Array<DataColumn>): 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;
}
DataTable provides ObjectDataTableAdapter out-of-box. This is a simple data adapter implementation that binds to object arrays and turns object fields into columns:
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
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
}
]
*/
Build from sources
Alternatively you can build component from sources with the following commands:
npm install
npm run build
Build the files and keep watching for changes
$ npm run build:w
Running unit tests
npm test
Running unit tests in browser
npm test-browser
This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.
Code coverage
npm run coverage