Initial commit

resources/js/views/demos/forms/tables/data-table/DemoDataTableFixedHeader.vue

@@ -0,0 +1,101 @@
+<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"
+    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>{{ 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>