diff --git a/projects/ng-aquila/documentation/examples/table/table-condensed/table-condensed-example.html b/projects/ng-aquila/documentation/examples/table/table-condensed/table-condensed-example.html
index dfbfcd920..08704cf63 100644
--- a/projects/ng-aquila/documentation/examples/table/table-condensed/table-condensed-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-condensed/table-condensed-example.html
@@ -1,36 +1,38 @@
-<table nxTable condensed>
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell>
-        Product
-      </th>
-      <th nxHeaderCell>
-        Contract Number
-      </th>
-      <th nxHeaderCell>
-        Description
-      </th>
-      <th nxHeaderCell>
-        Website
-      </th>
-      <th nxHeaderCell>
-        Ending At
-      </th>
-      <th nxHeaderCell>
-        Status
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr nxTableRow *ngFor="let item of tableElements">
-      <td nxTableCell>{{item.product}}</td>
-      <td nxTableCell>{{item.contractNumber}}</td>
-      <td nxTableCell>{{item.desc}}</td>
-      <td nxTableCell>
-        <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-      </td>
-      <td nxTableCell>{{item.endingAt}}</td>
-      <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
-    </tr>
-  </tbody>
-</table>
+<nx-swipebar label="Scroll to see more">
+  <table nxTable condensed>
+    <thead>
+      <tr nxTableRow>
+        <th nxHeaderCell>
+          Product
+        </th>
+        <th nxHeaderCell>
+          Contract Number
+        </th>
+        <th nxHeaderCell>
+          Description
+        </th>
+        <th nxHeaderCell>
+          Website
+        </th>
+        <th nxHeaderCell>
+          Ending At
+        </th>
+        <th nxHeaderCell>
+          Status
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr nxTableRow *ngFor="let item of tableElements">
+        <td nxTableCell>{{item.product}}</td>
+        <td nxTableCell>{{item.contractNumber}}</td>
+        <td nxTableCell>{{item.desc}}</td>
+        <td nxTableCell>
+          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+        </td>
+        <td nxTableCell>{{item.endingAt}}</td>
+        <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+      </tr>
+    </tbody>
+  </table>
+</nx-swipebar>
diff --git a/projects/ng-aquila/documentation/examples/table/table-expandable/table-expandable-example.html b/projects/ng-aquila/documentation/examples/table/table-expandable/table-expandable-example.html
index 931bb7755..3fff8e389 100644
--- a/projects/ng-aquila/documentation/examples/table/table-expandable/table-expandable-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-expandable/table-expandable-example.html
@@ -1,43 +1,45 @@
-<table nxTable nxExpandableTable #expandableTable="nxExpandableTable" zebra>
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell class="nx-table-cell--toggle" aria-label="Expand row">
-        <nx-toggle-button [target]="expandableTable"
-          ariaLabel="Toggle all rows"></nx-toggle-button>
-      </th>
-      <th nxHeaderCell>
-        Product
-      </th>
-      <th nxHeaderCell>
-        Contract number
-      </th>
-      <th nxHeaderCell>
-        Ending date
-      </th>
-      <th nxHeaderCell>
-        Status
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <ng-container *ngFor="let item of tableElements">
+<nx-swipebar label="Scroll to see more">
+  <table nxTable nxExpandableTable #expandableTable="nxExpandableTable" zebra>
+    <thead>
       <tr nxTableRow>
-        <td nxTableCell class="nx-table-cell--toggle">
-          <nx-toggle-button [target]="expandableRow"
-            ariaLabel="Toggle {{item.product}} row"></nx-toggle-button>
-        </td>
-        <td nxTableCell>{{item.product}}</td>
-        <td nxTableCell>{{item.contractNumber}}</td>
-        <td nxTableCell>{{item.endingAt}}</td>
-        <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+        <th nxHeaderCell class="nx-table-cell--toggle" aria-label="Expand row">
+          <nx-toggle-button [target]="expandableTable"
+            ariaLabel="Toggle all rows"></nx-toggle-button>
+        </th>
+        <th nxHeaderCell>
+          Product
+        </th>
+        <th nxHeaderCell>
+          Contract number
+        </th>
+        <th nxHeaderCell>
+          Ending date
+        </th>
+        <th nxHeaderCell>
+          Status
+        </th>
       </tr>
-      <tr nxExpandableTableRow #expandableRow>
-        <td nxExpandableTableCell></td>
-        <td nxExpandableTableCell>
-          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-        </td>
-        <td nxExpandableTableCell colspan="3">{{item.desc}}</td>
-      </tr>
-    </ng-container>
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      <ng-container *ngFor="let item of tableElements">
+        <tr nxTableRow>
+          <td nxTableCell class="nx-table-cell--toggle">
+            <nx-toggle-button [target]="expandableRow"
+              ariaLabel="Toggle {{item.product}} row"></nx-toggle-button>
+          </td>
+          <td nxTableCell>{{item.product}}</td>
+          <td nxTableCell>{{item.contractNumber}}</td>
+          <td nxTableCell>{{item.endingAt}}</td>
+          <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+        </tr>
+        <tr nxExpandableTableRow #expandableRow>
+          <td nxExpandableTableCell></td>
+          <td nxExpandableTableCell>
+            <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+          </td>
+          <td nxExpandableTableCell colspan="3">{{item.desc}}</td>
+        </tr>
+      </ng-container>
+    </tbody>
+  </table>
+</nx-swipebar>
diff --git a/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.css b/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.css
index 27e3358f0..cb925a74b 100644
--- a/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.css
+++ b/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.css
@@ -1,8 +1,3 @@
-table {
-  overflow-x: auto;
-  display: block;
-}
-
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -11,4 +6,4 @@ table {
 .pagination {
   margin-top: 24px;
   align-self: flex-end;
-}
\ No newline at end of file
+}
diff --git a/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.html b/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.html
index b0fab0e24..081dea351 100644
--- a/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-filter-sort-paginate/table-filter-sort-paginate-example.html
@@ -5,30 +5,33 @@
 
  <p nxCopytext class="nx-margin-bottom-2xs">Matching items: {{currentlyAvailableElements.length}}</p>
 
