ketekny-ui-kit 1.0.31 → 1.0.32

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kDatatable.vue

@@ -1,31 +1,51 @@
 <template>
-  <div ref="tableWrapper" :class="['k-datatable-wrapper rounded-lg border border-primary/15', disabled ? 'pointer-events-none opacity-60' : '']">
+  <div
+    ref="tableWrapper"
+    :class="[
+      'k-datatable-wrapper rounded-lg border border-primary/15',
+      disabled ? 'pointer-events-none opacity-60' : '',
+    ]"
+  >
     <EasyDataTable
       v-bind="$attrs"
-      :headers="headers"
-      :items="items"
+      :headers="computedHeaders"
+      :items="keyedItems"
       :search="search"
       :theme-color="themeColor"
-      :show-select="effectiveSelectionMode !== 'none'"
-      :single-select="effectiveSelectionMode === 'single'"
-      v-if="effectiveSelectionMode !== 'none'"
-      :items-selected="internalSelection"
-      @update:items-selected="handleSelectionUpdate"
-      :itemSelectable="itemSelectable"
+      :show-select="false"
       :body-row-class-name="composeBodyRowClassName"
       alternating
       buttons-pagination
       table-class-name="customize-table"
     >
-      <!-- Forward all named slots -->
-      <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotProps">
-        <slot :name="name" v-bind="slotProps" />
+      <template v-if="effectiveSelectionMode === 'multiple'" #header-__kdt_select>
+        <div class="k-datatable-select-cell">
+          <input
+            type="checkbox"
+            class="easy-checkbox"
+            :checked="allSelectableSelected"
+            :indeterminate.prop="partiallySelectableSelected"
+            :disabled="disabled || pageSelectableKeys.length === 0"
+            @click.stop
+            @change="handleSelectAllChange"
+          />
+        </div>
+      </template>
+
+      <template v-if="effectiveSelectionMode !== 'none'" #item-__kdt_select="slotItem">
+        <div class="k-datatable-select-cell">
+          <input
+            type="checkbox"
+            class="easy-checkbox"
+            :checked="isItemSelected(slotItem)"
+            :disabled="disabled || !isItemSelectable(slotItem)"
+            @click.stop
+            @change="($event) => handleItemSelectionChange($event, slotItem)"
+          />
+        </div>
       </template>
-    </EasyDataTable>
 
-    <!-- Render separate table without v-model when no selection -->
-    <EasyDataTable v-else v-bind="$attrs" :headers="headers" :items="items" :search="search" :theme-color="themeColor" :show-select="false" :body-row-class-name="composeBodyRowClassName" alternating buttons-pagination table-class-name="customize-table">
-      <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotProps">
+      <template v-for="name in forwardedSlotNames" :key="name" v-slot:[name]="slotProps">
         <slot :name="name" v-bind="slotProps" />
       </template>
     </EasyDataTable>
