diff --git a/docs/core/components/data-column.component.md b/docs/core/components/data-column.component.md
index 3b305c3662..e097e5cdc6 100644
--- a/docs/core/components/data-column.component.md
+++ b/docs/core/components/data-column.component.md
@@ -49,7 +49,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
| sortable | `boolean` | true | Toggles ability to sort by this column, for example by clicking the column header. |
| srTitle | `string` | | Title to be used for screen readers. |
| title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
-| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
+| type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location' and 'json'. |
## Details
@@ -125,7 +125,7 @@ Every cell in the DataTable component is bound to the dynamic data context conta
| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | Current data row instance. |
| col | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | Current data column instance. |
-You can use all three properties to gain full access to underlying data from within your custom templates.
+You can use all three properties to gain full access to underlying data from within your custom templates.
In order to wire HTML templates with the data context you will need to define a variable that is bound to `$implicit` as shown below:
```html
@@ -166,7 +166,7 @@ You may want to use the **row** API to get access to the raw values.
Use the **data** API to get values with post-processing (eg, datetime or icon conversion).
-In the Example below we will prepend `Hi!` to each file and folder name in the list:
+In the Example below we will prepend `Hi!` to each file and folder name in the list:
@@ -215,14 +215,14 @@ Let's start by assigning an "image-table-cell" class to the thumbnail column:
```html
-
+
-
+
...
@@ -262,18 +262,18 @@ Now you can declare columns and assign the `desktop-only` class where needed:
```html
-
+
-
+
-
-
+
-
+
+
+
+
+
+```
+
+You can specify the cell inside configuration file
+
+```javascript
+ "adf-cloud-process-list": {
+ "presets": {
+ "default": [
+ {
+ "key": "entry.json",
+ "type": "json",
+ "title": "Json cell value"
+ }
+ ]
+ }
+ },
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | `null` | Data adapter instance. |
+| column | [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) | `null` | Data that defines the column |
+| row | [`DataRow`](../../../lib/core/datatable/data/data-row.model.ts) | | Data that defines the row |
+
+
+## Details
+
+This component provides a custom display to show a [Datatable component](datatable.component.md) cell
+
+## See also
+
+- [Datatable component](datatable.component.md)
diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index 2dbdf25c41..8feab73333 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -154,6 +154,14 @@
[tooltip]="getCellTooltip(row, col)">
+
+
+
+
diff --git a/lib/core/datatable/components/datatable/json-cell.component.spec.ts b/lib/core/datatable/components/datatable/json-cell.component.spec.ts
new file mode 100644
index 0000000000..947bec3187
--- /dev/null
+++ b/lib/core/datatable/components/datatable/json-cell.component.spec.ts
@@ -0,0 +1,90 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ObjectDataTableAdapter } from './../../data/object-datatable-adapter';
+import { ObjectDataColumn } from './../../data/object-datacolumn.model';
+
+import { setupTestBed } from '../../../testing/setupTestBed';
+import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { JsonCellComponent } from './json-cell.component';
+
+describe('JsonCellComponent', () => {
+ let component: JsonCellComponent;
+ let fixture: ComponentFixture;
+ let dataTableAdapter: ObjectDataTableAdapter;
+ let rowData;
+ let columnData;
+
+ setupTestBed({
+ imports: [CoreTestingModule]
+ });
+
+ beforeEach(async(() => {
+ fixture = TestBed.createComponent(JsonCellComponent);
+ component = fixture.componentInstance;
+ }));
+
+ beforeEach(() => {
+ rowData = {
+ name: '1',
+ entity: {
+ 'name': 'test',
+ 'description': 'this is a test',
+ 'version': 1
+ }
+ };
+
+ columnData = { format: '/somewhere', type: 'json', key: 'entity'};
+
+ dataTableAdapter = new ObjectDataTableAdapter(
+ [rowData],
+ [new ObjectDataColumn(columnData)]
+ );
+
+ component.column = dataTableAdapter.getColumns()[0];
+ component.data = dataTableAdapter;
+ component.row = dataTableAdapter.getRows()[0];
+ });
+
+ afterEach(() => {
+ fixture.destroy();
+ });
+
+ it('should set value', () => {
+ fixture.detectChanges();
+ component.value$.subscribe( (result) => {
+ expect(result).toBe(rowData.entity);
+ });
+ });
+
+ it('should render json object inside cell', () => {
+ fixture.detectChanges();
+ const spanElement: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable-cell-value');
+ const unFormatedContent: string = spanElement.textContent.replace(/\n/g, '').replace(/\s/g, '');
+ const rowDataStringify: string = JSON.stringify(rowData.entity).replace(/\s/g, '');
+ expect(unFormatedContent).toBe(rowDataStringify);
+ });
+
+ it('should not setup cell when has no data', () => {
+ rowData.entity = {};
+ fixture.detectChanges();
+ component.value$.subscribe( (result) => {
+ expect(result).toEqual({});
+ });
+ });
+});
diff --git a/lib/core/datatable/components/datatable/json-cell.component.ts b/lib/core/datatable/components/datatable/json-cell.component.ts
new file mode 100644
index 0000000000..cb3f31b2de
--- /dev/null
+++ b/lib/core/datatable/components/datatable/json-cell.component.ts
@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { DataTableCellComponent } from './datatable-cell.component';
+
+@Component({
+ selector: 'adf-json-cell',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ template: `
+
+
+