11<template >
22 <b-card :header =" caption" >
3- <b-table :hover =" hover" :striped =" striped" :bordered =" bordered" :small =" small" :fixed =" fixed" responsive =" sm" :items =" items" :fields =" fields " :current-page =" currentPage" :per-page =" perPage" >
3+ <b-table :dark = " dark " : hover =" hover" :striped =" striped" :bordered =" bordered" :small =" small" :fixed =" fixed" responsive =" sm" :items =" items" :fields =" captions " :current-page =" currentPage" :per-page =" perPage" >
44 <template slot="status" slot-scope="data">
55 <b-badge :variant =" getBadge(data.item.status)" >{{data.item.status}}</b-badge >
66 </template >
77 </b-table >
88 <nav >
9- <b-pagination :total-rows =" getRowCount(items) " :per-page =" perPage" v-model =" currentPage" prev-text =" Prev" next-text =" Next" hide-goto-end-buttons />
9+ <b-pagination :total-rows =" totalRows " :per-page =" perPage" v-model =" currentPage" prev-text =" Prev" next-text =" Next" hide-goto-end-buttons />
1010 </nav >
1111 </b-card >
1212</template >
1313
1414<script >
15- /**
16- * Randomize array element order in-place.
17- * Using Durstenfeld shuffle algorithm.
18- */
19- const shuffleArray = (array ) => {
20- for (let i = array .length - 1 ; i > 0 ; i-- ) {
21- let j = Math .floor (Math .random () * (i + 1 ))
22- let temp = array[i]
23- array[i] = array[j]
24- array[j] = temp
25- }
26- return array
27- }
15+
2816
2917export default {
3018 name: ' c-table' ,
19+ inheritAttrs: false ,
3120 props: {
3221 caption: {
3322 type: String ,
@@ -52,57 +41,46 @@ export default {
5241 fixed: {
5342 type: Boolean ,
5443 default: false
44+ },
45+ tableData: {
46+ type: [Array , Function ],
47+ default : () => []
48+ },
49+ fields: {
50+ type: [Array , Object ],
51+ default : () => []
52+ },
53+ perPage: {
54+ type: Number ,
55+ default: 5
56+ },
57+ dark: {
58+ type: Boolean ,
59+ default: false
5560 }
5661 },
5762 data : () => {
5863 return {
59- items: shuffleArray ([
60- {username: ' Samppa Nori' , registered: ' 2012/01/01' , role: ' Member' , status: ' Active' },
61- {username: ' Estavan Lykos' , registered: ' 2012/02/01' , role: ' Staff' , status: ' Banned' },
62- {username: ' Chetan Mohamed' , registered: ' 2012/02/01' , role: ' Admin' , status: ' Inactive' },
63- {username: ' Derick Maximinus' , registered: ' 2012/03/01' , role: ' Member' , status: ' Pending' },
64- {username: ' Friderik Dávid' , registered: ' 2012/01/21' , role: ' Staff' , status: ' Active' },
65- {username: ' Yiorgos Avraamu' , registered: ' 2012/01/01' , role: ' Member' , status: ' Active' },
66- {username: ' Avram Tarasios' , registered: ' 2012/02/01' , role: ' Staff' , status: ' Banned' },
67- {username: ' Quintin Ed' , registered: ' 2012/02/01' , role: ' Admin' , status: ' Inactive' },
68- {username: ' Enéas Kwadwo' , registered: ' 2012/03/01' , role: ' Member' , status: ' Pending' },
69- {username: ' Agapetus Tadeáš' , registered: ' 2012/01/21' , role: ' Staff' , status: ' Active' },
70- {username: ' Carwyn Fachtna' , registered: ' 2012/01/01' , role: ' Member' , status: ' Active' },
71- {username: ' Nehemiah Tatius' , registered: ' 2012/02/01' , role: ' Staff' , status: ' Banned' },
72- {username: ' Ebbe Gemariah' , registered: ' 2012/02/01' , role: ' Admin' , status: ' Inactive' },
73- {username: ' Eustorgios Amulius' , registered: ' 2012/03/01' , role: ' Member' , status: ' Pending' },
74- {username: ' Leopold Gáspár' , registered: ' 2012/01/21' , role: ' Staff' , status: ' Active' },
75- {username: ' Pompeius René' , registered: ' 2012/01/01' , role: ' Member' , status: ' Active' },
76- {username: ' Paĉjo Jadon' , registered: ' 2012/02/01' , role: ' Staff' , status: ' Banned' },
77- {username: ' Micheal Mercurius' , registered: ' 2012/02/01' , role: ' Admin' , status: ' Inactive' },
78- {username: ' Ganesha Dubhghall' , registered: ' 2012/03/01' , role: ' Member' , status: ' Pending' },
79- {username: ' Hiroto Šimun' , registered: ' 2012/01/21' , role: ' Staff' , status: ' Active' },
80- {username: ' Vishnu Serghei' , registered: ' 2012/01/01' , role: ' Member' , status: ' Active' },
81- {username: ' Zbyněk Phoibos' , registered: ' 2012/02/01' , role: ' Staff' , status: ' Banned' },
82- {username: ' Einar Randall' , registered: ' 2012/02/01' , role: ' Admin' , status: ' Inactive' },
83- {username: ' Félix Troels' , registered: ' 2012/03/21' , role: ' Staff' , status: ' Active' },
84- {username: ' Aulus Agmundr' , registered: ' 2012/01/01' , role: ' Member' , status: ' Pending' }
85- ]),
86- fields: [
87- {key: ' username' },
88- {key: ' registered' },
89- {key: ' role' },
90- {key: ' status' }
91- ],
9264 currentPage: 1 ,
93- perPage: 5 ,
94- totalRows: 0
9565 }
9666 },
67+ computed: {
68+ items : function () {
69+ const items = this .tableData
70+ return Array .isArray (items) ? items : items ()
71+ },
72+ totalRows : function () { return this .getRowCount () },
73+ captions : function () { return this .fields }
74+ },
9775 methods: {
9876 getBadge (status ) {
9977 return status === ' Active' ? ' success'
10078 : status === ' Inactive' ? ' secondary'
10179 : status === ' Pending' ? ' warning'
10280 : status === ' Banned' ? ' danger' : ' primary'
10381 },
104- getRowCount ( items ) {
105- return items .length
82+ getRowCount : function ( ) {
83+ return this . items .length
10684 }
10785 }
10886}
0 commit comments