Add TableList, fixes to dashboard content

Fix sidebar title

src/components/BaseTable.vue

@@ -0,0 +1,66 @@
+<template>
+  <table class="table tablesorter" :class="tableClass">
+    <thead :class="theadClasses">
+    <slot name="columns">
+      <tr>
+        <th v-for="column in columns" :key="column">{{column}}</th>
+      </tr>
+    </slot>
+    </thead>
+    <tbody :class="tbodyClasses">
+    <tr v-for="(item, index) in data" :key="index">
+      <slot :row="item">
+        <td v-for="(column, index) in columns"
+            :key="index"
+            v-if="hasValue(item, column)">
+          {{itemValue(item, column)}}
+        </td>
+      </slot>
+    </tr>
+    </tbody>
+  </table>
+</template>
+<script>
+  export default {
+    name: 'base-table',
+    props: {
+      columns: Array,
+      data: Array,
+      type: {
+        type: String, // striped | hover
+        default: ""
+      },
+      title: {
+        type: String,
+        default: ""
+      },
+      theadClasses: {
+        type: String,
+        default: ''
+      },
+      tbodyClasses: {
+        type: String,
+        default: ''
+      },
+      subTitle: {
+        type: String,
+        default: ""
+      }
+    },
+    computed: {
+      tableClass() {
+        return this.type && `table-${this.type}`;
+      }
+    },
+    methods: {
+      hasValue(item, column) {
+        return item[column.toLowerCase()] !== "undefined";
+      },
+      itemValue(item, column) {
+        return item[column.toLowerCase()];
+      }
+    }
+  };
+</script>
+<style>
+</style>

src/components/PaperTable.vue

@@ -1,56 +0,0 @@
-<template>
-  <table class="table" :class="tableClass">
-    <thead>
-    <slot name="columns">
-      <th v-for="column in columns" :key="column">{{column}}</th>
-    </slot>
-    </thead>
-    <tbody>
-    <tr v-for="(item, index) in data" :key="index">
-      <slot :row="item">
-        <td v-for="(column, index) in columns"
-            :key="index"
-            v-if="hasValue(item, column)">
-          {{itemValue(item, column)}}
-        </td>
-      </slot>
-    </tr>
-    </tbody>
-  </table>
-</template>
-<script>
-export default {
-  name: 'paper-table',
-  props: {
-    columns: Array,
-    data: Array,
-    type: {
-      type: String, // striped | hover
-      default: "striped"
-    },
-    title: {
-      type: String,
-      default: ""
-    },
-    subTitle: {
-      type: String,
-      default: ""
-    }
-  },
-  computed: {
-    tableClass() {
-      return `table-${this.type}`;
-    }
-  },
-  methods: {
-    hasValue(item, column) {
-      return item[column.toLowerCase()] !== "undefined";
-    },
-    itemValue(item, column) {
-      return item[column.toLowerCase()];
-    }
-  }
-};
-</script>
-<style>
-</style>

src/components/SidebarPlugin/SideBar.vue

@@ -9,10 +9,10 @@
     <!-- -->
     <div class="sidebar-wrapper" id="style-3">
       <div class="logo">
-        <a href="#" class="simple-text">
+        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
-            <div class="logo-img">
+          {{shortTitle}}
-                <!--<img src="@/assets/img/vue-logo.png" alt="">-->
+        </a>
-            </div>
+        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
           {{title}}
         </a>
       </div>
