fixed header and footer

Author: pablohpsilva

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>

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;