TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Inshal
2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
resources/js/views/demos/forms/tables/data-table/DemoDataTableBasic.vue Normal file
View File

@@ -0,0 +1,43 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
const headers = [
{
title: 'ID',
key: 'id',
},
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'EXPERIENCE',
key: 'experience',
},
{
title: 'AGE',
key: 'age',
},
]
</script>
<template>
<VDataTable
:headers="headers"
:items="data"
:items-per-page="5"
class="text-no-wrap"
>
<template #item.id="{ item }">
<span class="text-h6">{{ item.id }}</span>
</template>
</VDataTable>
</template>

102
resources/js/views/demos/forms/tables/data-table/DemoDataTableCellSlot.vue Normal file
View File

@@ -0,0 +1,102 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
</script>
<template>
<VDataTable
:headers="headers"
:items="data"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
class="font-weight-medium"
size="small"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
</VDataTable>
</template>

40
resources/js/views/demos/forms/tables/data-table/DemoDataTableDense.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
const headers = [
{
title: 'ID',
key: 'id',
},
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'EXPERIENCE',
key: 'experience',
},
{
title: 'AGE',
key: 'age',
},
]
</script>
<template>
<VDataTable
:headers="headers"
:items="data"
density="compact"
:items-per-page="5"
class="text-no-wrap"
/>
</template>

123
resources/js/views/demos/forms/tables/data-table/DemoDataTableExpandableRows.vue Normal file
View File