-  <table nxTable nxSort (sortChange)="sortTable($event)">
-    <thead>
-      <tr nxTableRow>
-        <th nxHeaderCell nxSortHeaderCell="product">Product</th>
-        <th nxHeaderCell nxSortHeaderCell="contractNumber">Contract Number</th>
-        <th nxHeaderCell>Description</th>
-        <th nxHeaderCell>Website</th>
-        <th nxHeaderCell nxSortHeaderCell="endingAt">Ending At</th>
-        <th nxHeaderCell nxSortHeaderCell="statusText">Status</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr nxTableRow *ngFor="let item of currentlyShownPageElements">
-        <td nxTableCell>{{item.product}}</td>
-        <td nxTableCell>{{item.contractNumber}}</td>
-        <td nxTableCell>{{item.desc}}</td>
-        <td nxTableCell>
-          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-        </td>
-        <td nxTableCell>{{ item.endingAt | date: 'dd/MM/yyyy' }}</td>
-        <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
-      </tr>
-    </tbody>
-  </table>
+  <nx-swipebar label="Scroll to see more">
+    <table nxTable nxSort (sortChange)="sortTable($event)">
+      <thead>
+        <tr nxTableRow>
+          <th nxHeaderCell nxSortHeaderCell="product">Product</th>
+          <th nxHeaderCell nxSortHeaderCell="contractNumber">Contract Number</th>
+          <th nxHeaderCell>Description</th>
+          <th nxHeaderCell>Website</th>
+          <th nxHeaderCell nxSortHeaderCell="endingAt">Ending At</th>
+          <th nxHeaderCell nxSortHeaderCell="statusText">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr nxTableRow *ngFor="let item of currentlyShownPageElements">
+          <td nxTableCell>{{item.product}}</td>
+          <td nxTableCell>{{item.contractNumber}}</td>
+          <td nxTableCell>{{item.desc}}</td>
+          <td nxTableCell>
+            <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+          </td>
+          <td nxTableCell>{{ item.endingAt | date: 'dd/MM/yyyy' }}</td>
+          <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+        </tr>
+      </tbody>
+    </table>
+  </nx-swipebar>
+
 
   <nx-pagination
     class="pagination"
diff --git a/projects/ng-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.html b/projects/ng-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.html
index fd8eb19cc..dada3dc88 100644
--- a/projects/ng-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-form-elements/table-form-elements-example.html
@@ -1,51 +1,53 @@
-<table nxTable condensed class="nx-margin-bottom-xs">
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell>Assignment/Case ID</th>
-      <th nxHeaderCell>Gross Amount</th>
-      <th nxHeaderCell>Ending At</th>
-      <th nxHeaderCell>Status</th>
-      <th nxHeaderCell></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr nxTableRow *ngFor="let control of formArray.controls; index as i" [formGroup]="getFormGroup(i)">
-      <td nxTableCell>
-        <nx-formfield>
-          <input nxInput formControlName="id"/>
-        </nx-formfield>
-      </td>
-      <td nxTableCell>
-        <nx-formfield>
-          <input nxInput formControlName="amount"/>
-        </nx-formfield>
-      </td>
-      <td nxTableCell class="date-cell">
-        <nx-formfield>
-          <input nxDatefield nxInput [nxDatepicker]="myDatepicker" formControlName="endingAt" />
-        
-          <nx-datepicker-toggle [for]="myDatepicker" nxFormfieldSuffix></nx-datepicker-toggle>
-          <nx-datepicker #myDatepicker></nx-datepicker>
-        </nx-formfield>
-      </td>
-      <td nxTableCell class="status-cell">
-        <nx-formfield>
-          <nx-dropdown formControlName="status">
-            <nx-dropdown-item nxValue="open"></nx-dropdown-item>
-            <nx-dropdown-item nxValue="processing"></nx-dropdown-item>
-            <nx-dropdown-item nxValue="accepted"></nx-dropdown-item>
-            <nx-dropdown-item nxValue="rejected"></nx-dropdown-item>
-          </nx-dropdown>
-        </nx-formfield>
-      </td>
-      <td nxTableCell>
-        <button nxPlainButton (click)="removeRow(i)" aria-label="Remove row">
-          <nx-icon name="trash-o"></nx-icon>
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<nx-swipebar label="Scroll to see more">
+  <table nxTable condensed class="nx-margin-bottom-xs">
+    <thead>
+      <tr nxTableRow>
+        <th nxHeaderCell>Assignment/Case ID</th>
+        <th nxHeaderCell>Gross Amount</th>
+        <th nxHeaderCell>Ending At</th>
+        <th nxHeaderCell>Status</th>
+        <th nxHeaderCell></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr nxTableRow *ngFor="let control of formArray.controls; index as i" [formGroup]="getFormGroup(i)">
+        <td nxTableCell>
+          <nx-formfield>
+            <input nxInput formControlName="id"/>
+          </nx-formfield>
+        </td>
+        <td nxTableCell>
+          <nx-formfield>
+            <input nxInput formControlName="amount"/>
+          </nx-formfield>
+        </td>
+        <td nxTableCell class="date-cell">
+          <nx-formfield>
+            <input nxDatefield nxInput [nxDatepicker]="myDatepicker" formControlName="endingAt" />
+
+            <nx-datepicker-toggle [for]="myDatepicker" nxFormfieldSuffix></nx-datepicker-toggle>
+            <nx-datepicker #myDatepicker></nx-datepicker>
+          </nx-formfield>
+        </td>
+        <td nxTableCell class="status-cell">
+          <nx-formfield>
+            <nx-dropdown formControlName="status">
+              <nx-dropdown-item nxValue="open"></nx-dropdown-item>
+              <nx-dropdown-item nxValue="processing"></nx-dropdown-item>
+              <nx-dropdown-item nxValue="accepted"></nx-dropdown-item>
+              <nx-dropdown-item nxValue="rejected"></nx-dropdown-item>
+            </nx-dropdown>
+          </nx-formfield>
+        </td>
+        <td nxTableCell>
+          <button nxPlainButton (click)="removeRow(i)" aria-label="Remove row">
+            <nx-icon name="trash-o"></nx-icon>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</nx-swipebar>
 
 <button nxPlainButton (click)="addRow()">
   <nx-icon name="plus" class="nx-margin-right-2xs"></nx-icon>Add row
