Initial commit

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

@@ -0,0 +1,135 @@
+<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"
+  >
+    <!-- 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>
+
+    <template #bottom>
+      <VCardText class="pt-2">
+        <div class="d-flex flex-wrap justify-center justify-sm-space-between gap-y-2 mt-2">
+          <VSelect
+            v-model="options.itemsPerPage"
+            :items="[5, 10, 25, 50, 100]"
+            label="Rows per page:"
+            variant="underlined"
+            style="max-inline-size: 8rem;min-inline-size: 5rem;"
+          />
+
+          <VPagination
+            v-model="options.page"
+            :total-visible="$vuetify.display.smAndDown ? 3 : 5"
+            :length="Math.ceil(userList.length / options.itemsPerPage)"
+          />
+        </div>
+      </VCardText>
+    </template>
+  </VDataTable>
+</template>