diff --git a/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts b/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts
index 938c53d450..54c43bce43 100644
--- a/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts
+++ b/demo-shell/src/app/components/document-list/extension-presets/name-column/name-column.component.ts
@@ -38,7 +38,7 @@ import { Node } from '@alfresco/js-api';
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
+    host: { class: 'adf-datatable-content-cell adf-datatable-link adf-name-column' }
 })
 export class NameColumnComponent implements OnInit, OnDestroy {
     @Input()
diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index 06eec65dd6..0be21ed52d 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -288,7 +288,7 @@
                         *ngIf="searchTerm"
                         key="search"
                         title="Search"
-                        class="adf-desktop-only">
+                        class="adf-desktop-only adf-expand-cell-3">
                         <ng-template let-entry="$implicit">
                             <div [innerHTML]="searchResultsHighlight(entry.row.node.entry.search) | highlight:searchTerm">
                             </div>
diff --git a/demo-shell/src/app/components/trashcan/trashcan.component.html b/demo-shell/src/app/components/trashcan/trashcan.component.html
index 66229fb45f..0b3317a182 100644
--- a/demo-shell/src/app/components/trashcan/trashcan.component.html
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.html
@@ -61,7 +61,8 @@
                     key="name"
                     title="DOCUMENT_LIST.COLUMNS.DISPLAY_NAME">
                     <ng-template let-value="value" let-context>
-                        <span class="adf-datatable-cell" title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
+                        <span title="{{ context?.row?.obj | adfNodeNameTooltip }}"
+                              class="adf-datatable-cell-value">{{ value }}</span>
                     </ng-template>
                 </data-column>
 
diff --git a/docs/core/components/datatable.component.md b/docs/core/components/datatable.component.md
index 96d8caacba..7a463c3ba3 100644
--- a/docs/core/components/datatable.component.md
+++ b/docs/core/components/datatable.component.md
@@ -248,8 +248,19 @@ export class DataTableDemo {
 
 ### [Transclusions](../../user-guide/transclusion.md)
 
-You can add [Data column component](data-column.component.md) instances to define columns for the
-table as described in the usage examples and the [Customizing columns](#customizing-columns) section.
+You can add [Data column component](data-column.component.md) instances to define columns for thetable as described in the usage examples and the [Customizing columns](#customizing-columns) section.
+
+```html
+<adf-datatable ...>
+    <data-column>
+        <!--Add your custom empty template here-->
+        <ng-template>
+            <div></div>
+            <span> My custom value </spam>
+        </ng-template>
+    </data-column>
+</adf-datatable>
+```
 
 You can also supply a `<adf-no-content-template>` or an
 [Empty list component](empty-list.component.md) sub-component to show when the table is empty:
@@ -300,9 +311,32 @@ while the data for the table is loading:
     }
 ```
 
+###Styling transcluded content
+
+When adding your custom templates you can style them as you like. However, for an out of the box experience, if you want to apply datatable styles to your column you will need to follow this structure:
+
+```html
+<adf-datatable ...>
+    <data-column>
+        <!--Add your custom empty template here-->
+        <ng-template>
+            <div class="adf-datatable-content-cell">
+                <span class="adf-datatable-cell-value"> My custom value </span>
+            </div>
+        </ng-template>
+    </data-column>
+</adf-datatable>
+```
+
+Notice above those two classes. Apply `adf-datatable-content-cell` for the container of the value that you are going to place in that column and `adf-datatable-cell-value` for the value itself.
+
+If you follow these structure you will be able to apply classes like `.adf-ellipsis-cell` and much more. 
+
 Note that you can use both the `<adf-no-content-template>` and the `<adf-loading-content-template>`
 together in the same datatable.
 
+Learm more about styling your datatable: [Customizing the component's styles](#customizing-the-components-styles)
+
 ## Class members
 
 ### Properties
diff --git a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts
index efccd124fe..fcb5692736 100644
--- a/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts
+++ b/lib/content-services/content-node-selector/name-location-cell/name-location-cell.component.ts
@@ -27,7 +27,7 @@ import { DataRow } from '@alfresco/adf-core';
     styleUrls: ['./name-location-cell.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    host: { class: 'adf-name-location-cell' }
+    host: { class: 'adf-name-location-cell adf-datatable-content-cell' }
 })
 export class NameLocationCellComponent implements OnInit {
 
diff --git a/lib/content-services/document-list/components/library-name-column/library-name-column.component.ts b/lib/content-services/document-list/components/library-name-column/library-name-column.component.ts
index 712fe08e7a..1ff690aa88 100644
--- a/lib/content-services/document-list/components/library-name-column/library-name-column.component.ts
+++ b/lib/content-services/document-list/components/library-name-column/library-name-column.component.ts
@@ -39,7 +39,7 @@ import { BehaviorSubject, Subscription } from 'rxjs';
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     host: {
-        class: 'adf-datatable-cell adf-datatable-link adf-library-name-column'
+        class: 'adf-datatable-content-cell adf-datatable-link adf-library-name-column'
     }
 })
 export class LibraryNameColumnComponent implements OnInit, OnDestroy {
diff --git a/lib/content-services/document-list/components/library-role-column/library-role-column.component.ts b/lib/content-services/document-list/components/library-role-column/library-role-column.component.ts
index 90a431efcb..a7087dc218 100644
--- a/lib/content-services/document-list/components/library-role-column/library-role-column.component.ts
+++ b/lib/content-services/document-list/components/library-role-column/library-role-column.component.ts
@@ -37,7 +37,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-library-role-column' }
+    host: { class: 'adf-library-role-column adf-datatable-content-cell' }
 })
 export class LibraryRoleColumnComponent implements OnInit, OnDestroy {
     @Input()
diff --git a/lib/content-services/document-list/components/library-status-column/library-status-column.component.ts b/lib/content-services/document-list/components/library-status-column/library-status-column.component.ts
index 5b009ebe42..b645884b29 100644
--- a/lib/content-services/document-list/components/library-status-column/library-status-column.component.ts
+++ b/lib/content-services/document-list/components/library-status-column/library-status-column.component.ts
@@ -28,7 +28,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
             {{ (displayText$ | async) | translate }}
         </span>
     `,
-    host: { class: 'adf-library-status-column' }
+    host: { class: 'adf-library-status-column adf-datatable-content-cell' }
 })
 export class LibraryStatusColumnComponent implements OnInit, OnDestroy {
     @Input()
diff --git a/lib/content-services/document-list/components/name-column/name-column.component.ts b/lib/content-services/document-list/components/name-column/name-column.component.ts
index ad093d99cf..144543afa5 100644
--- a/lib/content-services/document-list/components/name-column/name-column.component.ts
+++ b/lib/content-services/document-list/components/name-column/name-column.component.ts
@@ -39,7 +39,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-datatable-cell adf-datatable-link adf-name-column' }
+    host: { class: 'adf-datatable-content-cell adf-datatable-link adf-name-column' }
 })
 export class NameColumnComponent implements OnInit, OnDestroy {
     @Input()
diff --git a/lib/content-services/document-list/components/trashcan-name-column/trashcan-name-column.component.ts b/lib/content-services/document-list/components/trashcan-name-column/trashcan-name-column.component.ts
index d2dae7a225..34446dbbf3 100644
--- a/lib/content-services/document-list/components/trashcan-name-column/trashcan-name-column.component.ts
+++ b/lib/content-services/document-list/components/trashcan-name-column/trashcan-name-column.component.ts
@@ -37,7 +37,7 @@ import { ShareDataRow } from '../../data/share-data-row.model';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'adf-datatable-cell adf-trashcan-name-column' }
+  host: { class: 'adf-datatable-content-cell adf-trashcan-name-column' }
 })
 export class TrashcanNameColumnComponent implements OnInit {
   @Input()
diff --git a/lib/core/datatable/components/datatable/datatable-cell.component.ts b/lib/core/datatable/components/datatable/datatable-cell.component.ts
index d1caf3c6dc..bac6b1c12d 100644
--- a/lib/core/datatable/components/datatable/datatable-cell.component.ts
+++ b/lib/core/datatable/components/datatable/datatable-cell.component.ts
@@ -52,7 +52,7 @@ import { Node } from '@alfresco/js-api';
         </ng-template>
     `,
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-datatable-cell' }
+    host: { class: 'adf-datatable-content-cell' }
 })
 export class DataTableCellComponent implements OnInit, OnDestroy {
     /** Data table adapter instance. */
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss
index ce7d172b55..025e973631 100644
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -19,6 +19,7 @@
     $data-table-card-padding: 24px !default;
     $data-table-cell-top: $data-table-card-padding / 2;
     $data-table-drag-border: 1px dashed rgb(68, 138, 255);
+    $data-table-thumbnail-width: 50px !default;
 
     .adf-datatable-card {
 
@@ -207,12 +208,14 @@
             padding-right: 20px;
 
             .adf-datatable-checkbox {
-                max-width: 50px;
+                max-width: $data-table-thumbnail-width;
+                width: $data-table-thumbnail-width;
             }
         }
 
-        .adf-datatable-cell {
+        .adf-datatable-cell, .adf-datatable-cell-header {
             text-align: left;
+            box-sizing: border-box;
 
             &--text {
                 text-align: left;
@@ -230,7 +233,8 @@
             &--image {
                 padding-left: 24px;
                 padding-right: 24px;
-                width: 10px;
+                width: $data-table-thumbnail-width;
+                min-width: $data-table-thumbnail-width;
                 text-align: left;
 
             }
@@ -249,12 +253,11 @@
             font-weight: bold;
             line-height: 24px;
             letter-spacing: 0;
-            height: $data-table-row-height;
+            min-height: $data-table-row-height !important;
             font-size: $data-table-header-font-size;
             color: $data-table-header-color;
             padding-bottom: 8px;
             box-sizing: border-box;
-            white-space: nowrap;
 
             &:focus {
                 outline-offset: -1px;
@@ -280,7 +283,8 @@
                     @include typo-icon;
                     font-size: $data-table-header-sort-icon-size;
                     content: '\e5d8';
-                    margin-right: 5px;
+                    left: 5px;
+                    position: relative;
                     vertical-align: sub;
                 }
             }
@@ -335,7 +339,8 @@
 
             .adf-datatable-cell-value {
                 word-break: break-word;
-                padding: 0 10px;
+                padding: 10px;
+                display: block;
             }
 
             &:focus {
@@ -348,15 +353,16 @@
             display: flex;
             min-height: inherit;
             align-items: center;
+            word-break: break-all;
         }
 
         .adf-datatable__actions-cell, .adf-datatable-cell--image {
-            max-width: 50px;
+            max-width: $data-table-thumbnail-width;
             display: flex;
         }
 
         .adf-datatable-cell--image {
-            max-width: 50px;
+            max-width: $data-table-thumbnail-width;
         }
 
         .adf-location-cell {
@@ -402,23 +408,20 @@
             text-overflow: ellipsis;
             white-space: nowrap;
 
-            .adf-datatable-cell, .adf-datatable-cell-header {
+            &.adf-datatable-cell-header,
+            .adf-datatable-content-cell {
+                max-width: calc(100% - 0.1px);
                 overflow: hidden;
-
-                .adf-datatable-cell-container {
-                    overflow: hidden;
-                }
+                text-overflow: ellipsis;
 
                 .adf-datatable-cell-value {
                     overflow: hidden;
                     text-overflow: ellipsis;
-                    white-space: nowrap;
-                    display: block;
-                    width: calc(100% - 2em);
-                    position: absolute;
-                    // margin-top: -10px;
                 }
             }
+            .adf-datatable-content-cell {
+                position: absolute;
+            }
 
             /* query for Microsoft IE 11*/
             @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
diff --git a/lib/core/datatable/components/datatable/date-cell.component.ts b/lib/core/datatable/components/datatable/date-cell.component.ts
index 51112a3db6..a1643818b3 100644
--- a/lib/core/datatable/components/datatable/date-cell.component.ts
+++ b/lib/core/datatable/components/datatable/date-cell.component.ts
@@ -48,7 +48,7 @@ import { AlfrescoApiService } from '../../../services/alfresco-api.service';
         </ng-template>
     `,
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-date-cell adf-datatable-cell' }
+    host: { class: 'adf-date-cell adf-datatable-content-cell' }
 })
 export class DateCellComponent extends DataTableCellComponent {
     currentLocale: string;
diff --git a/lib/core/datatable/components/datatable/json-cell.component.ts b/lib/core/datatable/components/datatable/json-cell.component.ts
index 5f459c05a0..500a867e16 100644
--- a/lib/core/datatable/components/datatable/json-cell.component.ts
+++ b/lib/core/datatable/components/datatable/json-cell.component.ts
@@ -40,7 +40,7 @@ import { DataTableCellComponent } from './datatable-cell.component';
     `,
     styleUrls: ['./json-cell.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-datatable-cell' }
+    host: { class: 'adf-datatable-content-cell' }
 })
 export class JsonCellComponent extends DataTableCellComponent implements OnInit {
 
diff --git a/lib/core/datatable/components/datatable/location-cell.component.ts b/lib/core/datatable/components/datatable/location-cell.component.ts
index 1a62782a1e..bd37d216ee 100644
--- a/lib/core/datatable/components/datatable/location-cell.component.ts
+++ b/lib/core/datatable/components/datatable/location-cell.component.ts
@@ -37,7 +37,7 @@ import { AlfrescoApiService } from '../../../services/alfresco-api.service';
         </ng-container>
     `,
     encapsulation: ViewEncapsulation.None,
-    host: { class: 'adf-location-cell' }
+    host: { class: 'adf-location-cell adf-datatable-content-cell' }
 })
 export class LocationCellComponent extends DataTableCellComponent implements OnInit {
     @Input()