adopted-ember-addons · vanya-sen · Oct 10, 2017
diff --git a/addon/components/columns/base.js b/addon/components/columns/base.js
@@ -74,6 +74,8 @@ const Column = Component.extend(DraggableColumnMixin, {
    */
   sortIcons: null,
 
+  fix: false,
+
   /**
    * @property sortIconProperty
    * @type {String|null}

diff --git a/addon/components/lt-body.js b/addon/components/lt-body.js
@@ -323,8 +323,8 @@ export default Component.extend({
   },
 
   _setupVirtualScrollbar() {
-    let { fixedHeader, fixedFooter } = this.get('sharedOptions');
-    this.set('useVirtualScrollbar', fixedHeader || fixedFooter);
+      let { fixedFooter } = this.get('sharedOptions');
+      this.set('useVirtualScrollbar',  fixedFooter);
   },
 
   onRowsChange: observer('rows.[]', function() {

diff --git a/addon/styles/addon.css b/addon/styles/addon.css
@@ -110,3 +110,59 @@
 .ember-light-table .lt-row.is-selectable {
   cursor: pointer;
 }
+
+
+/*Following is the custom CSS to mock fixed header layout*/
+
+.light-table-wrapper {
+  padding-top: 2.5rem;
+  /*Leave room for the header area*/
+}
+
+.light-table-wrapper.scrollable {
+  position: relative;
+  height: 100%;
+}
+
+.light-table-wrapper .scroll-area {
+  overflow: auto;
+  /*Make this box scroll*/
+  height: 100%;
+  border-bottom: 0.0625rem solid #ECEFF1;
+  border-top: 0.0625rem solid #ECEFF1;
+}
+
+.light-table-wrapper .fixable .fix {
+  position: absolute;
+  /*Escape the scrolling context*/
+}
+
+.light-table-wrapper thead {
+  border: 0;
+}
+
+.light-table-wrapper table {
+  table-layout: fixed;
+}
+
+.light-table-wrapper .fixable .fix {
+  /*Move above the scroll area into the fake header*/
+  top: 0;
+  /*Must absolutely position the top to avoid bugs in Firefox and IE6*/
+  height: 2.5rem;
+  line-height: 2.5rem;
+}
+
+.light-table-wrapper .fixable .lt-column {
+  position: initial;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.light-table-wrapper tr.fixable:first-child {
+  height: auto !important;
+}
+
+.light-table-wrapper .ember-light-table {
+  overflow: initial !important;
+}
diff --git a/addon/templates/components/columns/base.hbs b/addon/templates/components/columns/base.hbs
@@ -1,11 +1,13 @@
-{{#if column.component}}
-  {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}}
-{{else}}
-  {{label}}
-  {{#if sortIconProperty}}
-    <i class="lt-sort-icon {{get sortIcons sortIconProperty}}"></i>
-  {{/if}}
-{{/if}}
+<div class="{{if fix "fix"}}">
+    {{#if column.component}}
+      {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}}
+    {{else}}
+      {{label}}
+      {{#if sortIconProperty}}
+        <i class="lt-sort-icon {{get sortIcons sortIconProperty}}"></i>
+      {{/if}}
+    {{/if}}
+</div>
 
 {{#if isResizable}}
   {{lt-column-resizer

diff --git a/addon/templates/components/light-table.hbs b/addon/templates/components/light-table.hbs
@@ -1,26 +1,32 @@
-{{yield (hash
-  head=(component 'lt-head'
-    tableId=elementId
-    table=table
-    tableActions=tableActions
-    extra=extra
-    tableClassNames=tableClassNames
-    sharedOptions=sharedOptions
-  )
-  body=(component 'lt-body'
-    tableId=elementId
-    table=table
-    tableActions=tableActions
-    extra=extra
-    tableClassNames=tableClassNames
-    sharedOptions=sharedOptions
-  )
-  foot=(component 'lt-foot'
-    tableId=elementId
-    table=table
-    tableActions=tableActions
-    extra=extra
-    tableClassNames=tableClassNames
-    sharedOptions=sharedOptions
-  )
-)}}
+<div class="light-table-wrapper scrollable">
+    <div class="scroll-area">
+        <table class={{tableClassNames}}>
+            {{yield (hash
+              head=(component 'lt-head'
+                tableId=elementId
+                table=table
+                tableActions=tableActions
+                extra=extra
+                tableClassNames=tableClassNames
+                sharedOptions=sharedOptions
+              )
+              body=(component 'lt-body'
+                tableId=elementId
+                table=table
+                tableActions=tableActions
+                extra=extra
+                tableClassNames=tableClassNames
+                sharedOptions=sharedOptions
+              )
+              foot=(component 'lt-foot'
+                tableId=elementId
+                table=table
+                tableActions=tableActions
+                extra=extra
+                tableClassNames=tableClassNames
+                sharedOptions=sharedOptions
+              )
+            )}}
+        </table>
+    </div>
+</div>
diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs
@@ -11,9 +11,8 @@
     scrollTo=targetScrollOffset
     onScrollY=(action 'onScroll')
   }}
-    <div id={{concat tableId '_inline_head'}} class="lt-inline lt-head"></div>
+  <thead id={{concat tableId '_inline_head'}} class="lt-inline lt-head"></thead>
 
-    <table class={{tableClassNames}}>
       <tbody class="lt-body">
         {{#if enableScaffolding}}
           <tr class="lt-scaffolding-row">
@@ -52,12 +51,11 @@
           ) rows}}
         {{/if}}
       </tbody>
-    </table>
 
     {{#if onScrolledToBottom}}
       {{lt.infinity rows=rows onScrolledToBottom=onScrolledToBottom scrollBuffer=scrollBuffer}}
     {{/if}}
 
-    <div id={{concat tableId '_inline_foot'}} class="lt-inline lt-foot"></div>
+    <tfoot id={{concat tableId '_inline_foot'}} class="lt-inline lt-foot"></tfoot>
   {{/lt-scrollable}}
 {{/with}}
diff --git a/addon/templates/components/lt-foot.hbs b/addon/templates/components/lt-foot.hbs
@@ -1,6 +1,4 @@
-{{#ember-wormhole to=(concat tableId '_inline_foot') renderInPlace=renderInPlace}}
-  <table class={{tableClassNames}}>
-    <tfoot class="lt-foot">
+{{#ember-wormhole to=(concat tableId '_inline_foot')}}
       {{!-- Scaffolding is needed here to allow use of colspan in the footer --}}
       <tr class="lt-scaffolding-row">
         {{#each columns as |column|}}
@@ -26,6 +24,4 @@
           {{/each}}
         </tr>
       {{/if}}
-    </tfoot>
-  </table>
 {{/ember-wormhole}}
diff --git a/addon/templates/components/lt-head.hbs b/addon/templates/components/lt-head.hbs
@@ -1,6 +1,4 @@
-{{#ember-wormhole to=(concat tableId '_inline_head') renderInPlace=renderInPlace}}
-  <table class={{tableClassNames}}>
-    <thead class="lt-head">
+{{#ember-wormhole to=(concat tableId '_inline_head')}}
       {{#if hasBlock}}
         {{yield columnGroups subColumns}}
       {{else}}
@@ -16,14 +14,15 @@
           </tr>
         {{/if}}
 
-        <tr>
+        <tr class="{{if fixed "fixable" "" }}">
           {{#each columnGroups as |column|}}
             {{component (concat 'light-table/columns/' column.type) column
               table=table
               tableActions=tableActions
               extra=extra
               sortIcons=sortIcons
               resizeOnDrag=resizeOnDrag
+              fix = fixed
               click=(action 'onColumnClick' column)
               doubleClick=(action 'onColumnDoubleClick' column)
               onColumnResized=(action 'onColumnResized')
@@ -50,6 +49,4 @@
           {{/each}}
         </tr>
       {{/if}}
-    </thead>
-  </table>
 {{/ember-wormhole}}