@@ -43,7 +43,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: "Black Dashboard"
+      default: "Creative Tim"
     },
     backgroundColor: {
       type: String,
@@ -94,6 +94,11 @@ export default {
      */
     arrowMovePx() {
       return this.linkHeight * this.activeLinkIndex;
+    },
+    shortTitle() {
+      return this.title.split(' ')
+        .map(word => word.charAt(0))
+        .join('').toUpperCase();
     }
   },
   data() {

src/components/index.js

@@ -1,7 +1,7 @@
 import FormGroupInput from "./Inputs/formGroupInput.vue";
 
 import BaseDropdown from "./BaseDropdown.vue";
-import PaperTable from "./PaperTable.vue";
+import BaseTable from "./BaseTable.vue";
 import BaseButton from "./BaseButton";
 import BaseAlert from "./BaseAlert";
 
@@ -16,7 +16,7 @@ export {
   Card,
   ChartCard,
   StatsCard,
-  PaperTable,
+  BaseTable,
   BaseDropdown,
   BaseButton,
   BaseAlert,

src/layout/dashboard/Content.vue

@@ -1,27 +1,16 @@
 <template>
   <div class="content">
-    <div class="container-fluid">
+    <fade-transition :duration="100" mode="out-in">
-        <transition name="fade" mode="out-in">
+      <!-- your content here -->
-          <!-- your content here -->
+      <router-view></router-view>
-          <router-view></router-view>
+    </fade-transition>
-        </transition>
-    </div>
   </div>
 </template>
 <script>
-export default {};
+  import {FadeTransition} from 'vue2-transitions';
+  export default {
+    components: {
+      FadeTransition
+    }
+  };
 </script>
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.1s;
-}
-
-.fade-enter,
-  .fade-leave-to
-  /* .fade-leave-active in <2.1.8 */
-
- {
-  opacity: 0;
-}
-</style>

src/pages/TableList.vue

@@ -1,11 +1,12 @@
 <template>
     <div class="row">
       <div class="col-12">
-        <card :title="table1.title" :subTitle="table1.subTitle">
+        <card :title="table1.title">
-          <div slot="raw-content" class="table-responsive">
+          <div class="table-responsive">
-            <paper-table :data="table1.data" :columns="table1.columns">
+            <base-table :data="table1.data"
-
+                        :columns="table1.columns"
-            </paper-table>
+                        thead-classes="text-primary">
+            </base-table>
           </div>
         </card>
       </div>
@@ -13,10 +14,10 @@
       <div class="col-12">
         <card class="card-plain">
           <div class="table-full-width table-responsive">
-            <paper-table type="hover" :title="table2.title" :sub-title="table2.subTitle" :data="table2.data"
+            <base-table :title="table2.title" :sub-title="table2.subTitle" :data="table2.data"
                          :columns="table2.columns">
 
-            </paper-table>
+            </base-table>
           </div>
         </card>
       </div>
@@ -24,15 +25,15 @@
     </div>
 </template>
 <script>
-import { PaperTable } from "@/components";
+import { BaseTable } from "@/components";
-const tableColumns = ["Id", "Name", "Salary", "Country", "City"];
+const tableColumns = ["Name", "Country", "City", "Salary"];
 const tableData = [
   {
     id: 1,
     name: "Dakota Rice",
     salary: "$36.738",
     country: "Niger",
-    city: "Oud-Turnhout"
+    city: "Oud-Turnhout",
   },
   {
     id: 2,
@@ -61,24 +62,36 @@ const tableData = [
     salary: "$63,542",
     country: "Malawi",
     city: "Feldkirchen in Kärnten"
+  },
+  {
+    id: 6,
+    name: 'Mason Porter',
+    salary: '$98,615',
+    country: 'Chile',
+    city: 'Gloucester'
+  },
+  {
+    id: 7,
+    name: 'Jon Porter',
+    salary: '$78,615',
+    country: 'Portugal',
+    city: 'Gloucester'
   }
 ];
 
 export default {
   components: {
-    PaperTable
+    BaseTable
   },
   data() {
     return {
       table1: {
-        title: "Stripped Table",
+        title: "Simple Table",
-        subTitle: "Here is a subtitle for this table",
         columns: [...tableColumns],
         data: [...tableData]
       },
       table2: {
         title: "Table on Plain Background",
-        subTitle: "Here is a subtitle for this table",
         columns: [...tableColumns],
         data: [...tableData]
       }