diff --git a/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html b/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html
index 2bc7040fb..9f5d9b32b 100644
--- a/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-selecting/table-selecting-example.html
@@ -1,44 +1,46 @@
-<table nxTable>
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell class="nx-table-cell--checkbox" aria-label="Row selection">
-        <nx-checkbox (checkedChange)="toggleAll()"
-          aria-label="Toggle selection of all rows"
-          [checked]="selection.hasValue() && isAllSelected()"
-          [indeterminate]="selection.hasValue() && !isAllSelected()">
-        </nx-checkbox>
-      </th>
-      <th nxHeaderCell>Product</th>
-      <th nxHeaderCell>Contract Number</th>
-      <th nxHeaderCell>Website</th>
-      <th nxHeaderCell>Ending At</th>
-      <th nxHeaderCell>Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <ng-container *ngFor="let item of tableElements">
-      <tr nxTableRow
-          [selected]="selection.isSelected(item)"
-          selectable
-          (select)="selection.toggle(item)">
-        <td nxTableCell class="nx-table-cell--checkbox">
-          <nx-checkbox (checkedChange)="selection.toggle(item)"
-            aria-label="Toggle row selection"
-            [checked]="selection.isSelected(item)"></nx-checkbox>
-        </td>
-        <td nxTableCell>{{item.product}}</td>
-        <td nxTableCell>{{item.contractNumber}}</td>
-        <td nxTableCell>
-          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-        </td>
-        <td nxTableCell>{{item.endingAt | date: 'dd/MM/yyyy'}}</td>
-        <td nxTableCell>
-          <nx-badge [type]="item.status">{{item.statusText}}</nx-badge>
-        </td>
+<nx-swipebar label="Scroll to see more">
+  <table nxTable>
+    <thead>
+      <tr nxTableRow>
+        <th nxHeaderCell class="nx-table-cell--checkbox" aria-label="Row selection">
+          <nx-checkbox (checkedChange)="toggleAll()"
+            aria-label="Toggle selection of all rows"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()">
+          </nx-checkbox>
+        </th>
+        <th nxHeaderCell>Product</th>
+        <th nxHeaderCell>Contract Number</th>
+        <th nxHeaderCell>Website</th>
+        <th nxHeaderCell>Ending At</th>
+        <th nxHeaderCell>Status</th>
       </tr>
-    </ng-container>
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      <ng-container *ngFor="let item of tableElements">
+        <tr nxTableRow
+            [selected]="selection.isSelected(item)"
+            selectable
+            (select)="selection.toggle(item)">
+          <td nxTableCell class="nx-table-cell--checkbox">
+            <nx-checkbox (checkedChange)="selection.toggle(item)"
+              aria-label="Toggle row selection"
+              [checked]="selection.isSelected(item)"></nx-checkbox>
+          </td>
+          <td nxTableCell>{{item.product}}</td>
+          <td nxTableCell>{{item.contractNumber}}</td>
+          <td nxTableCell>
+            <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+          </td>
+          <td nxTableCell>{{item.endingAt | date: 'dd/MM/yyyy'}}</td>
+          <td nxTableCell>
+            <nx-badge [type]="item.status">{{item.statusText}}</nx-badge>
+          </td>
+        </tr>
+      </ng-container>
+    </tbody>
+  </table>
+</nx-swipebar>
 
 <div class="nx-margin-top-m">
   <nx-switcher [(checked)]="showSelected">Debug selected value</nx-switcher>
