clone code

src/components/TableHistory.vue

@@ -0,0 +1,204 @@
+<template>
+  <q-dialog :model-value="modal" persistent>
+    <q-card style="min-width: 70vw;">
+      <q-form ref="myForm">
+        <div class="row items-center q-pa-sm">
+          <div class="row">
+            <div class="text-bold">{{ tittle }}</div>
+          </div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            style="color: #ff8080; background-color: #ffdede"
+            size="12px"
+            @click="close"
+          />
+        </div>
+        <q-separator />
+        <div class="q-pa-sm">
+          <!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
+          <div class="col-12 row q-pb-sm">
+            <!-- <q-select
+              hide-bottom-space
+              @update:model-value="updateHistory"
+              outlined
+              dense
+              lazy-rules
+              borderless
+              :model-value="history"
+              :label="`${'วันที่'}`"
+              emit-value
+              map-options
+              option-label="publishedDate"
+              :options="optionsHistory"
+              option-value="id"
+            /> -->
+            <q-space />
+            <div class="items-center" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @update:model-value="updateInput"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="inputfilter == ''" name="search" />
+                  <q-icon
+                    v-if="inputfilter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                :model-value="inputvisible"
+                @update:model-value="updateVisible"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="attrs.columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </div>
+          </div>
+          <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"
+            :pagination="initialPagination"
+            :rows-per-page-options="[0]"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width v-if="boss == true" />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
+            <template #body="props">
+              <slot v-bind="props" name="columns"></slot>
+            </template>
+          </q-table>
+        </div>
+        <q-separator />
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/01_metadata/interface/index/Main";
+
+const attrs = ref<any>(useAttrs());
+const filterRef = ref<any>(null);
+// const history = ref<string>("");
+const initialPagination = ref<Pagination>({
+  //   descending: false,
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  tittle: String,
+  inputfilter: String,
+  //   history: String,
+  inputvisible: Array,
+  modal: Boolean,
+  boss: {
+    type: Boolean,
+    defualt: false,
+  },
+  //   optionsHistory: Array,
+  //   updateHistory: {
+  //     type: Function,
+  //     default: () => console.log("not function"),
+  //   },
+});
+
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:modal",
+  //   "update:history",
+]);
+
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+const close = () => {
+  emit("update:modal", false);
+};
+// const updateHistory = (value: string) => {
+//   emit("update:history", value);
+//   props.updateHistory();
+// };
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  return start + "-" + end + " ใน " + total;
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  max-height: 64vh;
+  .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>