edvoyui-component-library-test-flight 0.0.61 → 0.0.63

package/src/components/table/UTable.vue

@@ -1,489 +1,525 @@
 <template>
-  <div class="max-w-screen-xl mx-auto h-[calc(100dvh-20rem)] overflow-hidden">
-    <div :class="tableClasses">
-      <table class="table">
-        <thead>
-          <tr>
-            <th
-              v-if="checkable"
-              style="width: 45px; flex: 45 0 auto; max-width: 45px; background-color: rgb(243 244 246);"
-            >
-              <UCheckbox
-                :checked="isAllChecked"
-                :indeterminate="isIndeterminate"
-                class="flex justify-center mt-0"
-                @change="checkAll"
+  <div>
+    <Transition name="fade" mode="out-in">
+      <div
+        v-if="loading"
+        :class="[
+          'overflow-hidden relative z-0 isolate bg-white backdrop-blur transition-colors duration-150 ease-in-out rounded-xl border border-gray-50',
+          tableHeight
+            ? tableHeight
+            : 'h-[calc(100svh-9rem)] max-h-[calc(100svh-9rem)]',
+        ]"
+      >
+        <div
+          class="absolute flex items-center z-[calc(infinity)] w-full h-auto pointer-events-none inset-0"
+        >
+          <EUICircleLoader />
+        </div>
+      </div>
+      <div v-else class="relative max-w-screen-xl mx-auto overflow-hidden">
+        <div
+          id="euitable-comp"
+          :class="[
+            'ui-table scrollbar--thin overscroll-none',
+            computedItems.length === 0
+              ? 'overflow-hidden pointer-events-none'
+              : 'overflow-auto',
+            tableHeight
+              ? tableHeight
+              : 'h-[calc(100svh-12rem)] max-h-[calc(100svh-12rem)]',
+          ]"
+          ref="tableContainer"
+          @scroll="handleScroll"
+        >
+          <table class="table">
+            <thead>
+              <tr>
+                <th
+                  v-if="checkable"
+                  class="checkable"
+                  style="
+                    width: 45px;
+                    flex: 45 0 auto;
+                    max-width: 45px;
+                    background-color: rgb(243 244 246);
+                  "
+                  scope="col"
+                >
+                  <UCheckbox
+                    :checked="isAllChecked"
+                    :indeterminate="isIndeterminate"
+                    :disabled="isAllUncheckable"
+                    class="flex justify-center mt-0"
+                    @change="checkAll"
+                  />
+                </th>
+                <th
+                  v-for="(header, headerIndex) in headers"
+                  :key="headerIndex"
+                  scope="col"
+                  :class="[
+                    'snap-start snap-always',
+                    isScrolled && headerIndex === 0 ? stickyClass.head : '',
+                    {
+                      'cursor-pointer hover:!text-gray-900': header?.sortable,
+                      '!bg-gray-200': currentSort === header.value,
+                    },
+                  ]"
+                  :style="headerStyle(header)"
+                  @click="sortBy(header, $event)"
+                >
+                  <div
+                    class="flex-1 w-full text-sm font-medium text-current truncate font-inter"
+                  >
+                    <slot name="header" :header="header">
+                      {{ capitalizeText(header?.text ?? header?.name ?? "") }}
+                    </slot>
+                    <slot
+                      v-if="headerOptional"
+                      name="headerOptionalItem"
+                    ></slot>
+                  </div>
+                  <div v-if="header?.sortable" class="flex-none size-6">
+                    <svg
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="size-6"
+                    >
+                      <rect width="24" height="24" fill="none" />
+                      <path
+                        d="M8 10C9.06206 8.5381 10.3071 7.2287 11.7021 6.1058C11.8774 5.9647 12.1226 5.9647 12.2979 6.1058C13.6929 7.2287 14.9379 8.5381 16 10"
+                        :stroke="
+                          currentSortDir === 'asc' &&
+                          currentSort === header?.value
+                            ? '#111827'
+                            : '#9ca3af'
+                        "
+                        stroke-opacity="0.8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M8 14C9.06206 15.4619 10.3071 16.7713 11.7021 17.8942C11.8774 18.0353 12.1226 18.0353 12.2979 17.8942C13.6929 16.7713 14.9379 15.4619 16 14"
+                        :stroke="
+                          currentSortDir === 'desc' &&
+                          currentSort === header?.value
+                            ? '#111827'
+                            : '#9ca3af'
+                        "
+                        stroke-opacity="0.8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <template
+                v-if="computedItems.length > 0"
+                v-for="(row, rowIndex) in computedItems"
+                :key="`table-row-${rowIndex}`"
+              >
+                <tr
+                  @mouseenter="
+                    $attrs.mouseenter
+                      ? $emit('mouseenter', row, rowIndex)
+                      : null
+                  "
+                  @mouseleave="
+                    $attrs.mouseleave
+                      ? $emit('mouseleave', row, rowIndex)
+                      : null
+                  "
+                  class="group"
+                >
+                  <td
+                    v-if="checkable"
+                    class="checkable"
+                    style="width: 45px; flex: 45 0 auto; max-width: 45px"
+                  >
+                    <UCheckbox
+                      :disabled="!isRowCheckable(row)"
+                      :checked="isRowChecked(row)"
+                      class="flex justify-center mt-0"
+                      @change.prevent.stop="
+                        ($event) => checkRow(row, rowIndex, $event)
+                      "
+                    />
+                  </td>
+                  <td
+                    v-for="(header, headerIndex) in headers"
+                    :key="headerIndex"
+                    :style="bodyStyle(header)"
+                    :class="[
+                      isScrolled && headerIndex === 0 ? stickyClass.body : '',
+                    ]"
+                  >
+                    <slot
+                      :name="`item.${header?.value}`"
+                      :row="row"
+                      :rowIndex="rowIndex"
+                      :headerIndex="headerIndex"
+                    >
+                      {{ getValueByPath(row, header?.value) }}
+                    </slot>
+                  </td>
+                </tr>
+                <template v-if="tableExpanded">
+                  <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
+                </template>
+              </template>
+              <template v-else-if="computedItems.length === 0">
+                <tr class="norecords">
+                  <td
+                    :colspan="
+                      checkable === true ? headers.length + 1 : headers.length
+                    "
+                  >
+                    <div
+                      class="flex items-center justify-center text-xl font-medium text-gray-500 h-[calc(100svh-18rem)] max-w-screen-xl border"
+                    >
+                      No matching records found
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="sticky bottom-0 left-0 z-50 flex items-center justify-between px-2 py-1 bg-white border-t border-gray-300"
+        >
+          <slot name="tableCount">
+            <div class="inline-flex items-center gap-x-2">
+              <div class="text-sm font-medium text-gray-900">
+                Total {{ total }}
+              </div>
+              <span class="text-gray-300">&vert;</span>
+              <div class="inline-flex items-center">
+                <span class="text-sm font-medium text-gray-900">Per page</span>
+                <EUIPageLimit
+                  :page-limit="limit"
+                  @update-limit="changeLimit($event)"
+                  @refetch="searchData($event)"
+                  :iconStyle="true"
+                />
+              </div>
+            </div>
+          </slot>
+          <template v-if="paginated && computedItems.length !== 0">
+            <slot name="tablepagination">
+              <EUIStudentPagination
+                :activePage="newCurrentPage"
+                :pageLimit="limit"
+                :totalCount="total"
+                @change-page="pageChanged($event)"
               />