diff --git a/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html b/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html
index e8483d9b4..52e919113 100644
--- a/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-single-select/table-single-select-example.html
@@ -1,38 +1,40 @@
-<table nxTable>
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell aria-label="Row selection"></th>
-      <th nxHeaderCell>Product</th>
-      <th nxHeaderCell>Contract Number</th>
-      <th nxHeaderCell>Website</th>
-      <th nxHeaderCell>Ending At</th>
-      <th nxHeaderCell>Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <ng-container *ngFor="let item of tableElements">
-      <tr nxTableRow
-          [selected]="selection.isSelected(item)"
-          (select)="selection.select(item)"
-          selectable>
-        <td nxTableCell class="nx-table-cell--checkbox">
-          <nx-radio (nxValueChange)="selection.select(item)"
-            [attr.aria-label]="'Select ' + item.product + ' row'"
-            [nxChecked]="selection.isSelected(item)"></nx-radio>
-        </td>
-        <td nxTableCell>{{item.product}}</td>
-        <td nxTableCell>{{item.contractNumber}}</td>
-        <td nxTableCell>
-          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-        </td>
-        <td nxTableCell>{{item.endingAt | date: 'dd/MM/yyyy'}}</td>
-        <td nxTableCell>
-          <nx-badge [type]="item.status">{{item.statusText}}</nx-badge>
-        </td>
+<nx-swipebar label="Scroll to see more">
+  <table nxTable>
+    <thead>
+      <tr nxTableRow>
+        <th nxHeaderCell aria-label="Row selection"></th>
+        <th nxHeaderCell>Product</th>
+        <th nxHeaderCell>Contract Number</th>
+        <th nxHeaderCell>Website</th>
+        <th nxHeaderCell>Ending At</th>
+        <th nxHeaderCell>Status</th>
       </tr>
-    </ng-container>
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      <ng-container *ngFor="let item of tableElements">
+        <tr nxTableRow
+            [selected]="selection.isSelected(item)"
+            (select)="selection.select(item)"
+            selectable>
+          <td nxTableCell class="nx-table-cell--checkbox">
+            <nx-radio (nxValueChange)="selection.select(item)"
+              [attr.aria-label]="'Select ' + item.product + ' row'"
+              [nxChecked]="selection.isSelected(item)"></nx-radio>
+          </td>
+          <td nxTableCell>{{item.product}}</td>
+          <td nxTableCell>{{item.contractNumber}}</td>
+          <td nxTableCell>
+            <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+          </td>
+          <td nxTableCell>{{item.endingAt | date: 'dd/MM/yyyy'}}</td>
+          <td nxTableCell>
+            <nx-badge [type]="item.status">{{item.statusText}}</nx-badge>
+          </td>
+        </tr>
+      </ng-container>
+    </tbody>
+  </table>
+</nx-swipebar>
 
 <div class="nx-margin-top-m">
   <nx-switcher [(checked)]="showSelected">Debug selected value</nx-switcher>
diff --git a/projects/ng-aquila/documentation/examples/table/table-sorting/table-sorting-example.html b/projects/ng-aquila/documentation/examples/table/table-sorting/table-sorting-example.html
index 36b10798d..ce4b08a48 100644
--- a/projects/ng-aquila/documentation/examples/table/table-sorting/table-sorting-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-sorting/table-sorting-example.html
@@ -1,24 +1,26 @@
-<table nxTable nxSort (sortChange)="sortTable($event)">
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell nxSortHeaderCell="product">Product</th>
-      <th nxHeaderCell nxSortHeaderCell="contractNumber">Contract Number</th>
-      <th nxHeaderCell>Description</th>
-      <th nxHeaderCell>Website</th>
-      <th nxHeaderCell nxSortHeaderCell="endingAt">Ending At</th>
-      <th nxHeaderCell nxSortHeaderCell="statusText">Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr nxTableRow *ngFor="let item of tableElements">
-      <td nxTableCell>{{item.product}}</td>
-      <td nxTableCell>{{item.contractNumber}}</td>
-      <td nxTableCell>{{item.desc}}</td>
-      <td nxTableCell>
-        <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-      </td>
-      <td nxTableCell>{{ item.endingAt | date: 'dd/MM/yyyy' }}</td>
-      <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
-    </tr>
-  </tbody>
-</table>
+<nx-swipebar label="Scroll to see more">
+  <table nxTable nxSort (sortChange)="sortTable($event)">
+    <thead>
+      <tr nxTableRow>
+        <th nxHeaderCell nxSortHeaderCell="product">Product</th>
+        <th nxHeaderCell nxSortHeaderCell="contractNumber">Contract Number</th>
+        <th nxHeaderCell>Description</th>
+        <th nxHeaderCell>Website</th>
+        <th nxHeaderCell nxSortHeaderCell="endingAt">Ending At</th>
+        <th nxHeaderCell nxSortHeaderCell="statusText">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr nxTableRow *ngFor="let item of tableElements">
+        <td nxTableCell>{{item.product}}</td>
+        <td nxTableCell>{{item.contractNumber}}</td>
+        <td nxTableCell>{{item.desc}}</td>
+        <td nxTableCell>
+          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+        </td>
+        <td nxTableCell>{{ item.endingAt | date: 'dd/MM/yyyy' }}</td>
+        <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+      </tr>
+    </tbody>
+  </table>
+</nx-swipebar>
diff --git a/projects/ng-aquila/documentation/examples/table/table-sticky/table-sticky-example.html b/projects/ng-aquila/documentation/examples/table/table-sticky/table-sticky-example.html
index aa7be937e..4003c6fbf 100644
--- a/projects/ng-aquila/documentation/examples/table/table-sticky/table-sticky-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-sticky/table-sticky-example.html
@@ -9,40 +9,42 @@
 </form>
 
 <div class="table-container">
