@eturnity/eturnity_reusable_components 1.0.41 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.41",
+  "version": "1.0.45",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-      <main-table>
+      <main-table titleText="My Table">
         <thead>
           <tr>
             <th>Column 1</th>

package/src/components/tables/mainTable/index.vue

@@ -1,14 +1,19 @@
 <template>
-  <table-scroll>
-    <table-wrapper :fullWidth="fullWidth">
-      <spinner-wrapper v-if="isLoading">
-        <spinner />
-      </spinner-wrapper>
-      <table-container v-else>
-        <slot />
-      </table-container>
-    </table-wrapper>
-  </table-scroll>
+  <page-container>
+    <table-title v-if="titleText">
+      {{ titleText }}
+    </table-title>
+    <table-scroll>
+      <table-wrapper :fullWidth="fullWidth">
+        <spinner-wrapper v-if="isLoading">
+          <spinner />
+        </spinner-wrapper>
+        <table-container v-else>
+          <slot />
+        </table-container>
+      </table-wrapper>
+    </table-scroll>
+  </page-container>
 </template>
 
 <script>
@@ -17,6 +22,14 @@
 import styled from "vue-styled-components"
 import Spinner from "../../spinner"
 
+const PageContainer = styled.div``
+
+const TableTitle = styled.div`
+  margin-bottom: 6px;
+  font-weight: bold;
+  font-size: 13px;
+`
+
 const TableScroll = styled.div`
   position: relative;
   max-width: 100%;
@@ -148,6 +161,10 @@ const TableContainer = styled.table`
       cursor: not-allowed;
     }
 
+    .arrow-dropdown {
+      visibility: hidden;
+    }
+
     &.footer {
       td {
         background-color: ${(props) => props.theme.colors.grey5};
@@ -200,11 +217,15 @@ const TableContainer = styled.table`
       .drag-icon {
         visibility: visible;
       }
+
+      .arrow-dropdown {
+        visibility: visible;
+      }
     }
 
     .drag-container {
       display: table-cell;
-      width: auto;
+      width: 12px;
       vertical-align: middle;
     }
 
@@ -271,6 +292,8 @@ export default {
     SpinnerWrapper,
     Spinner,
     TableContainer,
+    PageContainer,
+    TableTitle,
   },
   props: {
     fullWidth: {
@@ -281,6 +304,10 @@ export default {
       required: false,
       default: false,
     },
+    titleText: {
+      required: false,
+      default: null,
+    },
   },
 }
 </script>