woothu
94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<CRow>
|
|
<CCol lg="6">
|
|
<CTableWrapper
|
|
:items="getShuffledUsersData()"
|
|
caption="Simple Table"
|
|
/>
|
|
</CCol>
|
|
|
|
<CCol lg="6">
|
|
<CTableWrapper
|
|
:items="getShuffledUsersData()"
|
|
striped
|
|
caption="Striped Table"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
|
|
<CRow>
|
|
<CCol lg="6">
|
|
<CTableWrapper
|
|
:items="getShuffledUsersData()"
|
|
small
|
|
caption="Condensed Table"
|
|
/>
|
|
</CCol>
|
|
|
|
<CCol lg="6">
|
|
<CTableWrapper
|
|
:items="getShuffledUsersData()"
|
|
fixed
|
|
bordered
|
|
caption="Bordered Table"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
|
|
<CRow>
|
|
<CCol sm="12">
|
|
<CTableWrapper
|
|
:items="getShuffledUsersData()"
|
|
hover
|
|
striped
|
|
bordered
|
|
small
|
|
fixed
|
|
caption="Combined All Table"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
|
|
<CRow>
|
|
<CCol sm="12">
|
|
<CTableWrapper
|
|
:items="getShuffledUsersData()"
|
|
hover
|
|
striped
|
|
bordered
|
|
small
|
|
fixed
|
|
dark
|
|
caption="Combined All Table"
|
|
/>
|
|
</CCol>
|
|
</CRow>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CTableWrapper from './Table.vue'
|
|
import usersData from '../users/UsersData'
|
|
|
|
export default {
|
|
name: 'Tables',
|
|
components: { CTableWrapper },
|
|
methods: {
|
|
shuffleArray (array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
let j = Math.floor(Math.random() * (i + 1))
|
|
let temp = array[i]
|
|
array[i] = array[j]
|
|
array[j] = temp
|
|
}
|
|
return array
|
|
},
|
|
|
|
getShuffledUsersData () {
|
|
return this.shuffleArray(usersData.slice(0))
|
|
}
|
|
}
|
|
}
|
|
</script>
|