@@ -0,0 +1,123 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
// Headers
const headers = [
{
title: '',
key: 'data-table-expand',
},
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
</script>
<template>
<VDataTable
:headers="headers"
:items="data"
:items-per-page="5"
class="text-no-wrap"
expand-on-click
>
<!-- Expanded Row Data -->
<template #expanded-row="slotProps">
<tr class="v-data-table__tr">
<td :colspan="headers.length">
<p class="my-1">
City: {{ slotProps.item.city }}
</p>
<p class="my-1">
Experience: {{ slotProps.item.experience }}
</p>
<p>Post: {{ slotProps.item.post }}</p>
</td>
</tr>
</template>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
class="font-weight-medium"
size="small"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
</VDataTable>
</template>

142
resources/js/views/demos/forms/tables/data-table/DemoDataTableExternalPagination.vue Normal file
View File

@@ -0,0 +1,142 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
const userList = ref([])
const options = ref({
page: 1,
itemsPerPage: 5,
sortBy: [''],
sortDesc: [false],
})
// headers
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
onMounted(() => {
userList.value = JSON.parse(JSON.stringify(data))
})
</script>
<template>
<VDataTable
:headers="headers"
:items="userList"
:items-per-page="options.itemsPerPage"
:page="options.page"
:options="options"
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
class="font-weight-medium"
size="small"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
<template #bottom>
<VCardText class="pt-2">
<div class="d-flex flex-wrap justify-center justify-sm-space-between gap-y-2 mt-2">
<VTextField
v-model="options.itemsPerPage"
label="Rows per page:"
type="number"
min="-1"
max="15"
hide-details
variant="underlined"
style="max-inline-size: 8rem;min-inline-size: 5rem;"
/>
<VPagination
v-model="options.page"
:total-visible="$vuetify.display.smAndDown ? 2 : 3"
:length="Math.ceil(userList.length / options.itemsPerPage)"
/>
</div>
</VCardText>
</template>
</VDataTable>
</template>

105
resources/js/views/demos/forms/tables/data-table/DemoDataTableFixedHeader.vue Normal file
View File

@@ -0,0 +1,105 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
</script>
<template>
<VDataTable
:headers="headers"
:items="data"
:items-per-page="10"
height="300"
class="text-no-wrap"
fixed-header
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
class="font-weight-medium"
size="small"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
</VDataTable>
</template>

397
resources/js/views/demos/forms/tables/data-table/DemoDataTableGroupingRows.vue Normal file
View File

@@ -0,0 +1,397 @@
<script setup>
import avatar1 from '@images/avatars/avatar-1.png'
import avatar2 from '@images/avatars/avatar-2.png'
import avatar4 from '@images/avatars/avatar-4.png'
import avatar7 from '@images/avatars/avatar-7.png'
import avatar8 from '@images/avatars/avatar-8.png'
const userList = [
{
responsiveId: '',
id: 1,
avatar: avatar8,
fullName: 'Korrie O\'Crevy',
post: 'Nuclear Power Engineer',
email: 'kocrevy0@thetimes.co.uk',
city: 'Krasnosilka',
startDate: '09/23/2016',
salary: 23896.35,
age: '61',
experience: '1 Year',
status: 'Professional',
},
{
responsiveId: '',
id: 2,
avatar: avatar1,
fullName: 'Bailie Coulman',
post: 'VP Quality Control',
email: 'bcoulman1@yolasite.com',
city: 'Hinigaran',
startDate: '05/20/2018',
salary: 13633.69,
age: '63',
experience: '3 Years',
status: 'Professional',
},
{
responsiveId: '',
id: 3,
avatar: avatar7,
fullName: 'Stella Ganderton',
post: 'Operator',
email: 'sganderton2@tuttocitta.it',
city: 'Golcowa',
startDate: '03/24/2018',
salary: 13076.28,
age: '66',
experience: '6 Years',
status: 'Applied',
},
{
responsiveId: '',
id: 4,
avatar: avatar8,
fullName: 'Dorolice Crossman',
post: 'Cost Accountant',
email: 'dcrossman3@google.co.jp',
city: 'Paquera',
startDate: '12/03/2017',
salary: 12336.17,
age: '22',
experience: '2 Years',
status: 'Professional',
},
{
responsiveId: '',
id: 6,
avatar: '',
fullName: 'Genevra Honeywood',
post: 'Geologist',
email: 'ghoneywood5@narod.ru',
city: 'Maofan',
startDate: '06/01/2017',
salary: 17803.8,
age: '61',
experience: '1 Year',
status: 'Current',
},
{
responsiveId: '',
id: 7,
avatar: '',
fullName: 'Eileen Diehn',
post: 'Environmental Specialist',
email: 'ediehn6@163.com',
city: 'Lampuyang',
startDate: '10/15/2017',
salary: 18991.67,
age: '59',
experience: '9 Years',
status: 'Rejected',
},
{
responsiveId: '',
id: 8,
avatar: avatar7,
fullName: 'Richardo Aldren',
post: 'Senior Sales Associate',
email: 'raldren7@mtv.com',
city: 'Skoghall',
startDate: '11/05/2016',
salary: 19230.13,
age: '55',
experience: '5 Years',
status: 'Rejected',
},
{
responsiveId: '',
id: 9,
avatar: avatar2,
fullName: 'Allyson Moakler',
post: 'Safety Technician',
email: 'amoakler8@shareasale.com',
city: 'Mogilany',
startDate: '12/29/2018',
salary: 11677.32,
age: '39',
experience: '9 Years',
status: 'Applied',
},
{
responsiveId: '',
id: 11,
avatar: '',
fullName: 'De Falloon',
post: 'Sales Representative',
email: 'dfalloona@ifeng.com',
city: 'Colima',
startDate: '06/12/2018',
salary: 19252.12,
age: '30',
experience: '0 Year',
status: 'Resigned',
},
{
responsiveId: '',
id: 12,
avatar: '',
fullName: 'Cyrus Gornal',
post: 'Senior Sales Associate',
email: 'cgornalb@fda.gov',
city: 'Boro Utara',
startDate: '12/09/2017',
salary: 16745.47,
age: '22',
experience: '2 Years',
status: 'Resigned',
},
{
responsiveId: '',
id: 13,
avatar: '',
fullName: 'Tallou Balf',
post: 'Staff Accountant',
email: 'tbalfc@sina.com.cn',
city: 'Siliana',
startDate: '01/21/2016',
salary: 15488.53,
age: '36',
experience: '6 Years',
status: 'Resigned',
},
{
responsiveId: '',
id: 15,
avatar: '',
fullName: 'Wilmar Bourton',
post: 'Administrative Assistant',
email: 'wbourtone@sakura.ne.jp',
city: 'Bích Động',
startDate: '04/25/2018',
salary: 13304.45,
age: '19',
experience: '9 Years',
status: 'Applied',
},
{
responsiveId: '',
id: 16,
avatar: avatar4,
fullName: 'Robinson Brazenor',
post: 'General Manager',
email: 'rbrazenorf@symantec.com',
city: 'Gendiwu',
startDate: '12/23/2017',
salary: 11953.08,
age: '66',
experience: '6 Years',
status: 'Applied',
},
{
responsiveId: '',
id: 17,
avatar: '',
fullName: 'Nadia Bettenson',
post: 'Environmental Tech',
email: 'nbettensong@joomla.org',
city: 'Chabařovice',
startDate: '07/11/2018',
salary: 20484.44,
age: '64',
experience: '4 Years',
status: 'Current',
},
{
responsiveId: '',
id: 18,
avatar: '',
fullName: 'Titus Hayne',
post: 'Web Designer',
email: 'thayneh@kickstarter.com',
city: 'Yangon',
startDate: '05/25/2019',
salary: 16871.48,
age: '59',
experience: '9 Years',
status: 'Current',
},
{
responsiveId: '',
id: 19,
avatar: avatar4,
fullName: 'Roxie Huck',
post: 'Administrative Assistant',
email: 'rhucki@ed.gov',
city: 'Polýkastro',
startDate: '04/04/2019',
salary: 19653.56,
age: '41',
experience: '1 Year',
status: 'Resigned',
},
{
responsiveId: '',
id: 23,
avatar: avatar7,
fullName: 'Rosmunda Steed',
post: 'Assistant Media Planner',
email: 'rsteedm@xing.com',
city: 'Manzanares',
startDate: '12/23/2017',
salary: 13778.34,
age: '21',
experience: '1 Year',
status: 'Applied',
},
{
responsiveId: '',
id: 26,
avatar: avatar2,
fullName: 'Morgen Benes',
post: 'Senior Sales Associate',
email: 'mbenesp@ted.com',
city: 'Cà Mau',
startDate: '04/10/2016',
salary: 16969.63,
age: '42',
experience: '2 Years',
status: 'Resigned',
},
{
responsiveId: '',
id: 28,
avatar: '',
fullName: 'Kliment McGinney',
post: 'Chief Design Engineer',
email: 'kmcginneyr@paginegialle.it',
city: 'Xiaocheng',
startDate: '07/09/2018',
salary: 24027.81,
age: '28',
experience: '8 Years',
status: 'Resigned',
},
{
responsiveId: '',
id: 31,
avatar: '',
fullName: 'Teressa Bleakman',
post: 'Senior Editor',
email: 'tbleakmanu@phpbb.com',
city: 'Žebrák',
startDate: '09/03/2016',
salary: 24875.41,
age: '37',
experience: '7 Years',
status: 'Applied',
},
]
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
]
const groupBy = [{ key: 'status' }]
const resolveStatusVariant = status => {
if (status === 'Current')
return { color: 'primary' }
else if (status === 'Professional')
return { color: 'success' }
else if (status === 'Rejected')
return { color: 'error' }
else if (status === 'Resigned')
return { color: 'warning' }
else
return { color: 'info' }
}
const getIcon = props => props.icon
</script>
<template>
<VDataTable
:headers="headers"
:items="userList"
:items-per-page="10"
:group-by="groupBy"
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
size="small"
class="font-weight-medium"
>
{{ item.status }}
</VChip>
</template>
<template #data-table-group="{ props, item, count }">
<td>
<VBtn
v-bind="props"
variant="text"
density="comfortable"
>
<VIcon
class="flip-in-rtl"
:icon="getIcon(props)"
/>
</VBtn>
<span>{{ item.value }}</span>
<span>({{ count }})</span>
</td>
</template>
</VDataTable>
</template>