-            </th>
-            <th
-              v-for="(header, headerIndex) in headers"
-              :key="headerIndex"
-              :class="[
-                {
-                  'ui-table__sortable': header.sortable,
-                  'ui-table__sortable--active': currentSort === header.value
-                },
-                sortClass(header)
-              ]"
-              :style="headerStyle(header)"
-              @click="sortBy(header)"
-            >
-
-            <slot name="header" :header="header">
-                {{ capitalizeText(header?.text ?? header?.name ?? '') }}
             </slot>
-              <span v-if="headerOptional">
-                <slot name="headerOptionalItem"></slot>
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, rowIndex) in computedItems" :key="rowIndex" class="group">
-            <td v-if="checkable" style="width: 45px; flex: 45 0 auto; max-width: 45px">
-              <UCheckbox
-                :disabled="!isRowCheckable(row)"
-                :checked="isRowChecked(row)"
-                class="flex justify-center mt-0"
-                @change.prevent.stop="($event) => checkRow(row, rowIndex, $event)"
-              />
-            </td>
-            <td
-              v-for="(header, headerIndex) in headers"
-              :key="headerIndex"
-              :style="bodyStyle(header)"
-            >
-              <span class="ui-table__truncate">
-                <slot :name="`item.${header.value}`" :row="row" :rowIndex="rowIndex">
-                  {{ getValueByPath(row, header.value) }}
-                </slot>
-              </span>
-            </td>
-          </tr>
-          <slot v-if="tableExpanded" name="expanded" :row="row" :rowIndex="rowIndex"></slot>
-        </tbody>
-        <tbody v-if="computedItems.length === 0">
-          <tr>
-            <td :colspan="headers.length" class="ui-table__no-result">
-              No matching records found
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div :class="['ui-table__footer', footerClass]">
-      <slot name="table-bottom-left">
-        <div></div>
-      </slot>
-      <!-- v-if="paginated && computedItems.length !== 0" -->
-      <EUIPagination
-        :per-page="perPage"
-        :total="itemsLength"
-        :data-cy="dataCy"
-        :current="newCurrentPage"
-        :hide-number="hidePageNumber"
-        @change="pageChanged"
-      />
-    </div>
+          </template>
+        </div>
+      </div>
+    </Transition>
   </div>
 </template>
 
