120 lines
2.4 KiB
Vue
120 lines
2.4 KiB
Vue
|
<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"
|
||
|
|
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>{{ 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>
|