305
resources/js/views/demos/forms/tables/data-table/DemoDataTableKitchenSink.vue Normal file
View File

@@ -0,0 +1,305 @@
<script setup>
const { data: productList } = await useApi('pages/datatable')
const search = ref('')
// headers
const headers = [
{
title: 'PRODUCT',
key: 'product.name',
},
{
title: 'DATE',
key: 'date',
},
{
title: 'CATEGORY',
key: 'product.category',
},
{
title: 'BUYERS',
key: 'buyer.name',
},
{
title: 'PAYMENT',
key: 'payment',
sortable: false,
},
{
title: 'STATUS',
key: 'status',
sortable: false,
},
{
title: 'DELETE',
key: 'delete',
sortable: false,
},
]
const deleteItem = itemId => {
if (!productList.value)
return
const index = productList.value.findIndex(item => item.product.id === itemId)
productList.value.splice(index, 1)
}
const categoryIcons = [
{
name: 'Mouse',
icon: 'ri-mouse-fill',
color: 'warning',
},
{
name: 'Glass',
icon: 'ri-glasses-line',
color: 'primary',
},
{
name: 'Smart Watch',
icon: 'ri-time-line',
color: 'success',
},
{
name: 'Bag',
icon: 'ri-shopping-bag-line',
color: 'info',
},
{
name: 'Storage Device',
icon: 'ri-tape-line',
color: 'warning',
},
{
name: 'Bluetooth',
icon: 'ri-bluetooth-line',
color: 'error',
},
{
name: 'Gaming',
icon: 'ri-gamepad-line',
color: 'warning',
},
{
name: 'Home',
icon: 'ri-home-line',
color: 'error',
},
{
name: 'VR',
icon: 'ri-goggles-line',
color: 'primary',
},
{
name: 'Shoes',
icon: 'ri-omega',
color: 'success',
},
{
name: 'Electronics',
icon: 'ri-flashlight-fill',
color: 'info',
},
{
name: 'Projector',
icon: 'ri-projector-line',
color: 'warning',
},
{
name: 'iPod',
icon: 'ri-music-line',
color: 'error',
},
{
name: 'Keyboard',
icon: 'ri-keyboard-box-line',
color: 'primary',
},
{
name: 'Smart Phone',
icon: 'ri-smartphone-line',
color: 'success',
},
{
name: 'Smart TV',
icon: 'ri-tv-line',
color: 'info',
},
{
name: 'Google Home',
icon: 'ri-google-line',
color: 'warning',
},
{
name: 'Mac',
icon: 'ri-apple-line',
color: 'error',
},
{
name: 'Headphone',
icon: 'ri-headphone-line',
color: 'primary',
},
{
name: 'iMac',
icon: 'ri-computer-line',
color: 'success',
},
{
name: 'iPhone',
icon: 'ri-apple-line',
color: 'warning',
},
]
const resolveStatusColor = status => {
if (status === 'Confirmed')
return 'primary'
if (status === 'Completed')
return 'success'
if (status === 'Cancelled')
return 'error'
}
const categoryIconFilter = categoryName => {
const index = categoryIcons.findIndex(category => category.name === categoryName)
if (index !== -1)
return [{
icon: categoryIcons[index].icon,
color: categoryIcons[index].color,
}]
return [{
icon: 'ri-question-line',
color: 'primary',
}]
}
</script>
<template>
<div>
<VCardText>
<VRow>
<VCol
cols="12"
offset-md="8"
md="4"
>
<VTextField
v-model="search"
label="Search"
placeholder="Search ..."
append-inner-icon="ri-search-line"
single-line
hide-details
dense
outlined
/>
</VCol>
</VRow>
</VCardText>
<!-- 👉 Data Table -->
<VDataTable
:headers="headers"
:items="productList || []"
:search="search"
:items-per-page="5"
class="text-no-wrap"
>
<!-- product -->
<template #item.product.name="{ item }">
<div class="d-flex align-center">
<div>
<VImg
:src="item.product.image"
height="40"
width="40"
/>
</div>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-truncate text-high-emphasis">{{ item.product.name }}</span>
<span class="text-xs">{{ item.product.brand }}</span>
</div>
</div>
</template>
<!-- category -->
<template #item.product.category="{ item }">
<div class="d-flex align-center">
<VAvatar
v-for="(category, index) in categoryIconFilter(item.product.category)"
:key="index"
size="26"
:color="category.color"
variant="tonal"
>
<VIcon
size="18"
:color="category.color"
class="rounded-0"
>
{{ category.icon }}
</VIcon>
</VAvatar>
<span class="ms-1 text-no-wrap">{{ item.product.category }}</span>
</div>
</template>
<!-- buyer -->
<template #item.buyer.name="{ item }">
<div class="d-flex align-center">
<VAvatar
size="1.875rem"
:color="!item.buyer.avatar ? 'primary' : undefined"
:variant="!item.buyer.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.buyer.avatar"
:src="item.buyer.avatar"
/>
<span
v-else
class="text-sm"
>{{ item.buyer.name.slice(0, 2).toUpperCase() }}</span>
</VAvatar>
<span class="text-no-wrap font-weight-medium text-high-emphasis ms-2">{{ item.buyer.name }}</span>
</div>
</template>
<!-- Payment -->
<template #item.payment="{ item }">
<div class="d-flex flex-column">
<div class="d-flex align-center">
<span class="text-high-emphasis font-weight-medium">${{ item.payment.paidAmount }}</span>
<span v-if="item.payment.paidAmount !== item.payment.total">/{{ item.payment.total }}</span>
</div>
<span class="text-xs text-no-wrap">{{ item.payment.receivedPaymentStatus }}</span>
</div>
</template>
<!-- Status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusColor(item.payment.status)"
:class="`text-${resolveStatusColor(item.payment.status)}`"
size="small"
class="font-weight-medium"
>
{{ item.payment.status }}
</VChip>
</template>
<!-- Delete -->
<template #item.delete="{ item }">
<IconBtn
size="small"
@click="deleteItem(item.product.id)"
>
<VIcon icon="ri-delete-bin-line" />
</IconBtn>
</template>
</VDataTable>
</div>
</template>