@@ -39,7 +59,7 @@ import "vue3-easy-data-table/dist/style.css";
 export default {
   name: "kDatatable",
   components: { EasyDataTable },
-  inheritAttrs: false, // Optional: for even cleaner control (optional)
+  inheritAttrs: false,
 
   props: {
     headers: { type: Array, required: true },
@@ -59,7 +79,12 @@ export default {
 
     itemSelectable: {
       type: Function,
-      default: () => () => true, // all selectable by default
+      default: () => true,
+    },
+
+    itemKey: {
+      type: [String, Function, null],
+      default: null,
     },
 
     modelValue: {
@@ -72,115 +97,195 @@ export default {
 
   data() {
     return {
-      internalSelection: this.normalizeModelValue(this.modelValue),
-      pendingSelectionInteraction: null,
-      lastSelectionAnchor: null,
-      lastSelectionAnchorRowNumber: null,
+      internalSelection: [],
+      selectedKeys: [],
+      selectedKeySet: new Set(),
+      lastSelectionAnchorKey: null,
+      currentPageRowsCache: [],
+      keyedItems: [],
+      currentItemsByKey: new Map(),
+      baseKeyToKeys: new Map(),
+      sourceItemToKey: new WeakMap(),
+      selectableKeys: [],
     };
   },
-  created() {
-    this.currentPageRowsCache = [];
-  },
-  mounted() {
-    this.bindSelectionInteractionListener();
-  },
-  beforeUnmount() {
-    this.unbindSelectionInteractionListener();
-  },
+
   computed: {
     effectiveSelectionMode() {
       return this.disabled ? "none" : this.selectionMode;
     },
+    computedHeaders() {
+      if (this.effectiveSelectionMode === "none") return this.headers;
+      return [{ text: "", value: "__kdt_select", width: 36 }, ...this.headers];
+    },
+    forwardedSlotNames() {
+      const reserved = new Set(["header-__kdt_select", "item-__kdt_select"]);
+      return Object.keys(this.$slots).filter((name) => !reserved.has(name));
+    },
+    pageSelectableKeys() {
+      const keys = [];
+      const seen = new Set();
+      this.currentPageRowsCache.forEach((rowItem) => {
+        const key = this.resolveIncomingItemKey(rowItem);
+        if (!key || seen.has(key)) return;
+        const sourceItem = this.currentItemsByKey.get(key);
+        if (!sourceItem || !this.isItemSelectable(sourceItem)) return;
+        seen.add(key);
+        keys.push(key);
+      });
+      return keys;
+    },
+    allSelectableSelected() {
+      if (!this.pageSelectableKeys.length) return false;
+      return this.pageSelectableKeys.every((key) => this.selectedKeySet.has(key));
+    },
+    partiallySelectableSelected() {
+      if (!this.pageSelectableKeys.length || this.allSelectableSelected) return false;
+      return this.pageSelectableKeys.some((key) => this.selectedKeySet.has(key));
+    },
+  },
+
+  created() {
+    this.rebuildItemCaches();
+    this.applyExternalModelValue(this.modelValue);
   },
 
   watch: {
+    items: {
+      handler() {
+        this.rebuildItemCaches();
+        this.reconcileSelectionWithItems();
+      },
+      deep: false,
+    },
+    itemSelectable: {
+      handler() {
+        this.rebuildItemCaches();
+        this.reconcileSelectionWithItems();
+      },
+      deep: false,
+    },
+    itemKey: {
+      handler() {
+        this.rebuildItemCaches();
+        this.reconcileSelectionWithItems();
+      },
+      deep: false,
+    },
     modelValue(val) {
-      this.internalSelection = this.normalizeModelValue(val);
+      this.applyExternalModelValue(val);
+    },
+    selectionMode() {
+      this.applyExternalModelValue(this.modelValue);
     },
   },
 
   methods: {
-    handleSelectionUpdate(newSelection) {
-      if (this.selectionMode === "single") {
-        const nextSelection = Array.isArray(newSelection) ? newSelection : [];
-        this.internalSelection = nextSelection;
-        this.$emit("update:modelValue", nextSelection[0] || null);
-        return;
-      }
+    handleSelectAllChange(event) {
+      if (this.effectiveSelectionMode !== "multiple" || this.disabled) return;
+      const shouldSelect = Boolean(event?.target?.checked);
+      const nextKeySet = new Set(this.selectedKeys);
 
-      if (this.selectionMode === "multiple") {
-        const oldSelection = Array.isArray(this.internalSelection) ? this.internalSelection : [];
-        const candidateSelection = Array.isArray(newSelection) ? newSelection : [];
-        const nextSelection = this.resolveShiftRangeSelection(candidateSelection, oldSelection);
-        this.internalSelection = nextSelection;
-        this.$emit("update:modelValue", nextSelection);
-      }
-    },
-    bindSelectionInteractionListener() {
-      this.$refs.tableWrapper?.addEventListener("click", this.captureSelectionInteraction, true);
-    },
-    unbindSelectionInteractionListener() {
-      this.$refs.tableWrapper?.removeEventListener("click", this.captureSelectionInteraction, true);
+      this.pageSelectableKeys.forEach((key) => {
+        if (shouldSelect) nextKeySet.add(key);
+        else nextKeySet.delete(key);
+      });
+
+      const nextKeys = this.keyedItems
+        .map((item) => item.__kdt_key)
+        .filter((itemKey) => nextKeySet.has(itemKey));
+
+      this.commitSelectionByKeys(nextKeys, { emit: true, anchorKey: null });
     },
-    captureSelectionInteraction(event) {
-      if (this.selectionMode !== "multiple" || this.disabled || !(event.target instanceof Element)) {
+    handleItemSelectionChange(event, slotItem) {
+      if (this.effectiveSelectionMode === "none" || this.disabled) return;
+
+      const key = this.resolveIncomingItemKey(slotItem);
+      if (!key) return;
+
+      const sourceItem = this.currentItemsByKey.get(key);
+      if (!sourceItem || !this.isItemSelectable(sourceItem)) return;
+
+      const shouldSelect = Boolean(event?.target?.checked);
+
+      if (this.selectionMode === "single") {
+        this.commitSelectionByKeys(shouldSelect ? [key] : [], {
+          emit: true,
+          anchorKey: shouldSelect ? key : null,
+        });
         return;
       }
 
-      const checkbox = event.target.closest(".easy-checkbox");
-      if (!checkbox) return;
+      if (event?.shiftKey && this.lastSelectionAnchorKey && key !== this.lastSelectionAnchorKey) {
+        const selectableKeySet = new Set(this.selectableKeys);
+        const rangeKeys = this.resolveRangeKeys(this.lastSelectionAnchorKey, key).filter((rangeKey) =>
+          selectableKeySet.has(rangeKey),
+        );
+        const nextKeySet = new Set(this.selectedKeys);
+
+        rangeKeys.forEach((rangeKey) => {
+          if (shouldSelect) nextKeySet.add(rangeKey);
+          else nextKeySet.delete(rangeKey);
+        });
+
+        const nextKeys = this.keyedItems
+          .map((item) => item.__kdt_key)
+          .filter((itemKey) => nextKeySet.has(itemKey));
 
-      const row = checkbox.closest("tbody tr");
-      if (!row) {
-        // Clear pending row interaction so bulk select doesn't reuse stale row state.
-        this.pendingSelectionInteraction = null;
+        this.commitSelectionByKeys(nextKeys, { emit: true });
         return;
       }
 
-      const rowNumber = this.resolveClickedRowNumber(row);
-      if (!rowNumber) return;
-      const clickedItem = this.currentPageRowsCache[rowNumber - 1];
+      const nextKeySet = new Set(this.selectedKeys);
+      if (shouldSelect) nextKeySet.add(key);
+      else nextKeySet.delete(key);
 
-      if (!event.shiftKey && clickedItem) {
-        this.lastSelectionAnchor = clickedItem;
-        this.lastSelectionAnchorRowNumber = rowNumber;
-      }
+      const nextKeys = this.keyedItems
+        .map((item) => item.__kdt_key)
+        .filter((itemKey) => nextKeySet.has(itemKey));
 
-      if (event.shiftKey && this.lastSelectionAnchor && clickedItem) {
-        const anchorIndex = this.findItemIndex(this.lastSelectionAnchor);
-        const targetIndex = this.findItemIndex(clickedItem);
-        if (anchorIndex !== -1 && targetIndex !== -1) {
-          event.preventDefault();
-          event.stopPropagation();
-          const shouldSelectRange = !this.containsItem(this.internalSelection, clickedItem);
-          const nextSelection = this.applyRangeSelection(this.internalSelection, anchorIndex, targetIndex, rowNumber, shouldSelectRange);
-          this.pendingSelectionInteraction = null;
-          this.internalSelection = nextSelection;
-          this.$emit("update:modelValue", nextSelection);
-          return;
-        }
+      this.commitSelectionByKeys(nextKeys, { emit: true, anchorKey: key });
+    },
+    isItemSelected(item) {
+      const key = this.resolveIncomingItemKey(item);
+      return key != null && this.selectedKeySet.has(key);
+    },
+    isItemSelectable(item) {
+      if (typeof this.itemSelectable !== "function") return true;
+      try {
+        return this.itemSelectable(this.normalizeItem(item)) !== false;
+      } catch {
+        return false;
       }
-
-      this.pendingSelectionInteraction = {
-        shiftKey: event.shiftKey,
-        rowNumber,
-      };
     },
-    resolveClickedRowNumber(rowElement) {
-      const tbody = rowElement.parentElement;
-      if (!tbody) return null;
+    resolveRangeKeys(anchorKey, targetKey) {
+      const visibleKeys = this.currentPageRowsCache
+        .map((item) => this.resolveIncomingItemKey(item))
+        .filter((key) => key != null);
+
+      const fallbackKeys = this.keyedItems.map((item) => item.__kdt_key);
+      const keyOrders = visibleKeys.length ? [visibleKeys, fallbackKeys] : [fallbackKeys];
+
+      for (const orderedKeys of keyOrders) {
+        const anchorIndex = orderedKeys.indexOf(anchorKey);
+        const targetIndex = orderedKeys.indexOf(targetKey);
+        if (anchorIndex === -1 || targetIndex === -1) continue;
+
+        const [start, end] =
+          anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
+        return orderedKeys.slice(start, end + 1);
+      }
 
-      const selectableRows = Array.from(tbody.querySelectorAll("tr")).filter((row) => row.querySelector(".easy-checkbox"));
-      const rowIndex = selectableRows.indexOf(rowElement);
-      return rowIndex === -1 ? null : rowIndex + 1;
+      return [targetKey];
     },
     composeBodyRowClassName(item, rowNumber) {
       if (rowNumber === 1) {
         this.currentPageRowsCache = [];
       }
-      this.currentPageRowsCache[rowNumber - 1] = this.normalizeItem(item);
+      this.currentPageRowsCache[rowNumber - 1] = item;
 
-      const externalBodyRowClass = this.$attrs["body-row-class-name"] ?? this.$attrs.bodyRowClassName;
+      const externalBodyRowClass =
+        this.$attrs["body-row-class-name"] ?? this.$attrs.bodyRowClassName;
       if (typeof externalBodyRowClass === "function") {
         return externalBodyRowClass(item, rowNumber);
       }
@@ -189,126 +294,200 @@ export default {
       }
       return "";
     },
-    resolveShiftRangeSelection(newSelection, oldSelection = []) {
-      if (this.selectionMode !== "multiple") return newSelection;
+    rebuildItemCaches() {
+      const keyedItems = [];
+      const currentItemsByKey = new Map();
+      const baseKeyToKeys = new Map();
+      const sourceItemToKey = new WeakMap();
+      const selectableKeys = [];
+
+      this.items.forEach((sourceItem, index) => {
+        const baseKey = this.deriveBaseKey(sourceItem, index);
+        const uniqueKey = this.ensureUniqueKey(baseKey, currentItemsByKey);
+        const normalizedItem = this.normalizeItem(sourceItem);
+        const keyedItem =
+          normalizedItem && typeof normalizedItem === "object"
+            ? { ...normalizedItem, __kdt_key: uniqueKey }
+            : { value: normalizedItem, __kdt_key: uniqueKey };
+
+        keyedItems.push(keyedItem);
+        currentItemsByKey.set(uniqueKey, sourceItem);
+
+        if (sourceItem && typeof sourceItem === "object") {
+          sourceItemToKey.set(sourceItem, uniqueKey);
+        }
 
-      const interaction = this.pendingSelectionInteraction;
-      this.pendingSelectionInteraction = null;
+        const keyList = baseKeyToKeys.get(baseKey) ?? [];
+        keyList.push(uniqueKey);
+        baseKeyToKeys.set(baseKey, keyList);
 
-      const toggledItemFromInteraction = interaction?.rowNumber ? this.currentPageRowsCache[interaction.rowNumber - 1] : null;
-      const hasInteractionToggle = toggledItemFromInteraction
-        ? this.didItemSelectionChange(toggledItemFromInteraction, oldSelection, newSelection)
-        : false;
-      const toggledItem = hasInteractionToggle ? toggledItemFromInteraction : this.getToggledItem(oldSelection, newSelection);
-      if (!toggledItem) return newSelection;
+        if (this.isItemSelectable(sourceItem)) {
+          selectableKeys.push(uniqueKey);
+        }
+      });
+
+      this.keyedItems = keyedItems;
+      this.currentItemsByKey = currentItemsByKey;
+      this.baseKeyToKeys = baseKeyToKeys;
+      this.sourceItemToKey = sourceItemToKey;
+      this.selectableKeys = selectableKeys;
+      this.currentPageRowsCache = [];
+    },
+    ensureUniqueKey(baseKey, usedKeysMap) {
+      if (!usedKeysMap.has(baseKey)) return baseKey;
+      let suffix = 1;
+      let candidate = `${baseKey}#${suffix}`;
+      while (usedKeysMap.has(candidate)) {
+        suffix += 1;
+        candidate = `${baseKey}#${suffix}`;
+      }
+      return candidate;
+    },
+    deriveBaseKey(item, index = null) {
+      const normalized = this.normalizeItem(item);
+      const configuredKey = this.resolveConfiguredKey(normalized, index);
+      if (configuredKey != null && configuredKey !== "") {
+        return `k:${String(configuredKey)}`;
+      }
 
-      if (!interaction?.shiftKey || !hasInteractionToggle || !this.lastSelectionAnchor) {
-        this.lastSelectionAnchor = toggledItem;
-        this.lastSelectionAnchorRowNumber = hasInteractionToggle ? interaction?.rowNumber ?? null : null;
-        return newSelection;
+      if (normalized && typeof normalized === "object") {
+        if (normalized.id != null) return `id:${String(normalized.id)}`;
+        if (normalized.uuid != null) return `uuid:${String(normalized.uuid)}`;
+        if (normalized.hospIncNumber != null) {
+          return `hospIncNumber:${String(normalized.hospIncNumber)}`;
+        }
       }
 
-      const anchorIndex = this.findItemIndex(this.lastSelectionAnchor);
-      const targetIndex = this.findItemIndex(toggledItem);
-      if (anchorIndex === -1 || targetIndex === -1) {
-        this.lastSelectionAnchor = toggledItem;
-        this.lastSelectionAnchorRowNumber = interaction?.rowNumber ?? null;
-        return newSelection;
+      if (index != null) return `index:${index}`;
+
+      try {
+        return `json:${JSON.stringify(normalized)}`;
+      } catch {
+        return "fallback:0";
+      }
+    },
+    resolveConfiguredKey(item, index = null) {
+      if (!this.itemKey) return null;
+
+      if (typeof this.itemKey === "function") {
+        try {
+          return this.itemKey(item, index);
+        } catch {
+          return null;
+        }
       }
 
-      const rangeItems = this.getRangeItems(anchorIndex, targetIndex, interaction.rowNumber);
-      if (!rangeItems.length) return newSelection;
-      const shouldSelectRange = this.containsItem(newSelection, toggledItem);
-      return this.applyRangeSelection(newSelection, anchorIndex, targetIndex, interaction.rowNumber, shouldSelectRange);
-    },
-    applyRangeSelection(baseSelection, anchorIndex, targetIndex, targetRowNumber, shouldSelectRange) {
-      const rangeItems = this.getRangeItems(anchorIndex, targetIndex, targetRowNumber);
-      if (!rangeItems.length) return baseSelection;
-
-      let nextSelection = [...baseSelection];
-      if (shouldSelectRange) {
-        rangeItems.forEach((item) => {
-          if (!this.containsItem(nextSelection, item)) {
-            nextSelection.push(this.normalizeItem(item));
-          }
-        });
-      } else {
-        nextSelection = nextSelection.filter((selectedItem) => !rangeItems.some((item) => this.areItemsEqual(selectedItem, item)));
+      if (typeof this.itemKey === "string" && item && typeof item === "object") {
+        return item[this.itemKey];
       }
 
-      return this.areSelectionsEqual(nextSelection, baseSelection) ? baseSelection : nextSelection;
+      return null;
     },
-    getRangeItems(anchorIndex, targetIndex, targetRowNumber) {
-      const anchorRowNumber = this.lastSelectionAnchorRowNumber;
-      if (anchorRowNumber && targetRowNumber) {
-        const [start, end] = anchorRowNumber <= targetRowNumber ? [anchorRowNumber, targetRowNumber] : [targetRowNumber, anchorRowNumber];
-        const visibleRange = this.currentPageRowsCache.slice(start - 1, end).filter((item) => item);
-        if (visibleRange.length === end - start + 1) {
-          return visibleRange;
+    resolveIncomingItemKey(item, index = null) {
+      const normalized = this.normalizeItem(item);
+
+      if (normalized && typeof normalized === "object") {
+        const slotKey = normalized.__kdt_key;
+        if (slotKey != null && this.currentItemsByKey.has(String(slotKey))) {
+          return String(slotKey);
+        }
+
+        const byReference = this.sourceItemToKey.get(normalized);
+        if (byReference && this.currentItemsByKey.has(byReference)) {
+          return byReference;
         }
       }
 
-      const [start, end] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
-      return this.items.slice(start, end + 1);
+      const baseKey = this.deriveBaseKey(normalized, index);
+      const candidates = this.baseKeyToKeys.get(baseKey) ?? [];
+
+      if (candidates.length === 1) return candidates[0];
+      if (candidates.length > 1) return candidates[0];
+      return null;
     },
     normalizeItem(item) {
       if (!item || typeof item !== "object") return item;
       const normalized = { ...item };
       delete normalized.checkbox;
       delete normalized.index;
+      delete normalized.__kdt_select;
       return normalized;
     },
-    extractStableKey(item) {
-      const normalized = this.normalizeItem(item);
-      if (!normalized || typeof normalized !== "object") return null;
-      if (normalized.id != null) return `id:${normalized.id}`;
-      if (normalized.uuid != null) return `uuid:${normalized.uuid}`;
-      if (normalized.hospIncNumber != null) return `hospIncNumber:${normalized.hospIncNumber}`;
-      return null;
-    },
-    areItemsEqual(left, right) {
-      const leftKey = this.extractStableKey(left);
-      const rightKey = this.extractStableKey(right);
-      if (leftKey != null || rightKey != null) {
-        return leftKey != null && leftKey === rightKey;
+    applyExternalModelValue(value) {
+      if (this.selectionMode === "none") {
+        this.commitSelectionByKeys([], { emit: false, anchorKey: null });
+        return;
       }
 
-      const normalizedLeft = this.normalizeItem(left);
-      const normalizedRight = this.normalizeItem(right);
-      try {
-        return JSON.stringify(normalizedLeft) === JSON.stringify(normalizedRight);
-      } catch {
-        return normalizedLeft === normalizedRight;
+      if (this.selectionMode === "single") {
+        const key = value ? this.resolveIncomingItemKey(value) : null;
+        this.commitSelectionByKeys(key ? [key] : [], { emit: false, anchorKey: key ?? null });
+        return;
       }
+
+      const incomingArray = Array.isArray(value) ? value : [];
+      const nextKeys = incomingArray
+        .map((item, index) => this.resolveIncomingItemKey(item, index))
+        .filter((key) => key != null);
+      this.commitSelectionByKeys(nextKeys, { emit: false });
     },
-    containsItem(collection, item) {
-      return collection.some((current) => this.areItemsEqual(current, item));
-    },
-    didItemSelectionChange(item, previousSelection, nextSelection) {
-      return this.containsItem(previousSelection, item) !== this.containsItem(nextSelection, item);
+    reconcileSelectionWithItems() {
+      const changed = this.commitSelectionByKeys(this.selectedKeys, { emit: false });
+      if (changed) {
+        this.emitSelection();
+      }
     },
-    getToggledItem(previousSelection, nextSelection) {
-      const added = nextSelection.filter((item) => !this.containsItem(previousSelection, item));
-      if (added.length === 1) return this.normalizeItem(added[0]);
-      if (added.length > 1) return null;
+    commitSelectionByKeys(keys, { emit = true, anchorKey } = {}) {
+      const requestedKeys = Array.isArray(keys) ? keys : [];
+      const nextKeys = [];
+      const seen = new Set();
+
+      requestedKeys.forEach((key) => {
+        if (key == null || seen.has(key)) return;
+        const sourceItem = this.currentItemsByKey.get(key);
+        if (!sourceItem || !this.isItemSelectable(sourceItem)) return;
+        seen.add(key);
+        nextKeys.push(key);
+      });
+
+      if (this.selectionMode === "single" && nextKeys.length > 1) {
+        nextKeys.splice(1);
+      }
 
-      const removed = previousSelection.filter((item) => !this.containsItem(nextSelection, item));
-      if (removed.length === 1) return this.normalizeItem(removed[0]);
+      const hasChanged = !this.areKeyArraysEqual(nextKeys, this.selectedKeys);
 
-      return null;
-    },
-    findItemIndex(itemToFind) {
-      return this.items.findIndex((item) => this.areItemsEqual(item, itemToFind));
+      this.selectedKeys = nextKeys;
+      this.selectedKeySet = new Set(nextKeys);
+      this.internalSelection = nextKeys
+        .map((key) => this.currentItemsByKey.get(key))
+        .filter((item) => item != null);
+
+      if (anchorKey !== undefined) {
+        this.lastSelectionAnchorKey = anchorKey;
+      }
+
+      if (emit && hasChanged) {
+        this.emitSelection();
+      }
+
+      return hasChanged;
     },
-    areSelectionsEqual(first, second) {
-      if (first.length !== second.length) return false;
-      return first.every((item) => this.containsItem(second, item));
+    areKeyArraysEqual(left, right) {
+      if (left.length !== right.length) return false;
+      return left.every((key, index) => key === right[index]);
     },
-    normalizeModelValue(val) {
-      if (this.selectionMode === "none") return [];
-      if (this.selectionMode === "single") return val ? [val] : [];
-      if (this.selectionMode === "multiple") return Array.isArray(val) ? val : [];
-      return [];
+    emitSelection() {
+      if (this.selectionMode === "single") {
+        this.$emit("update:modelValue", this.internalSelection[0] ?? null);
+        return;
+      }
+
+      if (this.selectionMode === "multiple") {
+        this.$emit("update:modelValue", [...this.internalSelection]);
+        return;
+      }
+
+      this.$emit("update:modelValue", null);
     },
   },
 };
@@ -348,12 +527,11 @@ export default {
   --easy-table-footer-background-color: transparent;
   --easy-table-footer-font-color: #1f2937;
   --easy-table-footer-font-size: 14px;
-  --easy-table-footer-padding: 1rem; /* Added padding */
+  --easy-table-footer-padding: 1rem;
   --easy-table-footer-height: auto;
 
   --easy-table-rows-per-page-selector-width: 70px;
   --easy-table-rows-per-page-selector-option-padding: 10px;
-  --easy-table-rows-per-page-selector-z-index: 1;
   --easy-table-rows-per-page-selector-z-index: 200;
   --easy-table-rows-per-page-selector-font-color: #1f2937;
 
@@ -365,11 +543,17 @@ export default {
   --easy-table-loading-mask-background-color: rgba(255, 255, 255, 0.6);
 }
 
+.k-datatable-select-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* Target the rows-per-page dropdown */
 .customize-table .easy-data-table__footer select {
-  background-color: #fff; /* white dropdown background */
-  color: #1f2937; /* gray-800 text */
-  padding: 0.25rem 0.5rem; /* small padding */
+  background-color: #fff;
+  color: #1f2937;
+  padding: 0.25rem 0.5rem;
   border: 1px solid #bfdbfe;
   border-radius: 0.25rem;
 }