hrms-recruit/src/components/Table.vue

<template>
  <div class="q-pb-sm row">
    <!--  -->
    <HeaderTop
      v-model:edit="editBtn"
      :header="name"
      :icon="icon"
      :add="clickAdd"
      :editBtn="clickEdit"
      :cancel="clickCancel"
      :history="false"
      :addData="false"
    />
    <!-- v-if="nameHeader" -->
    <!-- <div class="q-pl-sm">
      <q-btn size="12px" flat round color="add" @click="add" icon="mdi-plus" v-if="addData">
        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
      </q-btn>
    </div> -->
    <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 v-for="col in props.cols" :key="col.name" :props="props">
          <span class="text-weight-medium">{{ col.label }}</span>
        </q-th>
        <q-th auto-width v-if="editBtn == true" />
      </q-tr>
    </template>
    <template #body="props">
      <slot v-bind="props" name="columns"></slot>
    </template>
  </q-table>
</template>
<script setup lang="ts">
import { ref, useAttrs, watch } from 'vue'
import HeaderTop from '@/components/top.vue'
import type { Pagination } from '@/modules/01_exam/interface/index/Main'

const attrs = ref<any>(useAttrs())
const table = ref<any>(null)
const filterRef = ref<any>(null)
const editBtn = ref<boolean>(false)
const initialPagination = ref<Pagination>({
  //   descending: false,
  rowsPerPage: 0
})

const props = defineProps({
  inputfilter: String,
  name: String,
  icon: String,
  inputvisible: Array,
  editvisible: Boolean,
  nameHeader: Boolean,
  addData: {
    type: Boolean,
    defualt: true
  },
  edit: {
    type: Function,
    default: () => console.log('not function')
  },
  add: {
    type: Function,
    default: () => console.log('not function')
  },
  cancel: {
    type: Function,
    default: () => console.log('not function')
  },
  validate: {
    type: Function,
    default: () => console.log('not function')
  }
})

const emit = defineEmits(['update:inputfilter', 'update:inputvisible', 'update:editvisible'])

watch(props, (count: any, prevCount: any) => {
  editBtn.value = props.editvisible
})

const updateEdit = (value: Boolean) => {
  emit('update:editvisible', value)
}
const updateInput = (value: string | number | null) => {
  emit('update:inputfilter', value)
}
const updateVisible = (value: []) => {
  emit('update:inputvisible', value)
}

const paginationLabel = (start: string, end: string, total: string) => {
  return start + '-' + end + ' ใน ' + total
}

const clickAdd = () => {
  //   props.validate();
  props.add()
}

const clickEdit = () => {
  //   props.validate();
  props.edit()
}

const clickCancel = () => {
  //   props.validate();
  props.cancel()
}

const edit = async () => {
  updateEdit(!props.editvisible)
  props.edit()
}

const cancel = async () => {
  updateEdit(!props.editvisible)
  props.cancel()
}

const resetFilter = () => {
  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
  emit('update:inputfilter', '')
  filterRef.value.focus()
}

const add = () => {
  props.add()
}
</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: #f6f6f6ae;
  }

  .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>