-  <table nxTable [sticky]="stickyColumn">
-    <thead>
-      <tr nxTableRow>
-        <th nxHeaderCell>
-          Product
-        </th>
-        <th nxHeaderCell>
-          Contract Number
-        </th>
-        <th nxHeaderCell>
-          Description
-        </th>
-        <th nxHeaderCell>
-          Website
-        </th>
-        <th nxHeaderCell>
-          Ending At
-        </th>
-        <th nxHeaderCell>
-          Status
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr nxTableRow *ngFor="let item of tableElements">
-        <td nxTableCell>{{item.product}}</td>
-        <td nxTableCell>{{item.contractNumber}}</td>
-        <td nxTableCell>{{item.desc}}</td>
-        <td nxTableCell>
-          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-        </td>
-        <td nxTableCell>{{item.endingAt}}</td>
-        <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
-      </tr>
-    </tbody>
-  </table>
+  <nx-swipebar label="Scroll to see more">
+    <table nxTable [sticky]="stickyColumn">
+      <thead>
+        <tr nxTableRow>
+          <th nxHeaderCell>
+            Product
+          </th>
+          <th nxHeaderCell>
+            Contract Number
+          </th>
+          <th nxHeaderCell>
+            Description
+          </th>
+          <th nxHeaderCell>
+            Website
+          </th>
+          <th nxHeaderCell>
+            Ending At
+          </th>
+          <th nxHeaderCell>
+            Status
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr nxTableRow *ngFor="let item of tableElements">
+          <td nxTableCell>{{item.product}}</td>
+          <td nxTableCell>{{item.contractNumber}}</td>
+          <td nxTableCell>{{item.desc}}</td>
+          <td nxTableCell>
+            <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+          </td>
+          <td nxTableCell>{{item.endingAt}}</td>
+          <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+        </tr>
+      </tbody>
+    </table>
+  </nx-swipebar>
 </div>
