From 309c33219ae9c71a6ab1da541c92e331c9b91b5e Mon Sep 17 00:00:00 2001
From: pablohpsilva <pablohpsilva@gmail.com>
Date: Mon, 22 May 2017 01:06:40 -0300
Subject: [PATCH] fixed header and footer

---
 docs/src/pages/components/Table.vue |  4 ++--
 src/components/mdTable/mdTable.vue  | 34 ++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/components/Table.vue b/docs/src/pages/components/Table.vue
index 1c530e5..27a52fa 100644
--- a/docs/src/pages/components/Table.vue
+++ b/docs/src/pages/components/Table.vue
@@ -523,8 +523,8 @@
                 </md-button>
               </md-table-alternate-header>
 
-              <md-table md-sort="calories">
-                <md-table-header>
+              <md-table md-sort="calories" mdFixedHeader>
+                <md-table-header slot="header">
                   <md-table-row>
                     <md-table-head md-sort-by="dessert">Dessert (100g serving)</md-table-head>
                     <md-table-head md-sort-by="type" width="100px">Type</md-table-head>
diff --git a/src/components/mdTable/mdTable.vue b/src/components/mdTable/mdTable.vue
index 4d34469..f76a7e5 100644
--- a/src/components/mdTable/mdTable.vue
+++ b/src/components/mdTable/mdTable.vue
@@ -1,11 +1,33 @@
-<template>
+<!--<template>
   <div class="md-table" :class="[themeClass]">
     <table>
       <slot></slot>
     </table>
   </div>
+</template>-->
+<template>
+  <div class="md-table" :class="[themeClass]">
+    <div v-if="mdFixedHeader">
+      <table class="md-table-fixed-header" style="box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.08);">
+        <slot name="header"></slot>
+      </table>
+    </div>
+    <div :style="bodyStyle" class="md-table" :class="[themeClass]">
+      <table>
+        <slot v-if="!mdFixedHeader" name="header"></slot>
+        <slot></slot>
+        <slot v-if="!mdFixedFooter" name="footer"></slot>
+      </table>
+    </div>
+    <div v-if="mdFixedFooter">
+      <table>
+        <slot name="footer"></slot>
+      </table>
+    </div>
+  </div>
 </template>
 
+
 <style lang="scss" src="./mdTable.scss"></style>
 
 <script>
@@ -15,6 +37,8 @@
   export default {
     name: 'md-table',
     props: {
+      mdFixedHeader: Boolean,
+      mdFixedFooter: Boolean,
       mdSortType: String,
       mdSort: String
     },
@@ -30,6 +54,14 @@
         selectedRows: {}
       };
     },
+    computed: {
+      bodyStyle() {
+        return {
+          overflow: 'auto',
+          height: this.height
+        };
+      }
+    },
     methods: {
       emitSort(name) {
         this.sortBy = name;