inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optional automatic translation of column headers (#2166)

Browse Source
This commit is contained in:
Denys Vuika
2017-08-02 11:44:19 +01:00
committed by Mario Romano
parent 0824a0c325
commit 4addf0fb73
2 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -173,7 +173,7 @@ Here's the list of available properties you can define for a Data Column definit
| type | string (text\|image\|date) | text | Value type | | type | string (text\|image\|date) | text | Value type |
| format | string | | Value format (if supported by components), for example format of the date | | 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 | | 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 | | title | string | | Display title of the column, typically used for column headers. You can use the i18n resouce key to get it translated automatically. |
| template | `TemplateRef` | | Custom column template | | template | `TemplateRef` | | Custom column template |
| sr-title | string | | Screen reader title, used for accessibility purposes | | sr-title | string | | Screen reader title, used for accessibility purposes |
| class | string | | Additional CSS class to be applied to column (header and cells) | | class | string | | Additional CSS class to be applied to column (header and cells) |
@@ -218,6 +218,20 @@ onRowClick(event) {
![](docs/assets/datatable-dom-events.png) ![](docs/assets/datatable-dom-events.png)
### Automatic column header translation
You can also use i18n resource keys with DataColumn `title` property.
The component will automatically check the corresponding i18n resources and fetch corresponding value.
```html
<data-column
key="name"
title="MY.RESOURCE.KEY">
</data-column>
```
This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
### Custom Empty content template ### Custom Empty content template
You can add a template that will be shown when there are no results in your datatable: You can add a template that will be shown when there are no results in your datatable:

2
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

@@ -20,7 +20,7 @@
[class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')" [class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
(click)="onColumnHeaderClick(col)"> (click)="onColumnHeaderClick(col)">
<span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span> <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
<span *ngIf="col.title">{{col.title}}</span> <span *ngIf="col.title">{{ col.title | translate}}</span>
</th> </th>
<!-- Actions (right) --> <!-- Actions (right) -->
<th *ngIf="actions && actionsPosition === 'right'" class="actions-column"> <th *ngIf="actions && actionsPosition === 'right'" class="actions-column">