diff --git a/projects/ng-aquila/documentation/examples/table/table-zebra/table-zebra-example.html b/projects/ng-aquila/documentation/examples/table/table-zebra/table-zebra-example.html
index 09cb6ab78..f9987c2f7 100644
--- a/projects/ng-aquila/documentation/examples/table/table-zebra/table-zebra-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table-zebra/table-zebra-example.html
@@ -1,36 +1,38 @@
-<table nxTable zebra>
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell>
-        Product
-      </th>
-      <th nxHeaderCell>
-        Contract Number
-      </th>
-      <th nxHeaderCell>
-        Description
-      </th>
-      <th nxHeaderCell>
-        Website
-      </th>
-      <th nxHeaderCell>
-        Ending At
-      </th>
-      <th nxHeaderCell>
-        Status
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr nxTableRow *ngFor="let item of tableElements">
-      <td nxTableCell>{{item.product}}</td>
-      <td nxTableCell>{{item.contractNumber}}</td>
-      <td nxTableCell>{{item.desc}}</td>
-      <td nxTableCell>
-        <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-      </td>
-      <td nxTableCell>{{item.endingAt}}</td>
-      <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
-    </tr>
-  </tbody>
-</table>
+<nx-swipebar label="Scroll to see more">
+  <table nxTable zebra>
+    <thead>
+      <tr nxTableRow>
+        <th nxHeaderCell>
+          Product
+        </th>
+        <th nxHeaderCell>
+          Contract Number
+        </th>
+        <th nxHeaderCell>
+          Description
+        </th>
+        <th nxHeaderCell>
+          Website
+        </th>
+        <th nxHeaderCell>
+          Ending At
+        </th>
+        <th nxHeaderCell>
+          Status
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr nxTableRow *ngFor="let item of tableElements">
+        <td nxTableCell>{{item.product}}</td>
+        <td nxTableCell>{{item.contractNumber}}</td>
+        <td nxTableCell>{{item.desc}}</td>
+        <td nxTableCell>
+          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+        </td>
+        <td nxTableCell>{{item.endingAt}}</td>
+        <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+      </tr>
+    </tbody>
+  </table>
+</nx-swipebar>
diff --git a/projects/ng-aquila/documentation/examples/table/table/table-example.html b/projects/ng-aquila/documentation/examples/table/table/table-example.html
index 39477f0f5..c94a899cd 100644
--- a/projects/ng-aquila/documentation/examples/table/table/table-example.html
+++ b/projects/ng-aquila/documentation/examples/table/table/table-example.html
@@ -1,36 +1,38 @@
-<table nxTable>
-  <thead>
-    <tr nxTableRow>
-      <th nxHeaderCell>
-        Product
-      </th>
-      <th nxHeaderCell>
-        Contract Number
-      </th>
-      <th nxHeaderCell>
-        Description
-      </th>
-      <th nxHeaderCell>
-        Website
-      </th>
-      <th nxHeaderCell>
-        Ending At
-      </th>
-      <th nxHeaderCell>
-        Status
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr nxTableRow *ngFor="let item of tableElements">
-      <td nxTableCell>{{item.product}}</td>
-      <td nxTableCell>{{item.contractNumber}}</td>
-      <td nxTableCell>{{item.desc}}</td>
-      <td nxTableCell>
-        <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
-      </td>
-      <td nxTableCell>{{item.endingAt}}</td>
-      <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
-    </tr>
-  </tbody>
-</table>
+<nx-swipebar label="Scroll to see more">
+  <table nxTable>
+    <thead>
+      <tr nxTableRow>
+        <th nxHeaderCell>
+          Product
+        </th>
+        <th nxHeaderCell>
+          Contract Number
+        </th>
+        <th nxHeaderCell>
+          Description
+        </th>
+        <th nxHeaderCell>
+          Website
+        </th>
+        <th nxHeaderCell>
+          Ending At
+        </th>
+        <th nxHeaderCell>
+          Status
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr nxTableRow *ngFor="let item of tableElements">
+        <td nxTableCell>{{item.product}}</td>
+        <td nxTableCell>{{item.contractNumber}}</td>
+        <td nxTableCell>{{item.desc}}</td>
+        <td nxTableCell>
+          <nx-link><a routerLink='#'>{{item.website}}</a></nx-link>
+        </td>
+        <td nxTableCell>{{item.endingAt}}</td>
+        <td nxTableCell><nx-badge [type]="item.status">{{item.statusText}}</nx-badge></td>
+      </tr>
+    </tbody>
+  </table>
+</nx-swipebar>
diff --git a/projects/ng-aquila/src/shared-styles/theming/tokens.scss b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
index f1d265f8e..7641c0f62 100644
--- a/projects/ng-aquila/src/shared-styles/theming/tokens.scss
+++ b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
@@ -1360,6 +1360,10 @@ $nx-theme: (
   tooltip-font-weight: 400,
   tooltip-letter-spacing: paragraph-04-letter-spacing,
 
+  swipebar-background-color: ui-04,
+  swipebar-color: interactive-primary,
+  swipebar-padding: 32px 0 0,
+
   sidebar-background-color: ui-02,
   sidebar-handle-color: ui-04,
   sidebar-footer-button-color: text-01,
diff --git a/projects/ng-aquila/src/table/public-api.ts b/projects/ng-aquila/src/table/public-api.ts
index 7fb7cdcac..7ae9f7942 100644
--- a/projects/ng-aquila/src/table/public-api.ts
+++ b/projects/ng-aquila/src/table/public-api.ts
@@ -10,3 +10,4 @@ export * from './expandable/expandable-table.directive';
 export * from './sort-header/sort-header.component';
 export * from './sort-header/sort.directive';
 export * from './sort-header/sort-header-intl';
+export * from './swipebar/swipebar.component';
diff --git a/projects/ng-aquila/src/table/swipebar/swipebar.component.html b/projects/ng-aquila/src/table/swipebar/swipebar.component.html
new file mode 100644
index 000000000..850f0afba
--- /dev/null
+++ b/projects/ng-aquila/src/table/swipebar/swipebar.component.html
@@ -0,0 +1,9 @@
+<div aria-hidden="true" #element>
+  <label nxCopytext *ngIf="label">{{ label }}</label>
+  <div class="bar">
+    <div class="indicator" #indicator></div>
+  </div>
+</div>
+<div class="scrollable" #scrollable>
+  <ng-content></ng-content>
+</div>
diff --git a/projects/ng-aquila/src/table/swipebar/swipebar.component.scss b/projects/ng-aquila/src/table/swipebar/swipebar.component.scss
new file mode 100644
index 000000000..9b04105e6
--- /dev/null
+++ b/projects/ng-aquila/src/table/swipebar/swipebar.component.scss
@@ -0,0 +1,38 @@
+@import '../../shared-styles/index';
+
+:host {
+  display: block;
+}
+
+label {
+  display: block;
+  margin-bottom: nx-spacer(xs);
+}
+
+.scrollable {
+  overflow: auto;
+  padding: var(--swipebar-padding);
+}
+
+.bar {
+  background: var(--swipebar-background-color);
+}
+
+.indicator {
+  position: relative;
+  height: nx-spacer(2xs);
+  background: var(--swipebar-color);
+  cursor: grab;
+  transform: translateX(0);
+
+  // larger click area
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    top: -nx-spacer(2xs);
+    bottom: -nx-spacer(2xs);
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/projects/ng-aquila/src/table/swipebar/swipebar.component.spec.ts b/projects/ng-aquila/src/table/swipebar/swipebar.component.spec.ts
new file mode 100644
index 000000000..1526bd009
--- /dev/null
+++ b/projects/ng-aquila/src/table/swipebar/swipebar.component.spec.ts
@@ -0,0 +1,123 @@
+import { Component, Type, ViewChild, Directive } from '@angular/core';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import * as axe from 'axe-core';
+import { NxTableModule } from '../table.module';
+import { NxSwipebarComponent } from './swipebar.component';
+
+// For better readablity here, We can safely ignore some conventions in our specs
+// tslint:disable:component-class-suffix
+
+const screenWidth = document.body.offsetWidth;
+
+@Directive()
+abstract class SwipebarTest {
+  @ViewChild(NxSwipebarComponent) swipebarInstance: NxSwipebarComponent;
+  overflow = false;
+}
+
+describe(NxSwipebarComponent.name, () => {
+  let fixture: ComponentFixture<SwipebarTest>;
+  let testInstance: SwipebarTest;
+  let swipebarInstance: NxSwipebarComponent;
+  let swipebarElement: HTMLElement;
+
+  function createTestComponent(component: Type<SwipebarTest>) {
+    fixture = TestBed.createComponent(component);
+    fixture.detectChanges();
+    testInstance = fixture.componentInstance;
+    swipebarInstance = testInstance.swipebarInstance;
+    swipebarElement = fixture.nativeElement.querySelector('nx-swipebar');
+  }
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        BasicSwipebar,
+      ],
+      imports: [
+        NxTableModule
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(async () => {
+    createTestComponent(BasicSwipebar);
+    await nextFrame();
+  });
+
+  it('creates the swipebar', () => {
+    expect(swipebarInstance).toBeTruthy();
+  });
+
+  describe('when there is no overflow', () => {
+    it('is hidden', () => {
+      expect(swipebarElement.querySelector('div').style.display).toBe('none');
+    });
+  });
+
+  describe('when there is overflow', () => {
+    beforeEach(async () => {
+      testInstance.overflow = true;
+      fixture.detectChanges();
+      swipebarInstance['_onResize']();
+      await nextFrame();
+    });
+
+    it('is visible', () => {
+      expect(swipebarElement.querySelector('div').style.display).toBe('block');
+    });
+
+    it('has an indicator with correct size', () => {
+      const indicator: HTMLElement = swipebarElement.querySelector('.indicator');
+      expect(indicator.offsetWidth).toBe(Math.round(screenWidth / 2));
+    });
+
+    it('has an indicator at the correct position', () => {
+      const indicator: HTMLElement = swipebarElement.querySelector('.indicator');
+      expect(indicator.style.transform).toBe('translateX(0px)');
+    });
+
+    it('has an indicator at the correct position after scrolling', async () => {
+      const scrollable: HTMLElement = swipebarElement.querySelector('.scrollable');
+      scrollable.scrollTo(screenWidth / 2, 0);
+      scrollable.dispatchEvent(new Event('scroll'));
+      await nextFrame();
+
+      const indicator: HTMLElement = swipebarElement.querySelector('.indicator');
+      expect(indicator.style.transform).toBe(`translateX(${ Math.round(screenWidth / 4) }px)`);
+    });
+  });
+
+  describe('a11y', () => {
+    it('has no accessibility violations', function(done) {
+      createTestComponent(BasicSwipebar);
+
+      axe.run(fixture.nativeElement, {},  (error: Error, results: axe.AxeResults) => {
+        const violationMessages = results.violations.map(item => item.description).join('\n');
+        if (violationMessages.length) {
+          expect(violationMessages).toBeFalsy();
+        }
+        done();
+      });
+    });
+  });
+});
+
+function nextFrame() {
+  return new Promise( resolve => requestAnimationFrame(resolve));
+}
+
+@Component({
+  template: `
+    <nx-swipebar>
+      <div class="content" [class.overflow]="overflow"></div>
+    </nx-swipebar>
+  `,
+  styles: [`
+    .overflow {
+      height: 10px;
+      width: ${ screenWidth * 2 }px;
+    }
+  `]
+})
+class BasicSwipebar extends SwipebarTest {}
diff --git a/projects/ng-aquila/src/table/swipebar/swipebar.component.ts b/projects/ng-aquila/src/table/swipebar/swipebar.component.ts
new file mode 100644
index 000000000..3f86a6559
--- /dev/null
+++ b/projects/ng-aquila/src/table/swipebar/swipebar.component.ts
@@ -0,0 +1,137 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ViewChild,
+  NgZone,
+  HostListener,
+  AfterViewInit,
+  Input
+} from '@angular/core';
+
+@Component({
+  selector: 'nx-swipebar',
+  templateUrl: 'swipebar.component.html',
+  styleUrls: ['swipebar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NxSwipebarComponent implements AfterViewInit {
+    @ViewChild('element')
+  private _element: ElementRef;
+
+  @ViewChild('scrollable')
+  private _scrollable: ElementRef;
+
+  @ViewChild('indicator')
+  private _indicator: ElementRef;
+
+  private _barLength = 0;
+
+  private _position = 0;
+
+  private _startX = 0;
+
+  private _mousedown = false;
+
+  private _showBar = false;
+
+  /**
+   * The label for this swipebar. Default: ''
+   */
+  @Input()
+  label: string = '';
+
+  constructor(private zone: NgZone) {
+    this._onMousedown = this._onMousedown.bind(this);
+    this._onMousemove = this._onMousemove.bind(this);
+    this._onMouseup = this._onMouseup.bind(this);
+    this._onScroll = this._onScroll.bind(this);
+  }
+
+  ngAfterViewInit() {
+    this._onResize();
+
+    // Run outside zone to not trigger change detection when scrolling.
+    this.zone.runOutsideAngular(() => {
+      this._scrollable.nativeElement.addEventListener('scroll', this._onScroll);
+      this._indicator.nativeElement.addEventListener(
+        'mousedown',
+        this._onMousedown
+      );
+    });
+  }
+
+  @HostListener('window:resize')
+  _onResize() {
+    if (!this._scrollable) {
+      return;
+    }
+
+    const { scrollWidth, offsetWidth } = this._scrollable.nativeElement;
+    this._showBar = scrollWidth > offsetWidth;
+    this._barLength = Math.max(80, offsetWidth / scrollWidth * offsetWidth);
+    this._updateIndicator();
+  }
+
+  private _onScroll({ target }) {
+    if (this._mousedown) {
+      return;
+    }
+
+    const { scrollWidth, clientWidth } = this._scrollable.nativeElement;
+    this._position = Math.floor(
+      (target.scrollLeft / (scrollWidth - clientWidth)) *
+        (target.offsetWidth - this._barLength)
+    );
+    this._updateIndicator();
+  }
+
+  private _onMousedown($event) {
+    this._startX = $event.clientX;
+    this._mousedown = true;
+
+    document.addEventListener('mousemove', this._onMousemove);
+    document.addEventListener('mouseup', this._onMouseup);
+  }
+
+  private _onMousemove($event) {
+    const { offsetWidth } = this._scrollable.nativeElement;
+
+    this._position = Math.max(
+      0,
+      Math.min(
+        offsetWidth - this._barLength,
+        this._position + $event.clientX - this._startX
+      )
+    );
+    this._startX = $event.clientX;
+
+    this._updateScrollablePosition();
+    this._updateIndicator();
+  }
+
+  private _onMouseup() {
+    document.removeEventListener('mousemove', this._onMousemove);
+    document.removeEventListener('mouseup', this._onMouseup);
+    this._mousedown = false;
+  }
+
+  private _updateScrollablePosition() {
+    requestAnimationFrame(() => {
+      const { scrollWidth, clientWidth, offsetWidth } = this._scrollable.nativeElement;
+      this._scrollable.nativeElement.scrollLeft =
+        (this._position / (offsetWidth - this._barLength)) *
+        (scrollWidth - clientWidth);
+    });
+  }
+
+  private _updateIndicator() {
+    requestAnimationFrame(() => {
+      this._element.nativeElement.style.display = this._showBar ? 'block' : 'none';
+      this._indicator.nativeElement.style.transform = `translateX(${
+        this._position
+      }px)`;
+      this._indicator.nativeElement.style.width = `${this._barLength}px`;
+    });
+  }
+}
diff --git a/projects/ng-aquila/src/table/table.md b/projects/ng-aquila/src/table/table.md
index 0a42310e7..3e7dd8b8f 100644
--- a/projects/ng-aquila/src/table/table.md
+++ b/projects/ng-aquila/src/table/table.md
@@ -11,6 +11,8 @@ This component is implemented on top of the native HTML table `<table></table>`
 We provide the following  directives: `nxTableCell`, `nxTableRow` and `nxHeaderCell` to apply our style respectively on the top of `td`, `tr` and `th`.
 This setup maintains the capabilities of the native table such as accessibility and native HTML markups within cells.
 
+For better mobile side-to-side scrolling user experience the table should be placed in a horizontal scroll indicator `<nx-swipebar>` component.
+
 <!-- example(table) -->
 
 ### Condensed mode
diff --git a/projects/ng-aquila/src/table/table.module.ts b/projects/ng-aquila/src/table/table.module.ts
index 0db64b84e..ea4c8f17b 100644
--- a/projects/ng-aquila/src/table/table.module.ts
+++ b/projects/ng-aquila/src/table/table.module.ts
@@ -12,6 +12,8 @@ import { NxExpandableTableDirective } from './expandable/expandable-table.direct
 import { NxSortHeaderComponent } from './sort-header/sort-header.component';
 import { NxSortDirective } from './sort-header/sort.directive';
 import { NxSortHeaderIntl } from './sort-header/sort-header-intl';
+import { NxSwipebarComponent } from './swipebar/swipebar.component';
+import { NxCopytextModule } from '@aposin/ng-aquila/copytext';
 
 const EXPORTED_DECLARED_ELEMENTS = [
   NxHeaderCellDirective,
@@ -24,14 +26,17 @@ const EXPORTED_DECLARED_ELEMENTS = [
   NxExpandableTableRowComponent,
   NxExpandableTableCellComponent,
   NxSortHeaderComponent,
-  NxSortDirective
+  NxSortDirective,
+  NxSwipebarComponent
 ];
+
 @NgModule({
   declarations: EXPORTED_DECLARED_ELEMENTS,
   exports: EXPORTED_DECLARED_ELEMENTS,
   imports: [
     CommonModule,
-    NxIconModule
+    NxIconModule,
+    NxCopytextModule
   ],
   providers: [ NxSortHeaderIntl ],
 })