-<script>
-import { ref, computed, watch } from 'vue';
-import { getValueByPath, indexOf, defaultFilter } from '../../utils/helpers';
-import UCheckbox from './UCheckbox.vue';
-import { PropType } from 'vue';
-import { capitalizeText } from '../../utils/lodash';
-import EUIPagination from './EUIPagination.vue';
-
-export default {
-  name: 'UITable',
-  components: { UCheckbox, EUIPagination },
-
-  props: {
-    items: { type: Array, default: () => [] },
-    dataCy: { type: String, default: 'ui-pagination' },
-    headers: { type: Array, default: () => [] },
-    paginated: Boolean,
-    tableExpanded: Boolean,
-    backendPagination: Boolean,
-    search: { type: String, default: '' },
-    perPage: { type: [Number, String], default: 5 },
-    total: { type: [Number, String], default: 0 },
-    currentPage: { type: Number, default: 1 },
-    defaultSort: { type: String, default: '' },
-    defaultSortDirection: { type: String, default: 'asc' },
-    headerOptional: { type: Boolean, default: false },
-    checkedRows: { type: Array, default: () => [] },
-    checkable: { type: Boolean, default: false },
-    stickyHeader: { type: Boolean, default: true },
-    stickyColumn: { type: Boolean, default: false },
-    stickyColumnTwo: { type: Boolean, default: false },
-    isRowCheckable: { type: Function, default: () => true },
-    hidePageNumber: { type: Boolean, default: false },
-    footerClass: { type: String, default: '' }
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  watch,
+  toRefs,
+  PropType,
+  onMounted,
+  onUnmounted,
+} from "vue";
+import { getValueByPath, indexOf, defaultFilter } from "../../utils/helpers";
+import UCheckbox from "./UCheckbox.vue";
+import { capitalizeText } from "../../utils/lodash";
+import EUIStudentPagination from "./EUIStudentPagination.vue";
+import EUICircleLoader from "../loader/EUICircleLoader.vue";
+import EUIPageLimit from "./EUIPageLimit.vue";
+import "./UTable.scss";
+
+interface Header {
+  value: string;
+  text?: string;
+  name?: string;
+  sortable?: boolean;
+  width?: number;
+  color?: string;
+}
+
+interface Item {
+  [key: string]: any;
+}
+
+const props = defineProps({
+  items: { type: Array as PropType<Item[]>, default: () => [], required: true },
+  headers: {
+    type: Array as PropType<Header[]>,
+    default: () => [],
+    required: true,
+  },
+  paginated: { type: Boolean, default: false },
+  tableExpanded: { type: Boolean, default: false },
+  search: { type: String, default: "" },
+  perPage: { type: Number, default: 5 },
+  total: { type: Number, default: 0 },
+  currentPage: { type: Number, default: 1 },
+  defaultSort: { type: String, default: "" },
+  defaultSortDirection: { type: String, default: "asc" },
+  headerOptional: { type: Boolean, default: false },
+  checkedRows: { type: Array as PropType<Item[]>, default: () => [] },
+  checkable: { type: Boolean, default: false },
+  isRowCheckable: {
+    type: Function as PropType<(row: Item) => boolean>,
+    default: () => true,
+  },
+  stickyColumn: { type: Boolean, default: true },
+  tableHeight: {
+    type: String,
+    required: false,
+    default: "",
   },
+  tableLoading: { type: Boolean, default: false },
+  backendPagination: Boolean,
+});
 
-  setup(props, { emit }) {
-    const newCurrentPage = ref(props.currentPage);
-    const newCheckedRows = ref([...props.checkedRows]);
-    const currentSort = ref(props.defaultSort);
-    const currentSortDir = ref(props.defaultSortDirection);
-
-    const tableClasses = computed(() => ({
-      'ui-table scrollbar--thin': true,
-      'ui-table--sticky-header': props.stickyHeader,
-      'ui-table--sticky-column': props.stickyColumn,
-      'ui-table--sticky-column-two': props.stickyColumnTwo
-    }));
-
-    const itemsLength = computed(() => (props.backendPagination ? props.total : filteredItems.value.length));
-
-    const filteredItems = computed(() => {
-      if (!props.backendPagination && props.search) {
-        const propsKeys = props.headers.map(h => h.value);
-        return props.items.filter(item =>
-          propsKeys.some(key => defaultFilter(getValueByPath(item, key), props.search.toLowerCase()))
-        );
-      }
-      return props.items;
-    });
-
-    const computedItems = computed(() => {
-      let items = [...filteredItems.value];
-      if (currentSort.value && !props.backendPagination) items = sortItems(items);
-      if (props.paginated && !props.backendPagination) items = paginateItems(items);
-      return items;
-    });
-
-    const headerStyle = header => ({
-      width: `${header.width || 300}px`,
-      flex: `${header.width || 300} 0 auto`,
-      maxWidth: `${header.width || 300}px`,
-      backgroundColor: header.color || 'rgb(243 244 246)'
-    });
-
-    const bodyStyle = header => ({
-      width: `${header.width || 300}px`,
-      flex: `${header.width || 300} 0 auto`,
-      maxWidth: `${header.width || 300}px`,
-    });
-
-
-    const pageChanged = page => {
-      newCurrentPage.value = page;
-      emit('update:currentPage', page);
-      emit('page-change', page);
-    };
-
-    const sortItems = items => {
-      return items.sort((a, b) => {
-        const aValue = getValueByPath(a, currentSort.value);
-        const bValue = getValueByPath(b, currentSort.value);
-        return currentSortDir.value === 'asc' ? aValue - bValue : bValue - aValue;
-      });
-    };
-
-    const paginateItems = items => {
-      const start = (newCurrentPage.value - 1) * props.perPage;
-      const end = start + props.perPage;
-      return items.slice(start, end);
-    };
-
-    const isRowChecked = row => {
-      return newCheckedRows.value.includes(row);
-    };
-
-   const sortClass = () => {
-      return header => {
-        return this.currentSortDir === "asc" &&
-          this.currentSort === header.value
-          ? "ui-table__sortable--asc"
-          : this.currentSortDir === "desc" && this.currentSort === header.value
-          ? "ui-table__sortable--dsc"
-          : ""
-      }
-    }
-
-    const isAllChecked = computed(() => {
-        return (
-            computedItems.value.length > 0 &&
-            computedItems.value.every(row => newCheckedRows.value.includes(row))
-        );
-    });
-
-    const isIndeterminate = computed(() => {
-    const checkedCount = computedItems.value.filter(row =>
-        newCheckedRows.value.includes(row)
-    ).length;
-    return checkedCount > 0 && checkedCount < computedItems.value.length;
-    });
-
-    const checkAll = () => {
-    if (isAllChecked.value) {
-        // Uncheck all rows
-        newCheckedRows.value = []
-    } else {
-        // Check all rows
-        const rowsToCheck = computedItems.value.filter(
-        row => !newCheckedRows.value.includes(row)
-        );
-        newCheckedRows.value.push(...rowsToCheck);
-    }
-    emit('check', newCheckedRows.value);
-    emit("check-all", newCheckedRows.value);
-    emit("update:checkedRows", newCheckedRows.value);
-    emit("update:selectedRows", newCheckedRows.value);
-    };
-
-    const removeCheckedRow = (row) => {
-        const index = indexOf(newCheckedRows.value, row);
-        if (index >= 0) {
-            newCheckedRows.value.splice(index, 1);
-        }
-    };
-
-    const checkRow = (row, index, event) => {
-      const isChecked = newCheckedRows.value.includes(row);
-        if (event.target && isChecked) {
-            // Remove row from checkedRows
-            removeCheckedRow(row);
-        }
-        else {
-            newCheckedRows.value.push(row);
-        };
-      emit('check', newCheckedRows.value);
-      emit("update:checkedRows", newCheckedRows.value);
-      emit("update:selectedRows", newCheckedRows.value);
-    };
-
-    watch(() => props.currentPage, newPage => (newCurrentPage.value = newPage));
-    watch(() => props.checkedRows, rows => (newCheckedRows.value = [...rows]));
-
-    return {
-      tableClasses,
-      computedItems,
-      headerStyle,
-      bodyStyle,
-      pageChanged,
-      checkRow,
-      checkAll,
-      itemsLength,
-      sortClass,
-      isRowChecked,
-      isAllChecked,
-      isIndeterminate,
-      getValueByPath,
-      capitalizeText
-    };
+const {
+  defaultSort,
+  defaultSortDirection,
+  checkedRows,
+  currentPage,
+  items,
+  backendPagination,
+  total,
+  search,
+  headers,
+  paginated,
+  isRowCheckable,
+} = toRefs(props);
+
+// Emits used
+const emit = defineEmits([
+  "update:currentPage",
+  "changePage",
+  "sort",
+  "check",
+  "check-all",
+  "update:checkedRows",
+  "update:selectedRows",
+  "changeLimit",
+  "mouseenter",
+  "mouseleave",
+]);
+
+const currentSort = ref(defaultSort.value);
+const currentSortDir = ref(defaultSortDirection.value);
+const newCheckedRows = ref([...checkedRows.value]);
+const newCurrentPage = ref(currentPage.value);
+const limit = ref(props.perPage);
+const loading = computed(() => props.tableLoading);
+
+// Computed Property
+
+const filteredItems = computed(() => {
+  let filteredItems = items.value.slice();
+  if (!backendPagination.value && search.value !== "") {
+    if (search.value.trim() === "") return filteredItems;
+    const props = headers.value.map((h: any) => h.value);
+    filteredItems = items.value.filter((row) =>
+      props.some((prop) =>
+        defaultFilter(
+          getValueByPath(row, prop),
+          search.value.toString().toLowerCase()
+        )
+      )
+    );
   }
+  return filteredItems;
+});
+
+const computedItems = computed(() => {
+  let items = filteredItems.value;
+  // Sort items before slicing for pagination
+  items.sort((a: any, b: any) => {
+    const modifier = currentSortDir.value === "desc" ? -1 : 1;
+    if (a[currentSort.value] < b[currentSort.value]) return -1 * modifier;
+    if (a[currentSort.value] > b[currentSort.value]) return 1 * modifier;
+    return 0;
+  });
+  return items;
+
+  // Apply pagination
+  // const start = (newCurrentPage.value - 0) * limit.value;
+  // const end = start + limit.value;
+  // return items.slice(start, end);
+});
+
+const headerStyle = (header: Header) => ({
+  width: `${header.width || 300}px`,
+  flex: `${header.width || 300} 0 auto`,
+  maxWidth: `${header.width || 300}px`,
+  backgroundColor: header.color || "rgb(243 244 246)",
+});
+
+const bodyStyle = (header: Header) => ({
+  width: `${header.width || 300}px`,
+  flex: `${header.width || 300} 0 auto`,
+  maxWidth: `${header.width || 300}px`,
+});
+
+const searchData = (_data: any) => {
+  // console.log(_data);
 };
-</script>
 
-<style lang="scss" scoped>
-.ui-table {
-  @apply overflow-auto bg-white bg-no-repeat;
-  background-image: linear-gradient(to right, white, white),
-    linear-gradient(to right, white, white),
-    linear-gradient(to right, rgba(223, 231, 242, 1), rgba(255, 255, 255, 0)),
-    linear-gradient(to left, rgba(223, 231, 242, 1), rgba(255, 255, 255, 0)),
-    linear-gradient(to top, white, rgba(255, 255, 255, 0)),
-    linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(223, 231, 242, 1));
-  background-position: left center, right center, left center, right center,
-    left bottom, left bottom;
-  background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%, 100% 100px,
-    100% 20px;
-  background-attachment: local, local, scroll, scroll, local, scroll;
-
-  .table {
-    @apply border-separate w-full border-0 border-spacing-0 border-gray-50 box-border;
-    border-spacing: 0;
-    thead {
-      tr {
-        @apply flex flex-grow;
-        th {
-          @apply bg-gray-50 px-3 py-4 text-sm text-gray-600 text-left font-semibold uppercase border border-l-0 border-solid border-neutral-200 cursor-auto whitespace-nowrap flex items-center last-of-type:rounded-tr-lg first-of-type:rounded-tl-lg first:border-l last:border-r;
-          height: 45px;
-          transition: all 0.15s ease-out;
-          &:last-of-type {
-            max-width: unset !important;
-          }
-          &__sortable {
-            @apply cursor-pointer pr-12;
-            &--active {
-              @apply bg-purple-50;
-            }
-            &::before,
-            &::after {
-              @apply absolute w-0 h-0;
-              content: "";
-              right: 20px;
-              border-left: 4px solid transparent;
-              border-right: 4px solid transparent;
-            }
-            &::before {
-              top: 13px;
-              border-bottom: 6px solid theme('colors.gray.600');
-            }
-            &::after {
-              top: 22px;
-              border-top: 6px solid theme("colors.gray.500");
-            }
-            &--asc {
-              &::before {
-                border-bottom: 6px solid theme("colors.purple.300");
-              }
-            }
-            &--dsc {
-              &::after {
-                border-top: 6px solid theme("colors.purple.300");
-              }
-            }
-          }
-        }
-      }
-    }
-    tbody {
-      tr {
-        @apply flex flex-grow transition-all duration-100 ease-in-out;
-        &:hover {
-          transition: all 0.15s ease-out;
-          @apply bg-gray-50;
-          td {
-            @apply border-purple-500 border-t first:rounded-l last:rounded-r border-r-gray-200 last:border-r-purple-500;
-          }
-        }
-        td {
-          @apply relative text-sm text-gray-900 border-b border-solid break-words flex items-center border-0 first:border-l border-r border-gray-200 py-1.5 px-3 h-12;
-          &:last-of-type {
-            max-width: unset !important;
-          }
-        }
-        &:last-child {
-          td {
-            @apply border-b-0;
-          }
-        }
-      }
-    }
-  }
-  &__truncate {
-    @apply truncate w-full;
-  }
-  &--sticky-column {
-    .table {
-      thead {
-        tr {
-          th {
-            &:first-child {
-              @apply sticky left-0 z-20;
-            }
-          }
-        }
-      }
-      tbody {
-        tr {
-          td {
-            &:first-child {
-              @apply sticky left-0 border-r bg-white;
-              z-index: 2;
-            }
-          }
-        }
-      }
-    }
-    &-with-checkbox {
-      .table {
-        thead {
-          tr {
-            th {
-              &:nth-child(2) {
-                @apply sticky z-20;
-                left: 45px;
-              }
-            }
-          }
-        }
-        tbody {
-          tr {
-            td {
-              &:nth-child(2) {
-                @apply sticky border-r bg-white;
-                left: 45px;
-                z-index: 2;
-              }
-            }
-          }
-        }
-      }
-    }
-    &-two {
-      .table {
-        thead {
-          tr {
-            th {
-              &:nth-child(2) {
-                @apply sticky z-20;
-                left: 300px;
-              }
-            }
-          }
-        }
-        tbody {
-          tr {
-            td {
-              &:nth-child(2) {
-                @apply sticky border-r bg-white;
-                left: 300px;
-                z-index: 2;
-              }
-            }
-          }
-        }
-      }
-    }
+const changeLimit = (limitData: number) => {
+  limit.value = limitData;
+  newCurrentPage.value = 1;
+  emit("update:currentPage", newCurrentPage.value);
+  emit("changeLimit", limitData);
+};
+
+const pageChanged = (page: number) => {
+  newCurrentPage.value = page > 0 ? page : 0;
+  emit("update:currentPage", newCurrentPage.value);
+  emit("changePage", page);
+};
+
+const sortBy = (header: any, event: any) => {
+  if (!header || !header.sortable) return;
+  if (header.value === currentSort.value) {
+    currentSortDir.value = currentSortDir.value === "asc" ? "desc" : "asc";
   }
-  &--sticky-header {
-    .table {
-      thead {
-        tr {
-          @apply sticky top-0 z-10;
-        }
-      }
-    }
+  currentSort.value = header.value;
+  emit("sort", currentSort.value, currentSortDir.value, event);
+};
+
+const isAllChecked = computed(() => {
+  return (
+    computedItems.value.length > 0 &&
+    computedItems.value.every((row) => newCheckedRows.value.includes(row))
+  );
+});
+
+const isAllUncheckable = computed(() => {
+  const validVisibleData = computedItems.value?.filter((row) =>
+    isRowCheckable.value!(row)
+  );
+  return validVisibleData.length === 0;
+});
+
+const isIndeterminate = computed(() => {
+  const validVisibleData = computedItems.value.filter((row) =>
+    isRowCheckable.value(row)
+  );
+  return (
+    newCheckedRows.value.length > 0 &&
+    newCheckedRows.value.length < validVisibleData.length
+  );
+});
+
+const isRowChecked = (row: any) => {
+  return indexOf(newCheckedRows.value, row) >= 0;
+};
+
+const removeCheckedRow = (row: any) => {
+  const index = indexOf(newCheckedRows.value, row);
+  if (index >= 0) {
+    newCheckedRows.value.splice(index, 1);
   }
-  &__no-result {
-    @apply w-full border-none;
-    position: unset;
+};
+
+const checkAll = () => {
+  if (isAllChecked.value) {
+    // Uncheck all rows
+    newCheckedRows.value = [];
+  } else {
+    // Check all rows
+    const rowsToCheck = computedItems.value.filter(
+      (row) => !newCheckedRows.value.includes(row)
+    );
+    newCheckedRows.value.push(...rowsToCheck);
   }
-  &__hovercontent {
-    @apply flex items-center absolute inset-y-0;
-    right: 10px;
-    transition: all 0.15s ease-out;
-    &--show {
-      opacity: 1;
-    }
-    &--hide {
-      opacity: 0;
-    }
+  emit("check", newCheckedRows.value);
+  emit("check-all", newCheckedRows.value);
+  emit("update:checkedRows", newCheckedRows.value);
+  emit("update:selectedRows", newCheckedRows.value);
+};
+
+const checkRow = (row: any, _rowIndex: number, _event: any) => {
+  const isChecked = newCheckedRows.value.includes(row);
+  if (_event && isChecked) {
+    removeCheckedRow(row);
+  } else {
+    newCheckedRows.value.push(row);
   }
-  &__footer {
-    @apply flex justify-between items-center p-3;
+  emit("check", newCheckedRows.value, row);
+  emit("update:checkedRows", newCheckedRows.value);
+  emit("update:selectedRows", newCheckedRows.value);
+};
+
+// watch
+watch(
+  () => currentPage.value,
+  (newVal) => {
+    newCurrentPage.value = newVal;
+  },
+  { immediate: true }
+);
+watch(
+  () => checkedRows.value,
+  (rows) => {
+    newCheckedRows.value = [...rows];
+  },
+  { immediate: true }
+);
+
+const stickyClass = computed(() => {
+  return props.checkable && props.stickyColumn
+    ? {
+        head: "bg-gray-100 sticky left-[45px] top-0 z-20",
+        body: "bg-white !sticky left-[45px] top-0 z-10 after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-0 after:bg-white/10",
+      }
+    : {
+        head: "bg-gray-100 sticky left-0 top-0 z-20",
+        body: "bg-white !sticky left-0 top-0 z-10 after:absolute after:content-[''] after:bg-inherit after:w-2 after:h-[103%] after:inset-y-0 after:-right-2 after:bg-gradient-to-r after:from-gray-200 after:from-0% after:via-gray-50 after:via-60% after:z-0 after:bg-white/10",
+      };
+});
+
+const isOverflowing = ref(false);
+const isScrolled = ref(false);
+const tableContainer = ref<HTMLElement | null>(null);
+
+const handleScroll = () => {
+  const container = tableContainer.value;
+  if (container) {
+    isScrolled.value = container.scrollLeft > 0;
   }
-}
+};
 
-.search-icon {
-  span {
-    &::after {
-      @apply absolute m-auto;
-      content: "";
-      width: 18px;
-      height: 18px;
-      top: 10px;
-      right: 14px;
-      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='18px' fill='%2393a3b8' viewBox='0 0 28.931 28.932' style='enable-background:new 0 0 28.931 28.932;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M28.344,25.518l-6.114-6.115c1.486-2.067,2.303-4.537,2.303-7.137c0-3.275-1.275-6.355-3.594-8.672 C18.625,1.278,15.543,0,12.266,0C8.99,0,5.909,1.275,3.593,3.594C1.277,5.909,0.001,8.99,0.001,12.266 c0,3.276,1.275,6.356,3.592,8.674c2.316,2.316,5.396,3.594,8.673,3.594c2.599,0,5.067-0.813,7.136-2.303l6.114,6.115 c0.392,0.391,0.902,0.586,1.414,0.586c0.513,0,1.024-0.195,1.414-0.586C29.125,27.564,29.125,26.299,28.344,25.518z M6.422,18.111 c-1.562-1.562-2.421-3.639-2.421-5.846S4.86,7.983,6.422,6.421c1.561-1.562,3.636-2.422,5.844-2.422s4.284,0.86,5.845,2.422 c1.562,1.562,2.422,3.638,2.422,5.845s-0.859,4.283-2.422,5.846c-1.562,1.562-3.636,2.42-5.845,2.42S7.981,19.672,6.422,18.111z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
-    }
+const checkOverflow = () => {
+  const container = tableContainer.value;
+  if (container) {
+    isOverflowing.value = container.scrollWidth > container.clientWidth;
   }
-}
+};
 
-</style>
+onMounted(() => {
+  window.addEventListener("resize", checkOverflow);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", checkOverflow);
+});
+
+// Watch for changes in the container's width to check for overflow
+watch(() => tableContainer.value?.clientWidth, checkOverflow);
+</script>