feat: copy features from pro template

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-vue-admin-template",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0",
   "description": "Open Source Bootstrap Admin Template",
   "author": {
     "name": "CoreUI",
@@ -15,7 +15,7 @@
     }
   ],
   "homepage": "http://coreui.io",
-  "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
+  "copyright": "Copyright 2020 creativeLabs Łukasz Holeczek",
   "license": "MIT",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -27,33 +27,33 @@
     "release": "npm-run-all clearCache lint build test:unit test:e2e"
   },
   "dependencies": {
-    "@coreui/coreui": "^3.0.0-beta.4",
-    "@coreui/icons": "^1.0.0",
-    "@coreui/utils": "^1.2.2",
-    "@coreui/vue": "coreui/coreui-vue#521325c669faccc8e3de43f0e01411ea06ecdea4",
-    "@coreui/vue-chartjs": "^1.0.3",
-    "vue": "^2.6.11",
-    "vue-router": "^3.1.5",
-    "vuex": "^3.1.2"
+    "@coreui/coreui": "~3.0.0",
+    "@coreui/icons": "~1.0.1",
+    "@coreui/utils": "~1.2.2",
+    "@coreui/vue": "~3.0.0",
+    "@coreui/vue-chartjs": "~1.0.3",
+    "vue": "~2.6.11",
+    "vue-router": "~3.1.5",
+    "vuex": "~3.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
-    "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-e2e-nightwatch": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.2",
-    "@vue/cli-plugin-unit-jest": "^4.1.2",
-    "@vue/cli-service": "^4.1.2",
+    "@babel/core": "~7.8.4",
+    "@vue/cli-plugin-babel": "~4.2.2",
+    "@vue/cli-plugin-e2e-nightwatch": "~4.2.2",
+    "@vue/cli-plugin-eslint": "~4.2.2",
+    "@vue/cli-plugin-unit-jest": "~4.2.2",
+    "@vue/cli-service": "~4.2.2",
     "@vue/test-utils": "1.0.0-beta.29",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "chromedriver": "^79.0.2",
-    "core-js": "^3.6.4",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.2.1",
-    "node-sass": "^4.13.1",
-    "npm-run-all": "^4.1.5",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
+    "babel-eslint": "~10.0.3",
+    "babel-jest": "~25.1.0",
+    "chromedriver": "~80.0.1",
+    "core-js": "~3.6.4",
+    "eslint": "~6.8.0",
+    "eslint-plugin-vue": "~6.2.1",
+    "node-sass": "~4.13.1",
+    "npm-run-all": "~4.1.5",
+    "sass-loader": "~8.0.2",
+    "vue-template-compiler": "~2.6.11"
   },
   "browserslist": [
     "> 1%",

src/containers/TheContainer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-app">
     <TheSidebar/>
-    <div class="c-wrapper c-fixed-components">
+    <CWrapper>
       <TheHeader/>
       <div class="c-body">
         <main class="c-main">
@@ -13,7 +13,7 @@
         </main>
         <TheFooter/>
       </div>
-    </div>
+    </CWrapper>
   </div>
 </template>
 

src/containers/TheFooter.vue

@@ -2,7 +2,7 @@
   <CFooter :fixed="false">
     <div>
       <a href="https://coreui.io" target="_blank">CoreUI</a>
-      <span class="ml-1">&copy; 2020 creativeLabs.</span>
+      <span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
     </div>
     <div class="ml-auto">
       <span class="mr-1">Powered by</span>

src/containers/_nav.js

@@ -40,83 +40,67 @@ export default [
         items: [
           {
             name: 'Breadcrumbs',
-            to: '/base/breadcrumbs',
-            icon: 'cil-puzzle'
+            to: '/base/breadcrumbs'
           },
           {
             name: 'Cards',
-            to: '/base/cards',
-            icon: 'cil-puzzle'
+            to: '/base/cards'
           },
           {
             name: 'Carousels',
-            to: '/base/carousels',
-            icon: 'cil-puzzle'
+            to: '/base/carousels'
           }, 
           {
             name: 'Collapses',
-            to: '/base/collapses',
-            icon: 'cil-puzzle'
+            to: '/base/collapses'
           },
           {
             name: 'Forms',
-            to: '/base/forms',
-            icon: 'cil-puzzle'
+            to: '/base/forms'
           },
           {
             name: 'Jumbotrons',
-            to: '/base/jumbotrons',
-            icon: 'cil-puzzle'
+            to: '/base/jumbotrons'
           },
           {
             name: 'List Groups',
-            to: '/base/list-groups',
-            icon: 'cil-puzzle'
+            to: '/base/list-groups'
           },
           {
             name: 'Navs',
-            to: '/base/navs',
-            icon: 'cil-puzzle'
+            to: '/base/navs'
           },
           {
             name: 'Navbars',
-            to: '/base/navbars',
-            icon: 'cil-puzzle'
+            to: '/base/navbars'
           },
           {
             name: 'Paginations',
-            to: '/base/paginations',
-            icon: 'cil-puzzle'
+            to: '/base/paginations'
           },
           {
             name: 'Popovers',
-            to: '/base/popovers',
-            icon: 'cil-puzzle'
+            to: '/base/popovers'
           },
           {
             name: 'Progress Bars',
-            to: '/base/progress-bars',
-            icon: 'cil-puzzle'
+            to: '/base/progress-bars'
           },
           {
             name: 'Switches',
-            to: '/base/switches',
-            icon: 'cil-puzzle'
+            to: '/base/switches'
           },
           {
             name: 'Tables',
-            to: '/base/tables',
-            icon: 'cil-puzzle'
+            to: '/base/tables'
           },
           {
             name: 'Tabs',
-            to: '/base/tabs',
-            icon: 'cil-puzzle'
+            to: '/base/tabs'
           },
           {
             name: 'Tooltips',
-            to: '/base/tooltips',
-            icon: 'cil-puzzle'
+            to: '/base/tooltips'
           }
         ]
       },
@@ -128,23 +112,19 @@ export default [
         items: [
           {
             name: 'Buttons',
-            to: '/buttons/standard-buttons',
-            icon: 'cil-cursor'
+            to: '/buttons/standard-buttons'
           },
           {
             name: 'Button Dropdowns',
-            to: '/buttons/dropdowns',
-            icon: 'cil-cursor'
+            to: '/buttons/dropdowns'
           },
           {
             name: 'Button Groups',
-            to: '/buttons/button-groups',
-            icon: 'cil-cursor'
+            to: '/buttons/button-groups'
           },
           {
             name: 'Brand Buttons',
-            to: '/buttons/brand-buttons',
-            icon: 'cil-cursor'
+            to: '/buttons/brand-buttons'
           }
         ]
       },
@@ -163,7 +143,6 @@ export default [
           {
             name: 'CoreUI Icons',
             to: '/icons/coreui-icons',
-            icon: 'cil-star',
             badge: {
               color: 'info',
               text: 'NEW'
@@ -171,13 +150,11 @@ export default [
           },
           {
             name: 'Brands',
-            to: '/icons/brands',
-            icon: 'cil-star'
+            to: '/icons/brands'
           },
           {
             name: 'Flags',
-            to: '/icons/flags',
-            icon: 'cil-star'
+            to: '/icons/flags'
           }
         ]
       },
@@ -189,18 +166,15 @@ export default [
         items: [
           {
             name: 'Alerts',
-            to: '/notifications/alerts',
-            icon: 'cil-bell'
+            to: '/notifications/alerts'
           },
           {
             name: 'Badges',
-            to: '/notifications/badges',
-            icon: 'cil-bell'
+            to: '/notifications/badges'
           },
           {
             name: 'Modals',
-            to: '/notifications/modals',
-            icon: 'cil-bell'
+            to: '/notifications/modals'
           }
         ]
       },
@@ -231,23 +205,19 @@ export default [
         items: [
           {
             name: 'Login',
-            to: '/pages/login',
-            icon: 'cil-star'
+            to: '/pages/login'
           },
           {
             name: 'Register',
-            to: '/pages/register',
-            icon: 'cil-star'
+            to: '/pages/register'
           },
           {
             name: 'Error 404',
-            to: '/pages/404',
-            icon: 'cil-star'
+            to: '/pages/404'
           },
           {
             name: 'Error 500',
-            to: '/pages/500',
-            icon: 'cil-star'
+            to: '/pages/500'
           }
         ]
       },

src/main.js

@@ -2,7 +2,7 @@ import 'core-js/stable'
 import Vue from 'vue'
 import App from './App'
 import router from './router'
-import CoreuiVue from '@coreui/vue/src'
+import CoreuiVue from '@coreui/vue'
 import { iconsSet as icons } from './assets/icons/icons.js'
 import store from './store'
 

src/views/base/Collapses.vue

@@ -37,6 +37,16 @@
           </CCollapse>
         </CCardBody>
       </CCard>
+      <CCard>
+        <CCardHeader @click.native="cardCollapse = !cardCollapse"> 
+          <strong>Collapsible card</strong>
+        </CCardHeader>
+        <CCardBody>
+          <CCollapse :show="cardCollapse" class="mt-2">
+            <CCardText>Collapse contents Here</CCardText>
+          </CCollapse>
+        </CCardBody>
+      </CCard>
     </CCol>
   </CRow>
 </template>
@@ -47,6 +57,7 @@ export default {
   data () {
     return {
       collapse: false,
+      cardCollapse: true,
       innerCollapse: false,
       text: `
         Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry

src/views/base/Paginations.vue

@@ -3,7 +3,8 @@
     <CCard>
       <CCardHeader>
         <CIcon name="cil-justify-center"/>
-        <strong> Responsive bootstrap Pagination</strong>
+        <strong> Pagination </strong>
+        <small>size</small>
         <div class="card-header-actions">
           <a 
             href="https://coreui.io/vue/docs/components/pagination" 
@@ -31,7 +32,7 @@
           :pages="10"/>
         <br>
 
-        <div>
+        <div class="d-md-down-none">
           <h6>Large</h6>
           <CPagination
             size="lg"
@@ -86,7 +87,7 @@ export default {
   name: 'Paginations',
   data () {
     return {
-      currentPage: 3,
+      currentPage: 3
     }
   }
 }

src/views/charts/MainChartExample.vue

@@ -8,7 +8,7 @@
 
 <script>
 import { CChartLine } from '@coreui/vue-chartjs'
-import { getColor, hexToRgba } from '@coreui/utils/src'
+import { getStyle, hexToRgba } from '@coreui/utils/src'
 
 function random (min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min)
@@ -21,9 +21,9 @@ export default {
   },
   computed: {
     defaultDatasets () {
-      const brandSuccess = getColor('success') || '#4dbd74'
-      const brandInfo = getColor('info') || '#20a8d8'
-      const brandDanger = getColor('danger') || '#f86c6b'
+      const brandSuccess = getStyle('success2') || '#4dbd74'
+      const brandInfo = getStyle('info') || '#20a8d8'
+      const brandDanger = getStyle('danger') || '#f86c6b'
 
       let elements = 27
       const data1 = []

src/views/pages/Login.vue

@@ -1,7 +1,7 @@
 <template>
-  <CContainer class="d-flex align-items-center min-vh-100">
-    <CRow class="justify-content-center">
-      <CCol md="8">
+  <CContainer class="d-flex content-center min-vh-100">
+    <CRow>
+      <CCol>
         <CCardGroup>
           <CCard class="p-4">
             <CCardBody>
@@ -22,11 +22,12 @@
                   <template #prepend-content><CIcon name="cil-lock-locked"/></template>
                 </CInput>
                 <CRow>
-                  <CCol col="6">
+                  <CCol col="6" class="text-left">
                     <CButton color="primary" class="px-4">Login</CButton>
                   </CCol>
                   <CCol col="6" class="text-right">
                     <CButton color="link" class="px-0">Forgot password?</CButton>
+                    <CButton color="link" class="d-md-none">Register now!</CButton>
                   </CCol>
                 </CRow>
               </CForm>
@@ -35,8 +36,7 @@
           <CCard
             color="primary"
             text-color="white"
-            class="text-center py-5 d-md-down-none"
-            style="width:44%"
+            class="text-center py-5 d-sm-down-none"
             body-wrapper
           >
             <h2>Sign up</h2>

src/views/pages/Register.vue

@@ -1,7 +1,8 @@
 <template>
-  <CContainer class="min-vh-100 d-flex align-items-center">
-    <CRow class="w-100 justify-content-center">
-      <CCol md="6" sm="8">
+  <div class="d-flex align-items-center min-vh-100">
+    <CContainer fluid>
+      <CRow class="justify-content-center">
+        <CCol md="6">
           <CCard class="mx-4 mb-0">
             <CCardBody class="p-4">
               <CForm>
@@ -54,6 +55,7 @@
         </CCol>
       </CRow>
     </CContainer>
+  </div>
 </template>
 
 <script>

src/views/users/User.vue

@@ -29,11 +29,7 @@ export default {
   computed: {
     fields () {
       return [
-        { 
-          key: 'key', 
-          label: this.userData.filter(param => param.key === 'username')[0].value,
-          _style: 'width:150px'
-        },
+        { key: 'key', label: this.username, _style: 'width:150px'},
         { key: 'value', label: '', _style: 'width:150px;' }
       ]
     },
@@ -45,6 +41,9 @@ export default {
     },
     visibleData () {
       return this.userData.filter(param => param.key !== 'username')
+    },
+    username () {
+      return this.userData.filter(param => param.key === 'username')[0].value
     }
   },
   methods: {

tests/unit/containers/__snapshots__/TheContainer.spec.js.snap

@@ -6,8 +6,8 @@ exports[`TheContainer.vue renders correctly 1`] = `
 >
   <thesidebar-stub />
    
-  <div
-    class="c-wrapper c-fixed-components"
+  <cwrapper-stub
+    tag="div"
   >
     <theheader-stub />
      
@@ -29,6 +29,6 @@ exports[`TheContainer.vue renders correctly 1`] = `
        
       <thefooter-stub />
     </div>
-  </div>
+  </cwrapper-stub>
 </div>
 `;

tests/unit/views/base/__snapshots__/Collapses.spec.js.snap

@@ -100,6 +100,32 @@ exports[`Collapses.vue renders correctly 1`] = `
         </div>
       </div>
     </div>
+     
+    <div
+      class="card"
+    >
+      <header
+        class="card-header"
+      >
+        <strong>
+          Collapsible card
+        </strong>
+      </header>
+       
+      <div
+        class="card-body"
+      >
+        <div
+          class="mt-2"
+        >
+          <p
+            class="card-text"
+          >
+            Collapse contents Here
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;

tests/unit/views/base/__snapshots__/Paginations.spec.js.snap

@@ -9,9 +9,13 @@ exports[`Paginations.vue renders correctly 1`] = `
       />
        
       <strong>
-         Responsive bootstrap Pagination
+         Pagination 
       </strong>
        
+      <small>
+        size
+      </small>
+       
       <div
         class="card-header-actions"
       >
@@ -65,7 +69,9 @@ exports[`Paginations.vue renders correctly 1`] = `
        
       <br />
        
-      <div>
+      <div
+        class="d-md-down-none"
+      >
         <h6>
           Large
         </h6>

tests/unit/views/pages/__snapshots__/Login.spec.js.snap

@@ -2,16 +2,14 @@
 
 exports[`Login.vue renders correctly 1`] = `
 <ccontainer-stub
-  class="d-flex align-items-center min-vh-100"
+  class="d-flex content-center min-vh-100"
   tag="div"
 >
   <crow-stub
-    class="justify-content-center"
     gutters="true"
     tag="div"
   >
     <ccol-stub
-      md="8"
       tag="div"
     >
       <ccardgroup-stub
@@ -51,6 +49,7 @@ exports[`Login.vue renders correctly 1`] = `
                 tag="div"
               >
                 <ccol-stub
+                  class="text-left"
                   col="6"
                   tag="div"
                 >
@@ -85,6 +84,19 @@ exports[`Login.vue renders correctly 1`] = `
                   >
                     Forgot password?
                   </cbutton-stub>
+                   
+                  <cbutton-stub
+                    activeclass="router-link-active"
+                    class="d-md-none"
+                    color="link"
+                    event="click"
+                    exactactiveclass="router-link-exact-active"
+                    routertag="a"
+                    target="_self"
+                    type="button"
+                  >
+                    Register now!
+                  </cbutton-stub>
                 </ccol-stub>
               </crow-stub>
             </cform-stub>
@@ -93,7 +105,7 @@ exports[`Login.vue renders correctly 1`] = `
          
         <ccard-stub
           bodywrapper="true"
-          class="text-center py-5 d-md-down-none"
+          class="text-center py-5 d-sm-down-none"
           color="primary"
           textcolor="white"
         >

tests/unit/views/pages/__snapshots__/Register.spec.js.snap

@@ -1,18 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Register.vue renders correctly 1`] = `
-<ccontainer-stub
-  class="min-vh-100 d-flex align-items-center"
-  tag="div"
+<div
+  class="d-flex align-items-center min-vh-100"
 >
+  <ccontainer-stub
+    fluid="true"
+    tag="div"
+  >
     <crow-stub
-    class="w-100 justify-content-center"
+      class="justify-content-center"
       gutters="true"
       tag="div"
     >
       <ccol-stub
         md="6"
-      sm="8"
         tag="div"
       >
         <ccard-stub
@@ -128,5 +130,6 @@ exports[`Register.vue renders correctly 1`] = `
         </ccard-stub>
       </ccol-stub>
     </crow-stub>
-</ccontainer-stub>
+  </ccontainer-stub>
+</div>
 `;

tests/unit/views/users/User.spec.js

@@ -1,46 +1,37 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, createLocalVue } from '@vue/test-utils'
 import VueRouter from 'vue-router'
 import CoreuiVue from '@coreui/vue'
 import User from '@/views/users/User'
+import appRouter from '@/router'
 
 const localVue = createLocalVue()
 localVue.use(VueRouter)
-const router = new VueRouter()
+const router = appRouter
+router.push({path: '/users/1'})
 
 localVue.use(CoreuiVue)
 
 describe('User.vue', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(User, {
+      localVue,
+      router
+    })
+  })
   it('has a name', () => {
     expect(User.name).toBe('User')
   })
   it('is Vue instance', () => {
-    const wrapper = shallowMount(User, {
-      localVue,
-      router
-    })
     expect(wrapper.isVueInstance()).toBe(true)
   })
   it('is User', () => {
-    const wrapper = shallowMount(User, {
-      localVue,
-      router
-    })
     expect(wrapper.is(User)).toBe(true)
   })
   it('should have methods', () => {
-    const wrapper = shallowMount(User,{
-      localVue,
-      router
-    })
-
-    expect(typeof User.methods.goBack ).toEqual('function')
-    expect(wrapper.vm.goBack()).toBeUndefined()
+    expect(typeof User.methods.goBack).toEqual('function')
   })
   test('renders correctly', () => {
-    const wrapper = shallowMount(User, {
-      localVue,
-        router
-    })
     expect(wrapper.element).toMatchSnapshot()
   })
 })

tests/unit/views/users/Users.spec.js

@@ -37,15 +37,4 @@ describe('Users.vue', () => {
     })
     expect(wrapper.element).toMatchSnapshot()
   })
-  it('should have methods', () => {
-    const wrapper = shallowMount(Users,{
-      localVue,
-      router
-    })
-
-    expect(typeof Users.methods.userLink  ).toEqual('function')
-    expect(Users.methods.userLink(42)).toBe('users/42')
-    expect(typeof Users.methods.rowClicked ).toEqual('function')
-    expect(wrapper.vm.rowClicked({id:42})).toBeUndefined()
-  })
 })

tests/unit/views/users/__snapshots__/User.spec.js.snap

@@ -1,50 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`User.vue renders correctly 1`] = `
-<crow-stub
-  gutters="true"
-  tag="div"
+<div
+  class="row"
 >
-  <ccol-stub
-    col="12"
-    lg="6"
-    tag="div"
+  <div
+    class="col-12 col-lg-6"
+  >
+    <div
+      class="card"
+    >
+      <header
+        class="card-header"
       >
-    <ccard-stub>
-      <ccardheader-stub>
         
-        User id:  
+        User id:  1
       
-      </ccardheader-stub>
+      </header>
        
-      <ccardbody-stub>
-        <cdatatable-stub
-          fields="[object Object],[object Object]"
-          fixed="true"
-          header="true"
-          items="[object Object]"
-          itemsperpage="10"
-          responsive="true"
+      <div
+        class="card-body"
+      >
+        <div
+          data-v-31168812=""
           small=""
-          sortervalue="[object Object]"
-          striped="true"
-        />
-      </ccardbody-stub>
+        >
+          <!---->
+          <div
+            class="position-relative table-responsive"
+            data-v-31168812=""
+          >
+            <table
+              class="table table-striped b-table-fixed"
+              data-v-31168812=""
+            >
+              <thead
+                data-v-31168812=""
+              >
+                <tr
+                  data-v-31168812=""
+                >
+                  <th
+                    class=""
+                    data-v-31168812=""
+                    style="width: 150px;"
+                  >
+                    <div
+                      class="d-inline"
+                      data-v-31168812=""
+                    >
+                      Samppa Nori
+                    </div>
+                    <!---->
+                  </th>
+                  <th
+                    class=""
+                    data-v-31168812=""
+                    style="width: 150px;"
+                  >
+                    <div
+                      class="d-inline"
+                      data-v-31168812=""
+                    >
                       
-      <ccardfooter-stub>
-        <cbutton-stub
-          activeclass="router-link-active"
-          color="primary"
-          event="click"
-          exactactiveclass="router-link-exact-active"
-          routertag="a"
-          target="_self"
+                    </div>
+                    <!---->
+                  </th>
+                </tr>
+                <!---->
+              </thead>
+              <tbody
+                class="position-relative"
+                data-v-31168812=""
+              >
+                <tr
+                  data-v-31168812=""
+                >
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     registered 
+                  </td>
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     2012/01/01 
+                  </td>
+                </tr>
+                <!---->
+                <tr
+                  data-v-31168812=""
+                >
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     role 
+                  </td>
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     Member 
+                  </td>
+                </tr>
+                <!---->
+                <tr
+                  data-v-31168812=""
+                >
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     status 
+                  </td>
+                  <td
+                    class=""
+                    data-v-31168812=""
+                  >
+                     Active 
+                  </td>
+                </tr>
+                <!---->
+                <!---->
+              </tbody>
+              <!---->
+            </table>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+       
+      <footer
+        class="card-footer"
+      >
+        <button
+          class="btn btn-primary"
           type="button"
         >
           Back
-        </cbutton-stub>
-      </ccardfooter-stub>
-    </ccard-stub>
-  </ccol-stub>
-</crow-stub>
+        </button>
+      </footer>
+    </div>
+  </div>
+</div>
 `;

tests/unit/views/users/__snapshots__/Users.spec.js.snap

@@ -21,18 +21,26 @@ exports[`Users.vue renders correctly 1`] = `
        
       <ccardbody-stub>
         <cdatatable-stub
+          activepage="1"
           clickablerows="true"
           fields="[object Object],[object Object],[object Object],[object Object]"
           header="true"
           hover="true"
-          index-column=""
           items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
           itemsperpage="5"
-          pagination="[object Object]"
           responsive="true"
           sortervalue="[object Object]"
           striped="true"
         />
+         
+        <cpagination-stub
+          activepage="1"
+          align="center"
+          arrows="true"
+          dots="true"
+          limit="5"
+          pages="5"
+        />
       </ccardbody-stub>
     </ccard-stub>
   </ccol-stub>