From 746d156e15cf62b405c20fef8079b296405efd40 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Mon, 6 Jan 2020 12:02:00 +0300
Subject: [PATCH] refactor(theme-shared): improve table scrolling user
 experience

#2537
---
 .../lib/components/table/table.component.html | 78 ++++++++++++++-----
 .../lib/components/table/table.component.scss |  3 -
 .../lib/components/table/table.component.ts   |  8 +-
 .../theme-shared/src/lib/constants/styles.ts  |  1 +
 4 files changed, 67 insertions(+), 23 deletions(-)
 delete mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
index 6f0d080e9d..fa53170728 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
@@ -1,22 +1,8 @@
-<div class="ui-table ui-widget" [style.max-height.px]="maxHeight">
+<div class="ui-table ui-widget">
   <div class="ui-table-wrapper">
-    <div class="ui-table-scrollable-wrapper">
-      <table>
-        <colgroup>
-          <ng-container *ngTemplateOutlet="colgroupTemplate"></ng-container>
-        </colgroup>
-        <thead class="ui-table-thead">
-          <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
-        </thead>
-        <tbody class="ui-table-tbody">
-          <ng-container
-            *ngFor="let val of slicedValue"
-            [ngTemplateOutlet]="bodyTemplate"
-            [ngTemplateOutletContext]="{ $implicit: val }"
-          ></ng-container>
-        </tbody>
-      </table>
-    </div>
+    <ng-container
+      *ngTemplateOutlet="scrollable ? scrollableTemplate : defaultTemplate"
+    ></ng-container>
     <abp-paginator
       *ngIf="rows"
       [totalPages]="totalPages"
@@ -24,3 +10,59 @@
     ></abp-paginator>
   </div>
 </div>
+
+<ng-template #scrollableTemplate>
+  <div class="ui-table-scrollable-wrapper">
+    <div class="ui-table-scrollable-view"></div>
+    <div class="ui-table-scrollable-header ui-widget-header">
+      <div [style.margin-left.px]="-bodyScrollLeft" class="ui-table-scrollable-header-box">
+        <table class="ui-table-scrollable-header-table">
+          <ng-container *ngTemplateOutlet="colGroup"></ng-container>
+          <ng-container *ngTemplateOutlet="head"></ng-container>
+          <tbody></tbody>
+        </table>
+      </div>
+    </div>
+    <div
+      #scrollableBody
+      (scroll)="bodyScrollLeft = scrollableBody.scrollLeft"
+      class="ui-table-scrollable-body"
+      [style.max-height]="scrollHeight"
+    >
+      <table class="ui-table-scrollable-body-table">
+        <ng-container *ngTemplateOutlet="colGroup"></ng-container>
+        <ng-container *ngTemplateOutlet="body"></ng-container>
+      </table>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #defaultTemplate>
+  <table>
+    <ng-container *ngTemplateOutlet="colGroup"></ng-container>
+    <ng-container *ngTemplateOutlet="head"></ng-container>
+    <ng-container *ngTemplateOutlet="body"></ng-container>
+  </table>
+</ng-template>
+
+<ng-template #colGroup>
+  <colgroup>
+    <ng-container *ngTemplateOutlet="colgroupTemplate"></ng-container>
+  </colgroup>
+</ng-template>
+
+<ng-template #head>
+  <thead class="ui-table-thead">
+    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
+  </thead>
+</ng-template>
+
+<ng-template #body>
+  <tbody class="ui-table-tbody">
+    <ng-container
+      *ngFor="let val of slicedValue"
+      [ngTemplateOutlet]="bodyTemplate"
+      [ngTemplateOutletContext]="{ $implicit: val }"
+    ></ng-container>
+  </tbody>
+</ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss
deleted file mode 100644
index 4881816a52..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.ui-table-scrollable-wrapper {
-  overflow: auto;
-}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
index f9811c219c..27436393ba 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
@@ -3,7 +3,6 @@ import { Component, OnInit, Input, TemplateRef, Output, EventEmitter } from '@an
 @Component({
   selector: 'abp-table',
   templateUrl: 'table.component.html',
-  styleUrls: ['table.component.scss'],
 })
 export class TableComponent implements OnInit {
   private _totalRecords: number;
@@ -21,7 +20,10 @@ export class TableComponent implements OnInit {
   colgroupTemplate: TemplateRef<any>;
 
   @Input()
-  maxHeight: number;
+  scrollHeight: string;
+
+  @Input()
+  scrollable: boolean;
 
   @Input()
   rows: number;
@@ -31,6 +33,8 @@ export class TableComponent implements OnInit {
 
   page = 1;
 
+  bodyScrollLeft = 0;
+
   @Input()
   get totalRecords(): number {
     return this._totalRecords || this.value.length;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts
index 30185ec6c6..24f7a9a8ea 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts
@@ -30,6 +30,7 @@ export default `
 
 .ui-table-scrollable-body::-webkit-scrollbar {
   height: 5px !important;
+  width: 5px !important;
 }
 
 .ui-table-scrollable-body::-webkit-scrollbar-track {