paging

src/components/TableD.vue

@@ -0,0 +1,91 @@
+<template>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      v-bind="attrs"
+      virtual-scroll
+      :virtual-scroll-sticky-size-start="48"
+      dense
+      :pagination-label="paginationLabel"
+      v-model:pagination="pagination"
+    >
+      <template v-slot:pagination="scope">
+        ทั้งหมด {{ attrs.rows.length }} รายการ
+        <q-pagination
+          v-model="pagination.page"
+          active-color="primary"
+          color="dark"
+          :max="scope.pagesNumber"
+          :max-pages="5"
+          size="sm"
+          boundary-links
+          direction-links
+        ></q-pagination>
+      </template>
+  
+      <template v-for="(_, slot) in slots" v-slot:[slot]="scope">
+        <slot :name="slot" v-bind="scope || {}" />
+      </template>
+    </q-table>
+  </template>
+  <script setup lang="ts">
+  import { ref, useAttrs, useSlots } from "vue";
+  const attrs = ref<any>(useAttrs());
+  const slots = ref<any>(useSlots());
+  
+  const props = defineProps({
+    paging: {
+      type: Boolean,
+      defualt: false,
+    },
+  });
+  
+  
+  const pagination = ref({
+    sortBy: "desc",
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+  
+  const paginationLabel = (start: string, end: string, total: string) => {
+    if (props.paging == true)
+      return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
+    else return start + "-" + end + " ใน " + total;
+  };
+  </script>
+  
+  <style lang="scss">
+  .icon-color {
+    color: #4154b3;
+  }
+  .custom-header-table {
+    height: auto;
+    .q-table tr:nth-child(odd) td {
+      background: white;
+    }
+    .q-table tr:nth-child(even) td {
+      background: #f8f8f8;
+    }
+  
+    .q-table thead tr {
+      background: #ecebeb;
+    }
+  
+    .q-table thead tr th {
+      position: sticky;
+      z-index: 1;
+    }
+    /* this will be the loading indicator */
+    .q-table thead tr:last-child th {
+      /* height of all previous header rows */
+      top: 48px;
+    }
+    .q-table thead tr:first-child th {
+      top: 0;
+    }
+  }
+  </style>
+