fix: small fixes

src/containers/TheHeaderDropdownAccnt.vue

@@ -5,9 +5,10 @@
     class="c-header-nav-items"
     placement="bottom-end"
     add-menu-classes="pt-0"
+    :show.sync="show"
   >
-    <template #toggler="{click}">
+    <template #toggler>
-      <CLink class="c-header-nav-link" @click="click">
+      <CLink class="c-header-nav-link" @click="show = !show">
         <div class="c-avatar">
           <img
             src="img/avatars/6.jpg"
@@ -16,7 +17,7 @@
         </div>
       </CLink>
     </template>
-    <CDropdownHeader tag="div" class="text-center bg-light">
+    <CDropdownHeader tag="div" class="text-center" variant="light">
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
@@ -37,7 +38,8 @@
     </CDropdownItem>
     <CDropdownHeader
       tag="div"
-      class="text-center bg-light"
+      class="text-center"
+      variant="light"
     >
       <strong>Settings</strong>
     </CDropdownHeader>
@@ -69,7 +71,10 @@
 export default {
   name: 'TheHeaderDropdownAccnt',
   data () {
-    return { itemsCount: 42 }
+    return { 
+      itemsCount: 42,
+      show: false
+    }
   }
 }
 </script>

src/views/base/Tables.vue

@@ -21,10 +21,11 @@
               :items="getItems()"
               :fields="fields"
               index-column
-              filter-row
+              column-filter
-              options-row
+              table-filter
+              items-per-page-selects
               hover
-              sorting
+              sortable
               footer
               pagination
             >
@@ -148,7 +149,7 @@ const fields = [
   'registered',
   { key: 'role', _style:'width:20%;' },
   { key: 'status', _style:'width:20%;' },
-  { key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
+  { key: 'show_details' , label:'', _style:'width:1%', notSortable: true, noFilter: true },
 ]
 const items = [
   { username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},