andyperlitch · Aonepathan · Oct 31, 2017 · Oct 31, 2017 · Nov 1, 2017 · Nov 2, 2017
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/demo.component.css b/src/app/demo.component.css
@@ -0,0 +1,6 @@
+.app-demo {
+  width: 80%;
+  display: block;
+  margin: 0 auto;
+  height: 600px;
+}
diff --git a/src/app/demo.component.ts b/src/app/demo.component.ts
@@ -22,26 +22,21 @@ const INSTRUMENTS: string[] = [
 @Component({
   selector: 'app-demo-app',
   template: `
-    <p class="mt-3 mb-2">
-      The following table has {{NUM_ROWS}} rows, and uses row-virtualization so
-      the DOM is not overloaded. All sorting and filtering occurs on the client
-      side.
-    </p>
-    <super-table
-      [rows]="rows"
-      [columns]="columns"
-      [options]="options"
-      [tableClasses]="tableClasses">
-    </super-table>
+    <div class="app-demo">
+      <p class="mt-3 mb-2">
+        The following table has {{NUM_ROWS}} rows, and uses row-virtualization so
+        the DOM is not overloaded. All sorting and filtering occurs on the client
+        side.
+      </p>
+      <super-table
+        [rows]="rows"
+        [columns]="columns"
+        [options]="options"
+        [tableClasses]="tableClasses">
+      </super-table>
+    </div>
   `,
-  styles: [`
-    :host {
-      width: 80%;
-      display: block;
-      margin: 0 auto;
-      height: 600px;
-    }
-  `]
+  styleUrls: ['../masterStyle.css']
 })
 export class DemoComponent implements OnInit {
   tableClasses: string[] = ['table', 'table-bordered'];

diff --git a/src/lib/dummy-rows.component.css b/src/lib/dummy-rows.component.css
@@ -0,0 +1,10 @@
+.super-table-dummy-rows {
+  border: none !important;
+}
+
+td {
+  padding: 0 !important;
+  border: none !important;
+  background-repeat: repeat;
+  background-position: 0 -1px;
+}
diff --git a/src/lib/dummy-rows.component.ts b/src/lib/dummy-rows.component.ts
@@ -7,26 +7,17 @@ import {
   /* tslint:disable-next-line */
   selector: '[super-table-dummy-rows]',
   template: `
-    <tr [style.height]="rowStyleHeight()">
-      <td
-        [attr.colspan]="columnCount"
-        [style.backgroundImage]="'url(' + BG_IMAGE_DATA + ')'"
-        [style.backgroundSize]="backgroundSize()">
-      </td>
-    </tr>
+    <div class="super-table-dummy-rows">
+      <tr [style.height]="rowStyleHeight()">
+        <td
+          [attr.colspan]="columnCount"
+          [style.backgroundImage]="'url(' + BG_IMAGE_DATA + ')'"
+          [style.backgroundSize]="backgroundSize()">
+          </td>
+      </tr>
+    </div>
   `,
-  styles: [`
-    :host {
-      border: none !important;
-    }
-    td {
-      padding: 0 !important;
-      border: none !important;
-      background-repeat: repeat;
-      background-position: 0 -1px;
-    }
-
-  `]
+  styleUrls: ['../masterStyle.css']
 })
 export class DummyRowsComponent {
 

diff --git a/src/lib/enum-filter.component.css b/src/lib/enum-filter.component.css
@@ -0,0 +1,29 @@
+.super-table-enum-filter {
+  position: absolute;
+  background: white;
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+  box-shadow: 0 1px 10px -1px rgba(0,0,0,0.2);
+}
+
+.clear-filter {
+  border-bottom: 1px solid #DDD;
+  padding: 5px 0;
+}
+
+.close-dropdown {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  border: none;
+  background: transparent;
+  color: #CCC;
+  display: block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+}
+
+.close-dropdown:hover {
+  color: #AAA;
+}
diff --git a/src/lib/enum-filter.component.ts b/src/lib/enum-filter.component.ts
@@ -17,43 +17,18 @@ import { forEach, values } from 'lodash';
 @Component({
   selector: 'super-table-enum-filter-dropdown',
   template: `
-    <div class="clear-filter">
-      <button class="btn btn-secondary clear-filter-btn" role="button" (click)="showAll()">show all</button>
+    <div class="super-table-enum-filter">
+      <div class="clear-filter">
+        <button class="btn btn-secondary clear-filter-btn" role="button" (click)="showAll()">show all</button>
+      </div>
+      <div *ngFor="let choice of column.def.filterChoices">
+        <input type="checkbox" [(ngModel)]="column.filterValue[choice]" (ngModelChange)="onChoiceChange($event)" />
+        {{ choice }}
+      </div>
+      <button role="button" class="close-dropdown" (click)="destroyMe()">&times;</button>
     </div>
-    <div *ngFor="let choice of column.def.filterChoices">
-      <input type="checkbox" [(ngModel)]="column.filterValue[choice]" (ngModelChange)="onChoiceChange($event)" />
-      {{ choice }}
-    </div>
-    <button role="button" class="close-dropdown" (click)="destroyMe()">&times;</button>
   `,
-  styles: [`
-    :host {
-      position: absolute;
-      background: white;
-      padding: 5px 10px;
-      border: 1px solid #ddd;
-      box-shadow: 0 1px 10px -1px rgba(0,0,0,0.2);
-    }
-    .clear-filter {
-      border-bottom: 1px solid #DDD;
-      padding: 5px 0;
-    }
-    .close-dropdown {
-      position: absolute;
-      top: 5px;
-      right: 10px;
-      border: none;
-      background: transparent;
-      color: #CCC;
-      display: block;
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-    }
-    .close-dropdown:hover {
-      color: #AAA;
-    }
-  `]
+  styleUrls: ['../masterStyle.css']
 })
 export class EnumFilterDropdownComponent implements OnInit, OnDestroy {
   @Input() column: ColumnState;

diff --git a/src/lib/super-table-body.component.css b/src/lib/super-table-body.component.css
@@ -0,0 +1,19 @@
+.super-table-body {
+  display: block;
+  overflow: auto;
+}
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  margin-bottom: 0;
+}
+
+thead.sizing-thead th {
+  padding: 0 !important;
+  border-width: 0;
+}
+
+tbody.dummy-rows, tbody.visible-rows {
+  border-top: none;
+}
diff --git a/src/lib/super-table-body.component.ts b/src/lib/super-table-body.component.ts
@@ -17,49 +17,34 @@ const DEBOUNCE_DELAY = 250;
 @Component({
   selector: 'super-table-body',
   template: `
-    <table [ngClass]="tableClasses">
-      <thead class="sizing-thead">
-        <tr>
-          <th scope="col" *ngFor="let column of state.columns" super-table-header [column]="column" [noHeight]="true"></th>
-        </tr>
-      </thead>
-      <tbody
-        class="dummy-rows"
-        super-table-dummy-rows
-        [columnCount]="state.columns.length"
-        [rowHeight]="rowHeight"
-        [rowCount]="rowOffset">
-      </tbody>
-      <tbody class="visible-rows">
-        <tr *ngFor="let row of visibleRows" super-table-row [row]="row"></tr>
-      </tbody>
-      <tbody
-        class="dummy-rows"
-        super-table-dummy-rows
-        [columnCount]="state.columns.length"
-        [rowHeight]="rowHeight"
-        [rowCount]="rows.length - rowOffset - visibleRows.length - 1">
-      </tbody>
-    </table>
+    <div class="super-table-body">
+      <table [ngClass]="tableClasses">
+        <thead class="sizing-thead">
+          <tr>
+            <th scope="col" *ngFor="let column of state.columns" super-table-header [column]="column" [noHeight]="true"></th>
+          </tr>
+        </thead>
+        <tbody
+          class="dummy-rows"
+          super-table-dummy-rows
+          [columnCount]="state.columns.length"
+          [rowHeight]="rowHeight"
+          [rowCount]="rowOffset">
+        </tbody>
+        <tbody class="visible-rows">
+          <tr *ngFor="let row of visibleRows" super-table-row [row]="row"></tr>
+        </tbody>
+        <tbody
+          class="dummy-rows"
+          super-table-dummy-rows
+          [columnCount]="state.columns.length"
+          [rowHeight]="rowHeight"
+          [rowCount]="rows.length - rowOffset - visibleRows.length - 1">
+        </tbody>
+      </table>
+    </div>
   `,
-  styles: [`
-    :host {
-      display: block;
-      overflow: auto;
-    }
-    table {
-      table-layout: fixed;
-      width: 100%;
-      margin-bottom: 0;
-    }
-    thead.sizing-thead th {
-      padding: 0 !important;
-      border-width: 0;
-    }
-    tbody.dummy-rows, tbody.visible-rows {
-      border-top: none;
-    }
-  `]
+  styleUrls: ['../masterStyle.css']
 })
 export class SuperTableBodyComponent implements OnChanges {
   @Input() rows: Array<any>;

diff --git a/src/lib/super-table-head.component.css b/src/lib/super-table-head.component.css
@@ -0,0 +1,20 @@
+.super-table-head {
+  overflow-y: scroll;
+  display: block;
+}
+
+.hasSort {
+  cursor: pointer;
+}
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  margin-bottom: 0;
+  border-bottom: none;
+}
+
+.filter-row td {
+  padding: 0;
+  vertical-align: middle;
+}
diff --git a/src/lib/super-table-head.component.ts b/src/lib/super-table-head.component.ts
@@ -4,46 +4,30 @@ import { SuperTableState } from './super-table-state';
 @Component({
   selector: 'super-table-head',
   template: `
-    <table [ngClass]="tableClasses">
-      <thead>
-        <tr>
-          <th
-            *ngFor="let column of state.columns"
-            super-table-header
-            scope="col"
-            [column]="column"
-            [ngClass]="{ hasSort: column.hasSort }"></th>
-        </tr>
-        <tr *ngIf="state.hasAnyFilters" class="filter-row">
-          <td *ngFor="let column of state.columns">
-            <div *ngIf="column.hasFilter" [ngSwitch]="column.def.filter.type">
-              <div *ngSwitchCase="'TEXT'" super-table-text-filter [filter]="column.def.filter" [column]="column"></div>
-              <div *ngSwitchCase="'ENUM'" super-table-enum-filter [filter]="column.def.filter" [column]="column"></div>
-            </div>
-          </td>
-        </tr>
-      </thead>
-    </table>
+    <div class="super-table-head">
+      <table [ngClass]="tableClasses">
+        <thead>
+          <tr>
+            <th
+              *ngFor="let column of state.columns"
+              super-table-header
+              scope="col"
+              [column]="column"
+              [ngClass]="{ hasSort: column.hasSort }"></th>
+          </tr>
+          <tr *ngIf="state.hasAnyFilters" class="filter-row">
+            <td *ngFor="let column of state.columns">
+              <div *ngIf="column.hasFilter" [ngSwitch]="column.def.filter.type">
+                <div *ngSwitchCase="'TEXT'" super-table-text-filter [filter]="column.def.filter" [column]="column"></div>
+                <div *ngSwitchCase="'ENUM'" super-table-enum-filter [filter]="column.def.filter" [column]="column"></div>
+              </div>
+            </td>
+          </tr>
+        </thead>
+      </table>
+    </div>
   `,
-  styles: [`
-    :host {
-      overflow-y: scroll;
-      display: block;
-    }
-    .hasSort {
-      cursor: pointer;
-    }
-    table {
-      table-layout: fixed;
-      width: 100%;
-      margin-bottom: 0;
-      border-bottom: none;
-    }
-    .filter-row td {
-      padding: 0;
-      vertical-align: middle;
-    }
-  `]
+  styleUrls: ['../masterStyle.css']
 })
 export class SuperTableHeadComponent {
   @Input() tableClasses: any;

diff --git a/src/lib/super-table.component.css b/src/lib/super-table.component.css
@@ -0,0 +1,8 @@
+.super-table {
+  position: relative;
+  display: block;
+}
+
+.loading-message {
+  text-align: center;
+}