366
resources/js/views/demos/forms/tables/data-table/DemoDataTableRowEditingViaDialog.vue Normal file
View File

@@ -0,0 +1,366 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
const editDialog = ref(false)
const deleteDialog = ref(false)
const defaultItem = ref({
responsiveId: '',
id: -1,
avatar: '',
fullName: '',
post: '',
email: '',
city: '',
startDate: '',
salary: -1,
age: '',
experience: '',
status: -1,
})
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const userList = ref([])
// status options
const selectedOptions = [
{
text: 'Current',
value: 1,
},
{
text: 'Professional',
value: 2,
},
{
text: 'Rejected',
value: 3,
},
{
text: 'Resigned',
value: 4,
},
{
text: 'Applied',
value: 5,
},
]
// headers
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
{
title: 'ACTIONS',
key: 'actions',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
const editItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
editDialog.value = true
}
const deleteItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
deleteDialog.value = true
}
const close = () => {
editDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const closeDelete = () => {
deleteDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const save = () => {
if (editedIndex.value > -1)
Object.assign(userList.value[editedIndex.value], editedItem.value)
else
userList.value.push(editedItem.value)
close()
}
const deleteItemConfirm = () => {
userList.value.splice(editedIndex.value, 1)
closeDelete()
}
onMounted(() => {
userList.value = JSON.parse(JSON.stringify(data))
})
</script>
<template>
<!-- 👉 Datatable -->
<VDataTable
:headers="headers"
:items="userList"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<!-- avatar -->
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
density="comfortable"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<div class="d-flex gap-1">
<IconBtn
size="small"
@click="editItem(item)"
>
<VIcon icon="ri-pencil-line" />
</IconBtn>
<IconBtn
size="small"
@click="deleteItem(item)"
>
<VIcon icon="ri-delete-bin-line" />
</IconBtn>
</div>
</template>
</VDataTable>
<!-- 👉 Edit Dialog -->
<VDialog
v-model="editDialog"
max-width="600px"
>
<VCard>
<VCardTitle>
<span class="headline">Edit Item</span>
</VCardTitle>
<VCardText>
<VContainer>
<VRow>
<!-- fullName -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.fullName"
label="User name"
/>
</VCol>
<!-- email -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.email"
label="Email"
/>
</VCol>
<!-- salary -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.salary"
label="Salary"
prefix="$"
type="number"
/>
</VCol>
<!-- age -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.age"
label="Age"
type="number"
/>
</VCol>
<!-- start date -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.startDate"
label="Date"
/>
</VCol>
<!-- status -->
<VCol
cols="12"
sm="6"
md="4"
>
<VSelect
v-model="editedItem.status"
:items="selectedOptions"
item-title="text"
item-value="value"
label="Status"
variant="outlined"
/>
</VCol>
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="close"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="save"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- 👉 Delete Dialog -->
<VDialog
v-model="deleteDialog"
max-width="500px"
>
<VCard>
<VCardTitle>
Are you sure you want to delete this item?
</VCardTitle>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="closeDelete"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="deleteItemConfirm"
>
OK
</VBtn>
<VSpacer />
</VCardActions>
</VCard>
</VDialog>
</template>

104
resources/js/views/demos/forms/tables/data-table/DemoDataTableRowSelection.vue Normal file
View File

@@ -0,0 +1,104 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable'
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
</script>
<template>
<VDataTable
:headers="headers"
:items="data"
:items-per-page="5"
show-select
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
class="font-weight-medium"
size="small"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
</VDataTable>
</template>

1413
resources/js/views/demos/forms/tables/data-table/datatable.js Normal file
View File

File diff suppressed because it is too large Load Diff

3094
resources/js/views/demos/forms/tables/data-table/demoCodeDataTable.js Normal file
View File

File diff suppressed because it is too large Load Diff

86
resources/js/views/demos/forms/tables/simple-table/DemoSimpleTableBasic.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable>
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

86
resources/js/views/demos/forms/tables/simple-table/DemoSimpleTableDensity.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable density="compact">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

89
resources/js/views/demos/forms/tables/simple-table/DemoSimpleTableFixedHeader.vue Normal file
View File

@@ -0,0 +1,89 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable
height="250"
fixed-header
>
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

86
resources/js/views/demos/forms/tables/simple-table/DemoSimpleTableHeight.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable height="250">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

86
resources/js/views/demos/forms/tables/simple-table/DemoSimpleTableTheme.vue Normal file
View File

@@ -0,0 +1,86 @@
<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable theme="dark">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>

876
resources/js/views/demos/forms/tables/simple-table/demoCodeSimpleTable.js Normal file
View File

@@ -0,0 +1,876 @@
export const basic = { ts: `<script setup lang="ts">
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable>
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
`, js: `<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable>
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
` }
export const density = { ts: `<script setup lang="ts">
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable density="compact">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
`, js: `<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable density="compact">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
` }
export const fixedHeader = { ts: `<script setup lang="ts">
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable
height="250"
fixed-header
>
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
`, js: `<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable
height="250"
fixed-header
>
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
` }
export const height = { ts: `<script setup lang="ts">
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable height="250">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
`, js: `<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable height="250">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
` }
export const theme = { ts: `<script setup lang="ts">
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable theme="dark">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
`, js: `<script setup>
const desserts = [
{
dessert: 'Frozen Yogurt',
calories: 159,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Ice cream sandwich',
calories: 237,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Eclair',
calories: 262,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Cupcake',
calories: 305,
fat: 6,
carbs: 24,
protein: 4,
},
{
dessert: 'Gingerbread',
calories: 356,
fat: 6,
carbs: 24,
protein: 4,
},
]
</script>
<template>
<VTable theme="dark">
<thead>
<tr>
<th class="text-uppercase">
Desserts(100g Servings)
</th>
<th class="text-uppercase">
calories
</th>
<th class="text-uppercase">
Fat(g)
</th>
<th class="text-uppercase">
Carbs(g)
</th>
<th class="text-uppercase">
protein(g)
</th>
</tr>
</thead>
<tbody>
<tr
v-for="item in desserts"
:key="item.dessert"
>
<td>
{{ item.dessert }}
</td>
<td>
{{ item.calories }}
</td>
<td>
{{ item.fat }}
</td>
<td>
{{ item.carbs }}
</td>
<td>
{{ item.protein }}
</td>
</tr>
</tbody>
</VTable>
</template>
` }