[ADF-1549] Added doc files for Tasklist library (#2350)

docIndex.md

@@ -267,25 +267,25 @@ for more information about installing and using the source code.
 
 ## ng2-activiti-tasklist
 
-Contains the Tasklist omponent and other related items. See the library's
+Contains the Tasklist component and other related items. See the library's
 [README file](ng2-components/ng2-activiti-tasklist/README.md)
 for more information about installing and using the source code.
 
-<!-- xxxng2-activiti-tasklist start -->
+<!-- ng2-activiti-tasklist start -->
 **Documented**
 
-- [Tasklist component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Apps list component](docs/apps-list.component.md)
-- [Task details component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Checklist component](docs/checklist.component.md)
-- [Apps list component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Comments component](docs/comments.component.md)
-- [Task filters component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Create task attachment component](docs/create-task-attachment.component.md)
-- [Checklist component](ng2-components/ng2-activiti-tasklist/README.md)
+- [People search component](docs/people-search.component.md)
-- [Task attachment list component](ng2-components/ng2-activiti-tasklist/README.md)
+- [People component](docs/people.component.md)
-- [Create task attachment component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task attachment list component](docs/task-attachment-list.component.md)
-- [Task header component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task audit directive](docs/task-audit.directive.md)
-- [People component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task details component](docs/task-details.component.md)
-- [Comments component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task filters component](docs/task-filters.component.md)
-- [People search component](ng2-components/ng2-activiti-tasklist/README.md)
+- [Task header component](docs/task-header.component.md)
-- [Task audit directive](ng2-components/ng2-activiti-tasklist/README.md)
+- [Tasklist component](docs/tasklist.component.md)
 
 **Undocumented**
 

docs/apps-list.component.md

@@ -0,0 +1,70 @@
+# Activiti Apps Component
+
+Shows all available apps.
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Details](#details)
+  * [How filter the activiti apps](#how-filter-the-activiti-apps)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-apps 
+    [layoutType]="'GRID'">
+</adf-apps>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| layoutType | string | (**required**) Define the layout of the apps. There are two possible values: GRID or LIST. |
+| filtersAppId | Object | Provide a way to filter the apps to show. |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| appClick | Raised when an app entry is clicked |
+
+## Details
+
+### How filter the activiti apps
+
+If you want to show some specific apps you can specify them through the filtersAppId parameters
+
+```html
+<adf-apps 
+    [filtersAppId]="'[
+        {defaultAppId: 'tasks'}, 
+        {deploymentId: '15037'}, 
+        {name : 'my app name'}]'">
+</adf-apps>
+```
+
+In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be shown.
+
+![how-filter-apps](../docassets/images/how-filter-apps.png)
+
+You can use inside the filter one of the following property 
+
+```json
+{ 
+    "defaultAppId": "string", 
+    "deploymentId": "string", 
+    "name": "string", 
+    "id": "number", 
+    "modelId": "number",
+    "tenantId": "number"
+}
+```

docs/checklist.component.md

@@ -0,0 +1,32 @@
+# Activiti Checklist Component
+
+Shows the checklist task functionality.
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-checklist 
+    [readOnly]="false" 
+    [taskId]="taskId" 
+    [assignee]="taskAssignee.id" 
+</adf-checklist>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| taskId | string | (**required**) The id of the parent task which sub tasks are attached on. |
+| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
+| assignee | string | (**required**) The assignee id where the subtasks are assigned to. |

docs/comments.component.md

@@ -0,0 +1,39 @@
+# ADF Comments Component
+
+Displays comments from users involved in a specified task and allows an involved user to add a comment to the task.
+
+![adf-comments](../docassets/images/adf-comments.png)
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-comments
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-comments>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| taskId | string | The numeric ID of the task |
+| readOnly | boolean | The boolean flag |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| error | Raised when an error occurs while displaying/adding a comment |

docs/create-task-attachment.component.md

@@ -0,0 +1,40 @@
+# Create Task Attachment Component
+
+Displays Upload Component(Drag and Click) to upload the attachment to a specified task
+
+![task-create-attachment](../docassets/images/task-create-attachment.png)
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-create-task-attachment 
+    [taskId]="YOUR_TASK_ID" 
+    (error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
+    (success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
+</adf-create-task-attachment>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| taskId | string | (**required**): The numeric ID of the task to display |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
+| success | Raised when the attachment created/uploaded successfully from within the component |

docs/people-search.component.md

@@ -0,0 +1,50 @@
+# People Search component
+
+Searches users/people.
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Details](#details)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-people-search></adf-people-search>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| results | Observable<User[]> | The params to show people list |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| searchPeople | Raised when the search people with new keyword  |
+| success | Raised when select the user and click action button  |
+| closeSearch | Raised when click the clse button  |
+
+## Details
+
+ ```html
+<adf-people-search
+        (searchPeople)="searchUser($event)"
+        (success)="involveUser($event)"
+        (closeSearch)="onCloseSearch()"
+        [results]="peopleSearch$">
+            <header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
+            <action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
+        </adf-people-search>
+
+```

docs/people.component.md

@@ -0,0 +1,107 @@
+# Task People Component
+
+Displays involved users to a specified task
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Details](#details)
+  * [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
+  * [Involve People single click and close search](#involve-people-single-click-and-close-search)
+  * [Involve People single click without close search](#involve-people-single-click-without-close-search)
+  * [Involve People double click and close search](#involve-people-double-click-and-close-search)
+  * [Involve People double double without close search](#involve-people-double-double-without-close-search)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-people 
+    [people]="YOUR_INVOLVED_PEOPLE_LIST" 
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![activiti-people](../docassets/images/activiti_people.png)
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| people | User[] | The array of User object to display |
+| taskId | string | The numeric ID of the task |
+| readOnly | boolean | The boolean flag |
+
+### Events
+
+No Events
+
+## Details
+
+### How to customize the people component behavior
+
+The people component provide two methods to customize the behavior:
+- involveUserAndCloseSearch: The selected user is going to be added and the search section closed
+- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
+
+In this way will be easy customize the people component to involve the user with the single or double click event:
+
+### Involve People single click and close search
+
+```html
+<adf-people #people
+    (row-click)="people.involveUserAndCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-single-click-and-close-search](../docassets/images/involve-people-single-click-and-close-search.gif)
+
+### Involve People single click without close search
+
+```html
+<adf-people #people
+    (row-click)="people.involveUserWithoutCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-single-click-without-close-search](../docassets/images/involve-people-single-click-without-close-search.gif)
+
+### Involve People double click and close search
+
+```html
+<adf-people #people
+    (row-dblclick)="people.involveUserAndCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-double-click-and-close-search](../docassets/images/involve-people-double-click-and-close-search.gif)
+
+### Involve People double double without close search
+
+```html
+<adf-people #people
+    (row-dblclick)="people.involveUserWithoutCloseSearch()"
+    [people]="YOUR_INVOLVED_PEOPLE_LIST"
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-people>
+```
+
+![involve-people-double-click-without-close-search](../docassets/images/involve-people-double-click-without-close-search.gif)

docs/task-attachment-list.component.md

@@ -0,0 +1,41 @@
+# Task Attachment List Component
+
+Displays attached documents on a specified task
+
+![task-attachment-list-sample](../docassets/images/task-attachment-list.png)
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-task-attachment-list 
+    [taskId]="YOUR_TASK_ID" 
+    (attachmentClick)="YOUR_HANDLER">
+</adf-task-attachment-list>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| taskId | string | (**required**): The ID of the task to display |
+| disabled | boolean | false | Disable/Enable read only mode for attachement list |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| attachmentClick | Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
+| success | Raised when the attachment list fetch all the attach and return a list of attachments |
+| error | Raised when the attachment list is not able to fetch the attachments for example network error   |

docs/task-audit.directive.md

@@ -0,0 +1,45 @@
+# Task Audit Directive
+
+Provides a way to fetch the Task Audit information in the pdf or json format.
+
+![adf-task-audit-directive](../docassets/images/adf-task-audit-directive.png)
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<button
+    adf-task-audit
+    [task-id]="taskId"
+    [download]="download"
+    md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
+    <md-icon>assignment_ind</md-icon>
+</button>
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| taskId | string | | (**required**) The id of the task. |
+| format | string | pdf | In whitch format you want the task audit information (pdf or json). |
+| download | boolean | false | True If you want download the file on the click event. |
+| fileName | string | Audit | Represent the name of the file to download in case the format is pdf. |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| clicked | Raised when the task audit info is ready |
+| error | Raised if there is an error during fetching task information |

docs/task-details.component.md

@@ -0,0 +1,80 @@
+# Activiti Task Details component
+
+Shows the details of the task id passed in input
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Details](#details)
+  * [Custom 'empty Activiti Task Details' template](#custom-empty-activiti-task-details-template)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-task-details 
+    [taskId]="taskId">
+</adf-task-details>
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| taskId | string | | (**required**) The id of the task details that we are asking for. |
+| showNextTask | boolean | true | Automatically render the next one, when the task is completed. |
+| showFormTitle | boolean | true | Toggle rendering of the form title. |
+| readOnlyForm | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
+| showFormRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
+| showFormSaveButton | boolean | true| Toggle rendering of the `Save` outcome button. |
+| showFormCompleteButton | boolean | true | Toggle rendering of the Form `Complete` outcome button |
+| peopleIconImageUrl | string | | Define a custom people icon image |
+| showHeader | boolean | true | Toggle task details Header component |
+| showHeaderContent | boolean | true | Toggle collapsed/expanded state of the Header component |
+| showInvolvePeople | boolean | true | Toggle `Involve People` feature for Header component |
+| showComments | boolean | true | Toggle `Comments` feature for Header component |
+| showChecklist | boolean | true | Toggle `Checklist` feature for Header component |
+| fieldValidators | FormFieldValidator[] | [] | Field validators for use with the form. |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| formLoaded | Raised when form is loaded or reloaded. |
+| formSaved | Raised when form is submitted with `Save` or custom outcomes.  |
+| formCompleted | Raised when form is submitted with `Complete` outcome.  |
+| taskCreated | Raised when a checklist task is created.  |
+| executeOutcome | Raised when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
+| onError | Raised at any error |
+
+## Details
+
+### Custom 'empty Activiti Task Details' template
+
+By default the Activiti Task Details provides the following message for the empty task details:
+
+```html
+No Tasks
+```
+
+This can be changed by adding the following custom html template:
+
+```html
+<adf-task-details [taskId]="taskId">
+    <no-task-details-template>
+        <template>
+             <h1>Sorry, no tasks here</h1>
+             <img src="example.jpg">
+        </template>
+    </no-task-details-template>
+</adf-task-details>    
+```
+
+Note that can put any HTML content as part of the template, including other Angular components.

docs/task-filters.component.md

@@ -0,0 +1,94 @@
+# Activiti Filter component
+
+Shows all available filters.
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Details](#details)
+  * [How filter the activiti task filters](#how-filter-the-activiti-task-filters)
+  * [FilterParamsModel](#filterparamsmodel)
+  * [How to create an accordion menu with the task filter](#how-to-create-an-accordion-menu-with-the-task-filter)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-filters></adf-filters>
+```
+
+### Properties
+
+| Name | Type | Description |
+| --- | --- | --- |
+| filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
+| appId | string | Display filters available to the current user for the application with the specified ID. |
+| `appName` | string | Display filters available to the current user for the application with the specified name. |
+| `hasIcon` | boolean | Toggle to show or not the filter's icon. |
+
+If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| filterClick | Raised when the filter in the list is clicked  |
+| onSuccess | Raised when the list is loaded  |
+| onError | Raised if there is an error during the loading  |
+
+## Details
+
+### How filter the activiti task filters
+
+ ```html
+<adf-filters 
+    [filterParam]="{name:'My tasks'}">
+</adf-filters>
+
+```
+
+You can use inside the filterParam one of the properties from [FilterParamsModel](#filterparamsmodel) (see below).
+
+### FilterParamsModel
+
+```json
+{
+    "id": "number",
+    "name": "string",
+    "index": "number"
+}
+```
+
+| Name | Type | Description |
+| --- | --- | --- |
+| id | string | The id of the task filter |
+| name | string | The name of the task filter, lowercase is checked |
+| index | string | The zero-based position of the filter in the array. |
+
+### How to create an accordion menu with the task filter
+
+You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
+The AccordionComponent is exposed by the alfresco-core.
+
+```html
+<adf-accordion>
+    <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [headingIcon]="'assignment'">
+        <adf-filters
+            [appId]="appId"
+            [hasIcon]="false"
+            (filterClick)="onTaskFilterClick($event)"
+            (onSuccess)="onSuccessTaskFilterList($event)"
+            #activitifilter>
+        </adf-filters>
+    </adf-accordion-group>
+</adf-accordion>
+```
+
+![how-create-accordion-menu](../docassets/images/how-to-create-accordion-menu.png)

docs/task-header.component.md

@@ -0,0 +1,43 @@
+# Activiti Task Header component
+
+Shows all the information related to a task.
+
+![adf-task-header](../docassets/images/adf-task-header.png)
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Details](#details)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-task-header
+    [taskDetails]="taskDetails">
+</adf-task-header>
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| taskDetails | [TaskDetailsModel](#taskdetailsmodel) | | (**required**) The task details related to the task. |
+| formName | string | | The name of the form. |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| claim | Raised when the task is claimed. |
+
+## Details
+
+The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display.

docs/tasklist.component.md

@@ -0,0 +1,82 @@
+# Activiti Task List component
+
+Renders a list containing all the tasks matched by the parameters specified.
+
+<!-- markdown-toc start - Don't edit this section.  npm run toc to generate it-->
+
+<!-- toc -->
+
+- [Basic Usage](#basic-usage)
+  * [Properties](#properties)
+  * [Events](#events)
+- [Details](#details)
+  * [DataTableAdapter example](#datatableadapter-example)
+  * [DataColumn Features](#datacolumn-features)
+
+<!-- tocstop -->
+
+<!-- markdown-toc end -->
+
+## Basic Usage
+
+```html
+<adf-tasklist 
+    [appId]="'1'" 
+    [state]="'open'" 
+    [assignment]="'assignee'">
+</adf-tasklist>
+```
+
+You can also use HTML-based schema declaration like shown below:
+
+```html
+<adf-tasklist ...>
+    <data-columns>
+        <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+        <data-column key="created" title="Created" class="hidden"></data-column>
+    </data-columns>
+</adf-tasklist>
+```
+
+### Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| appId | string || The id of the app. |
+| processDefinitionKey | string || The processDefinitionKey of the process. |
+| processInstanceId | string || The processInstanceId of the process. |
+| page | number | 0 | The page of the tasks to fetch. |
+| size | number | 5 | The number of tasks to fetch. |
+| assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
+| state | string || Define state of the processes. Possible values are: `completed`, `active` |
+| hasIcon | boolean | true | Toggle the icon on the left . |
+| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
+| sort | string | | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
+| data | DataTableAdapter | | JSON object that represent the number and the type of the columns that you want show (see the [example](#datatableadapter-example) section below) |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| onSuccess | Raised when the task list is loaded |
+| rowClick | Raised when the task in the list is clicked |
+
+## Details
+
+This component displays lists of process instances both active and completed, using any defined process filter, and
+render details of any chosen instance.
+
+### DataTableAdapter example
+
+```json
+[
+ {"type": "text", "key": "id", "title": "Id"},
+ {"type": "text", "key": "name", "title": "Name", "cssClass": "full-width name-column", "sortable": true},
+ {"type": "text", "key": "formKey", "title": "Form Key", "sortable": true},
+ {"type": "text", "key": "created", "title": "Created", "sortable": true}
+]
+```
+
+### DataColumn Features
+
+You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the DataColumn docs for more information about these features.