refactor(theme-shared): improve table scrolling user experience

#2537

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>

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss

@@ -1,3 +0,0 @@
-.ui-table-scrollable-wrapper {
-  overflow: auto;
-}

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;

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 {