diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index 6d9dda7dae..d94a188f31 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -102,9 +102,10 @@
class="image-table-cell">
+ title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
+ key="name"
+ [formatTooltip]="getNodeNameTooltip"
+ class="full-width ellipsis-cell">
-
+
```
The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
@@ -567,12 +568,12 @@ context.row.getValue('createdByUser.displayName')
You may want using **row** api to get raw value access.
```html
-
-
+
+
Hi! {{context.row.getValue('createdByUser.displayName')}}
Hi! {{context.row.getValue('name')}}
-
-
+
+
```
Use **data** api to get values with post-processing, like datetime/icon conversion._
@@ -580,25 +581,25 @@ Use **data** api to get values with post-processing, like datetime/icon conversi
In the Example below we will prepend `Hi!` to each file and folder name in the list:
```html
-
-
+
+
Hi! {{entry.data.getValue(entry.row, entry.col)}}
-
-
+
+
```
In the Example below we will add the [ng2-alfresco-tag](https://www.npmjs.com/package/ng2-alfresco-tag) component is integrate in the document list.
```html
-
-
+
-
-
+
+
```

@@ -938,6 +939,39 @@ DocumentList emits the following events:
## Advanced usage and customization
+### Custom tooltips
+
+You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
+
+```html
+
+
+```
+
+And the code in this case will be similar to the following:
+
+```ts
+import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
+
+@Component({...})
+export class MyComponent {
+ ...
+
+ getNodeNameTooltip(row: DataRow, col: DataColumn): string {
+ if (row) {
+ return row.getValue('name');
+ }
+ return null;
+ }
+}
+```
+
+To disable the tooltip your function can return `null` or an empty string.
+
### Custom row filter
You can create a custom row filter implementation that returns `true` if row should be displayed or `false` to hide it.