@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/utils/code-editor/tokenizer.js

@@ -0,0 +1,300 @@
+// src/utils/tokenizer.ts
+// Pure syntax tokenizer — no external deps
+function escH(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+// ─── JavaScript Tokenizer ────────────────────────────────────────────────────
+function tokenizeJS(code) {
+    const KW = /^(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|class|extends|new|this|super|import|export|default|from|typeof|instanceof|in|of|try|catch|finally|throw|async|await|static|get|set|delete|void|yield|null|undefined|true|false|NaN|Infinity)$/;
+    const BUILTIN = /^(console|Math|Array|Object|String|Number|Boolean|Symbol|BigInt|Promise|Map|Set|WeakMap|WeakSet|Error|TypeError|RangeError|JSON|Date|RegExp|Proxy|Reflect|globalThis|window|document|navigator|setTimeout|setInterval|clearTimeout|clearInterval|fetch|parseInt|parseFloat|isNaN|isFinite|encodeURI|decodeURI|structuredClone|queueMicrotask)$/;
+    const lines = code.split('\n');
+    let inMLComment = false;
+    return lines
+        .map(line => {
+        let out = '';
+        let rest = line;
+        if (inMLComment) {
+            const end = rest.indexOf('*/');
+            if (end < 0)
+                return `<span class="t-cmt">${escH(rest)}</span>`;
+            out += `<span class="t-cmt">${escH(rest.slice(0, end + 2))}</span>`;
+            rest = rest.slice(end + 2);
+            inMLComment = false;
+        }
+        while (rest.length > 0) {
+            // single-line comment
+            if (rest.startsWith('//')) {
+                out += `<span class="t-cmt">${escH(rest)}</span>`;
+                break;
+            }
+            // multi-line comment
+            if (rest.startsWith('/*')) {
+                const end = rest.indexOf('*/', 2);
+                if (end < 0) {
+                    out += `<span class="t-cmt">${escH(rest)}</span>`;
+                    inMLComment = true;
+                    break;
+                }
+                out += `<span class="t-cmt">${escH(rest.slice(0, end + 2))}</span>`;
+                rest = rest.slice(end + 2);
+                continue;
+            }
+            // template literal
+            if (rest[0] === '`') {
+                let i = 1, s = '`';
+                while (i < rest.length) {
+                    if (rest[i] === '\\') {
+                        s += rest[i] + rest[i + 1];
+                        i += 2;
+                        continue;
+                    }
+                    if (rest[i] === '`') {
+                        s += '`';
+                        i++;
+                        break;
+                    }
+                    s += rest[i++];
+                }
+                out += `<span class="t-str">${escH(s)}</span>`;
+                rest = rest.slice(s.length);
+                continue;
+            }
+            // string
+            const strM = rest.match(/^("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/);
+            if (strM) {
+                out += `<span class="t-str">${escH(strM[0])}</span>`;
+                rest = rest.slice(strM[0].length);
+                continue;
+            }
+            // decorator
+            if (rest[0] === '@') {
+                const dm = rest.match(/^@[a-zA-Z_$][a-zA-Z0-9_$]*/);
+                if (dm) {
+                    out += `<span class="t-dec">${escH(dm[0])}</span>`;
+                    rest = rest.slice(dm[0].length);
+                    continue;
+                }
+            }
+            // number
+            const numM = rest.match(/^(0x[\da-fA-F]+|0b[01]+|0o[0-7]+|\d+\.?\d*(?:[eE][+-]?\d+)?n?)\b/);
+            if (numM) {
+                out += `<span class="t-num">${numM[0]}</span>`;
+                rest = rest.slice(numM[0].length);
+                continue;
+            }
+            // identifier / keyword
+            const idM = rest.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/);
+            if (idM) {
+                const w = idM[0];
+                if (KW.test(w))
+                    out += `<span class="t-kw">${w}</span>`;
+                else if (BUILTIN.test(w))
+                    out += `<span class="t-bi">${w}</span>`;
+                else if (rest[w.length] === '(')
+                    out += `<span class="t-fn">${w}</span>`;
+                else
+                    out += `<span class="t-id">${escH(w)}</span>`;
+                rest = rest.slice(w.length);
+                continue;
+            }
+            // operator
+            const opM = rest.match(/^(===|!==|=>|\.{3}|\?\?=?|\?\.|[+\-*/%=<>!&|^~?:]+)/);
+            if (opM) {
+                out += `<span class="t-op">${escH(opM[0])}</span>`;
+                rest = rest.slice(opM[0].length);
+                continue;
+            }
+            out += escH(rest[0]);
+            rest = rest.slice(1);
+        }
+        return out;
+    })
+        .join('\n');
+}
+// ─── CSS Tokenizer ──────────────────────────────────────────────────────────
+function tokenizeCSS(code) {
+    const lines = code.split('\n');
+    let inComment = false;
+    return lines
+        .map(line => {
+        let out = '', rest = line;
+        if (inComment) {
+            const e = rest.indexOf('*/');
+            if (e < 0)
+                return `<span class="t-cmt">${escH(rest)}</span>`;
+            out += `<span class="t-cmt">${escH(rest.slice(0, e + 2))}</span>`;
+            rest = rest.slice(e + 2);
+            inComment = false;
+        }
+        while (rest.length > 0) {
+            if (rest.startsWith('/*')) {
+                const e = rest.indexOf('*/', 2);
+                if (e < 0) {
+                    out += `<span class="t-cmt">${escH(rest)}</span>`;
+                    inComment = true;
+                    break;
+                }
+                out += `<span class="t-cmt">${escH(rest.slice(0, e + 2))}</span>`;
+                rest = rest.slice(e + 2);
+                continue;
+            }
+            // string
+            const strM = rest.match(/^("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/);
+            if (strM) {
+                out += `<span class="t-str">${escH(strM[0])}</span>`;
+                rest = rest.slice(strM[0].length);
+                continue;
+            }
+            // @-rule
+            const atM = rest.match(/^@(media|keyframes|import|font-face|layer|container|supports|charset|namespace)\b/);
+            if (atM) {
+                out += `<span class="t-kw">${escH(atM[0])}</span>`;
+                rest = rest.slice(atM[0].length);
+                continue;
+            }
+            // CSS property
+            const propM = rest.match(/^(-{1,2}[a-zA-Z][a-zA-Z0-9-]*)(?=\s*:)/);
+            if (propM) {
+                out += `<span class="t-prop">${escH(propM[0])}</span>`;
+                rest = rest.slice(propM[0].length);
+                continue;
+            }
+            // hex color
+            const hashM = rest.match(/^#([0-9a-fA-F]{3,8})\b/);
+            if (hashM) {
+                out += `<span class="t-num" style="border-bottom:2px solid #${hashM[1]}">#${hashM[1]}</span>`;
+                rest = rest.slice(hashM[0].length);
+                continue;
+            }
+            // number + unit
+            const numM = rest.match(/^-?[\d.]+(?:px|em|rem|vh|vw|vmin|vmax|%|s|ms|deg|rad|fr|ch|ex|cm|mm|in|pt|pc)?/);
+            if (numM && numM[0] && /\d/.test(numM[0])) {
+                out += `<span class="t-num">${numM[0]}</span>`;
+                rest = rest.slice(numM[0].length);
+                continue;
+            }
+            // function call
+            const fnM = rest.match(/^([a-zA-Z-]+)(?=\s*\()/);
+            if (fnM) {
+                out += `<span class="t-fn">${fnM[1]}</span>`;
+                rest = rest.slice(fnM[1].length);
+                continue;
+            }
+            // selector fragment
+            const selM = rest.match(/^([.#:][a-zA-Z_-][a-zA-Z0-9_-]*)/);
+            if (selM) {
+                out += `<span class="t-sel">${escH(selM[0])}</span>`;
+                rest = rest.slice(selM[0].length);
+                continue;
+            }
+            // keyword value
+            const kwM = rest.match(/^\b(important|auto|none|inherit|initial|unset|normal|bold|flex|grid|block|inline|absolute|relative|fixed|sticky|hidden|visible|scroll|solid|dashed|dotted|transparent|currentColor|center|left|right|top|bottom)\b/);
+            if (kwM) {
+                out += `<span class="t-kw">${kwM[0]}</span>`;
+                rest = rest.slice(kwM[0].length);
+                continue;
+            }
+            out += escH(rest[0]);
+            rest = rest.slice(1);
+        }
+        return out;
+    })
+        .join('\n');
+}
+// ─── HTML Tokenizer ─────────────────────────────────────────────────────────
+function tokenizeHTML(code) {
+    let out = '', i = 0;
+    while (i < code.length) {
+        // comment
+        if (code.slice(i, i + 4) === '<!--') {
+            const e = code.indexOf('-->', i + 4);
+            const chunk = e >= 0 ? code.slice(i, e + 3) : code.slice(i);
+            out += `<span class="t-cmt">${escH(chunk)}</span>`;
+            i = e >= 0 ? e + 3 : code.length;
+            continue;
+        }
+        if (code[i] === '<') {
+            const tagEnd = code.indexOf('>', i);
+            if (tagEnd < 0) {
+                out += escH(code.slice(i));
+                break;
+            }
+            const rawTag = code.slice(i, tagEnd + 1);
+            const close = code[i + 1] === '/';
+            const tagM = rawTag.match(/^<\/?([a-zA-Z][a-zA-Z0-9-]*)/);
+            if (!tagM) {
+                out += escH(rawTag);
+                i = tagEnd + 1;
+                continue;
+            }
+            const tagName = tagM[1];
+            let inner = rawTag.slice(tagM[0].length, -1);
+            // highlight attributes
+            inner = inner.replace(/([a-zA-Z_:][a-zA-Z0-9_:.-]*)(\s*=\s*)("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')?/g, (_, a, eq, v) => `<span class="t-attr">${escH(a)}</span>${escH(eq || '')}${v ? `<span class="t-str">${escH(v)}</span>` : ''}`);
+            out += `<span class="t-op">&lt;${close ? '/' : ''}</span><span class="t-tag">${tagName}</span>${inner}<span class="t-op">&gt;</span>`;
+            i = tagEnd + 1;
+            continue;
+        }
+        // HTML entity
+        if (code[i] === '&') {
+            const e = code.indexOf(';', i);
+            if (e >= 0 && e - i < 12) {
+                out += `<span class="t-str">${escH(code.slice(i, e + 1))}</span>`;
+                i = e + 1;
+                continue;
+            }
+        }
+        out += escH(code[i++]);
+    }
+    return out;
+}
+// ─── JSON Tokenizer ─────────────────────────────────────────────────────────
+function tokenizeJSON(code) {
+    const lines = code.split('\n');
+    return lines
+        .map(line => {
+        let out = '', rest = line;
+        while (rest.length > 0) {
+            const strM = rest.match(/^("(?:[^"\\]|\\.)*")/);
+            if (strM) {
+                const s = strM[0];
+                if (rest[s.length] === ':' || rest.slice(s.length).match(/^\s*:/))
+                    out += `<span class="t-prop">${escH(s)}</span>`;
+                else
+                    out += `<span class="t-str">${escH(s)}</span>`;
+                rest = rest.slice(s.length);
+                continue;
+            }
+            const numM = rest.match(/^-?\d+\.?\d*(?:[eE][+-]?\d+)?/);
+            if (numM) {
+                out += `<span class="t-num">${numM[0]}</span>`;
+                rest = rest.slice(numM[0].length);
+                continue;
+            }
+            const kwM = rest.match(/^\b(true|false|null)\b/);
+            if (kwM) {
+                out += `<span class="t-kw">${kwM[0]}</span>`;
+                rest = rest.slice(kwM[0].length);
+                continue;
+            }
+            out += escH(rest[0]);
+            rest = rest.slice(1);
+        }
+        return out;
+    })
+        .join('\n');
+}
+export function tokenize(code, lang) {
+    switch (lang) {
+        case 'js':
+            return tokenizeJS(code);
+        case 'css':
+            return tokenizeCSS(code);
+        case 'html':
+            return tokenizeHTML(code);
+        case 'json':
+            return tokenizeJSON(code);
+        default:
+            return escH(code);
+    }
+}

package/dist/collection/utils/config.js

@@ -38,10 +38,10 @@ const defaultConfig = {
         error: 'cancel',
         warning: 'warning',
         info: 'info',
-    }
+    },
 };
 let globalConfig = {
-    icons: { ...defaultConfig.icons }
+    icons: { ...defaultConfig.icons },
 };
 export const setGlobalConfig = (config) => {
     globalConfig = {
@@ -50,7 +50,7 @@ export const setGlobalConfig = (config) => {
         icons: {
             ...globalConfig.icons,
             ...(config.icons || {}),
-        }
+        },
     };
 };
 export const getIcon = (key) => {

package/dist/collection/utils/form/core/abstract-control.js

@@ -22,18 +22,42 @@ export class AbstractControl {
     getRawValue() {
         return this.value;
     }
-    get valid() { return this._status === 'VALID'; }
-    get invalid() { return this._status === 'INVALID'; }
-    get pending() { return this._status === 'PENDING'; }
-    get disabled() { return this._status === 'DISABLED'; }
-    get enabled() { return this._status !== 'DISABLED'; }
-    get dirty() { return this._dirty; }
-    get pristine() { return !this._dirty; }
-    get touched() { return this._touched; }
-    get untouched() { return !this._touched; }
-    get status() { return this._status; }
-    get errors() { return this._errors; }
-    get updateOn() { return this._updateOn; }
+    get valid() {
+        return this._status === 'VALID';
+    }
+    get invalid() {
+        return this._status === 'INVALID';
+    }
+    get pending() {
+        return this._status === 'PENDING';
+    }
+    get disabled() {
+        return this._status === 'DISABLED';
+    }
+    get enabled() {
+        return this._status !== 'DISABLED';
+    }
+    get dirty() {
+        return this._dirty;
+    }
+    get pristine() {
+        return !this._dirty;
+    }
+    get touched() {
+        return this._touched;
+    }
+    get untouched() {
+        return !this._touched;
+    }
+    get status() {
+        return this._status;
+    }
+    get errors() {
+        return this._errors;
+    }
+    get updateOn() {
+        return this._updateOn;
+    }
     // ─── Value Change Observable ──────────────────────────────────
     /**
      * Subscribe to value changes — returns unsubscribe fn
@@ -251,7 +275,9 @@ export class AbstractControl {
     _updateTouched() {
         this._touched = this._anyControls((c) => c.touched);
     }
-    _anyControls(_condition) { return false; }
+    _anyControls(_condition) {
+        return false;
+    }
     _forEachChild(_fn) { }
     _coerceToArray(v) {
         if (!v)
@@ -266,7 +292,7 @@ function _find(control, path) {
             return null;
         if (c instanceof Object && '_controls' in c) {
             const ctrl = c._controls;
-            return typeof ctrl === 'object' ? ctrl[seg] ?? null : null;
+            return typeof ctrl === 'object' ? (ctrl[seg] ?? null) : null;
         }
         return null;
     }, control);

package/dist/collection/utils/form/core/form-array.js

@@ -13,9 +13,7 @@ export class FormArray extends AbstractControl {
         this._updateValueAndValidity({ onlySelf: true, emitEvent: false });
     }
     get value() {
-        return this._controlsList
-            .filter(c => c.enabled || this.disabled)
-            .map(c => c.value);
+        return this._controlsList.filter(c => c.enabled || this.disabled).map(c => c.value);
     }
     get controls() {
         return this._controlsList;
@@ -60,7 +58,9 @@ export class FormArray extends AbstractControl {
             this._emitValueChange(this.value);
     }
     clear(opts = {}) {
-        this._controlsList.forEach(c => { c.parent = null; });
+        this._controlsList.forEach(c => {
+            c.parent = null;
+        });
         this._controlsList = [];
         this._updateValueAndValidity();
         if (opts.emitEvent !== false)
@@ -113,7 +113,9 @@ export class FormArray extends AbstractControl {
         return this._controlsList.some(condition);
     }
     _setParentForControls() {
-        this._controlsList.forEach(c => { c.parent = this; });
+        this._controlsList.forEach(c => {
+            c.parent = this;
+        });
     }
     _checkAllValuesPresent(value) {
         if (this._controlsList.length !== value.length) {

package/dist/collection/utils/form/core/form-group.js

@@ -64,7 +64,7 @@ export class FormGroup extends AbstractControl {
             this._throwIfControlMissing(name);
             this._controls[name].setValue(value[name], {
                 onlySelf: true,
-                emitEvent: options.emitEvent
+                emitEvent: options.emitEvent,
             });
         });
         this._updateValueAndValidity(options);
@@ -77,7 +77,7 @@ export class FormGroup extends AbstractControl {
             if (this._controls[name]) {
                 this._controls[name].patchValue(value[name], {
                     onlySelf: true,
-                    emitEvent: options.emitEvent
+                    emitEvent: options.emitEvent,
                 });
             }
         });
@@ -139,11 +139,15 @@ export class FormGroup extends AbstractControl {
     }
     _reduceChildren(initValue, fn) {
         let res = initValue;
-        this._forEachChild((control, name) => { res = fn(res, control, name); });
+        this._forEachChild((control, name) => {
+            res = fn(res, control, name);
+        });
         return res;
     }
     _setParentForControls() {
-        this._forEachChild((control) => { control.parent = this; });
+        this._forEachChild(control => {
+            control.parent = this;
+        });
     }
     _checkAllValuesPresent(value) {
         this._forEachChild((_control, name) => {

package/dist/collection/utils/form/frameworks.js

@@ -26,10 +26,14 @@ export function useForm(control) {
 export function useVueForm(control) {
     const vue = require('vue');
     const state = vue.reactive({
-        valueChange: 0
+        valueChange: 0,
+    });
+    control.valueChanges(() => {
+        state.valueChange++;
+    });
+    control.statusChanges(() => {
+        state.valueChange++;
     });
-    control.valueChanges(() => { state.valueChange++; });
-    control.statusChanges(() => { state.valueChange++; });
     return control;
 }
 /**

package/dist/collection/utils/form/validators/validators.js

@@ -25,9 +25,7 @@ export class Validators {
             if (!control.value)
                 return null;
             const length = control.value.length ?? 0;
-            return length < minLength
-                ? { minlength: { requiredLength: minLength, actualLength: length } }
-                : null;
+            return length < minLength ? { minlength: { requiredLength: minLength, actualLength: length } } : null;
         };
     }
     static maxLength(maxLength) {
@@ -35,9 +33,7 @@ export class Validators {
             if (!control.value)
                 return null;
             const length = control.value.length ?? 0;
-            return length > maxLength
-                ? { maxlength: { requiredLength: maxLength, actualLength: length } }
-                : null;
+            return length > maxLength ? { maxlength: { requiredLength: maxLength, actualLength: length } } : null;
         };
     }
     static min(min) {
@@ -72,9 +68,7 @@ export class Validators {
         return (control) => {
             if (!control.value)
                 return null;
-            return regex.test(control.value)
-                ? null
-                : { pattern: { requiredPattern: regexStr, actualValue: control.value } };
+            return regex.test(control.value) ? null : { pattern: { requiredPattern: regexStr, actualValue: control.value } };
         };
     }
     static nullValidator(_control) {

package/dist/collection/utils/qr-code/engine/qr.engine.js

@@ -25,7 +25,7 @@ export class QREngine {
                 for (let c = -1; c <= 7; c++) {
                     const row = y + r, col = x + c;
                     if (row >= 0 && row < this.size && col >= 0 && col < this.size) {
-                        const v = (r === 0 || r === 6 || c === 0 || c === 6 || (r >= 2 && r <= 4 && c >= 2 && c <= 4)) ? 1 : 0;
+                        const v = r === 0 || r === 6 || c === 0 || c === 6 || (r >= 2 && r <= 4 && c >= 2 && c <= 4) ? 1 : 0;
                         this.set(col, row, v);
                     }
                 }
@@ -41,11 +41,11 @@ export class QREngine {
         this.set(8, this.size - 8, 1);
     }
     formatInfo(mask) {
-        const ech = { 'L': 1, 'M': 0, 'Q': 3, 'H': 2 };
+        const ech = { L: 1, M: 0, Q: 3, H: 2 };
         let bits = (ech[this.ec] << 3) | mask;
         let rem = bits;
         for (let i = 0; i < 10; i++)
-            rem = (rem << 1) ^ ((rem >> 9) ? 0x537 : 0);
+            rem = (rem << 1) ^ (rem >> 9 ? 0x537 : 0);
         let data = ((bits << 10) | rem) ^ 0x5412;
         for (let i = 0; i < 15; i++) {
             const v = (data >> i) & 1;

package/dist/collection/utils/qr-code/engine/qr.mask.js

@@ -22,13 +22,13 @@ export function applyMask(matrix, reserved, mask) {
                     cond = (Math.floor(y / 2) + Math.floor(x / 3)) % 2 === 0;
                     break;
                 case 5:
-                    cond = (x * y) % 2 + (x * y) % 3 === 0;
+                    cond = ((x * y) % 2) + ((x * y) % 3) === 0;
                     break;
                 case 6:
-                    cond = ((x * y) % 2 + (x * y) % 3) % 2 === 0;
+                    cond = (((x * y) % 2) + ((x * y) % 3)) % 2 === 0;
                     break;
                 case 7:
-                    cond = ((x * y) % 3 + (x + y) % 2) % 2 === 0;
+                    cond = (((x * y) % 3) + ((x + y) % 2)) % 2 === 0;
                     break;
             }
             if (cond)

package/dist/collection/utils/qr-code/engine/qr.rs.js

@@ -12,7 +12,7 @@ function getPoly(n) {
         }
         p = next;
     }
-    return POLYS[n] = p;
+    return (POLYS[n] = p);
 }
 export function reedSolomon(data, ecCount) {
     const poly = getPoly(ecCount);

package/dist/collection/utils/table.service.js

@@ -7,8 +7,9 @@ export class TableService {
         pageSize: 10,
         sortState: {},
         filterState: {},
+        searchState: {},
         selectedRowKeys: [],
-        expandedRowKeys: []
+        expandedRowKeys: [],
     };
     listeners = [];
     constructor(rowKey = 'key') {
@@ -36,13 +37,14 @@ export class TableService {
         }
         return record[this.rowKey] ?? index ?? 0;
     }
-    getCellValue(record, dataIndex) {
-        if (!dataIndex)
+    getCellValue(record, dataIndex, key) {
+        const prop = dataIndex || key;
+        if (!prop)
             return undefined;
-        if (Array.isArray(dataIndex)) {
-            return dataIndex.reduce((obj, key) => obj?.[key], record);
+        if (Array.isArray(prop)) {
+            return prop.reduce((obj, k) => obj?.[k], record);
         }
-        return record[dataIndex];
+        return record[prop];
     }
     /**
      * Selection Logic
@@ -55,9 +57,7 @@ export class TableService {
             newKeys = isSelected ? [] : [key];
         }
         else {
-            newKeys = isSelected
-                ? this.state.selectedRowKeys.filter(k => k !== key)
-                : [...this.state.selectedRowKeys, key];
+            newKeys = isSelected ? this.state.selectedRowKeys.filter(k => k !== key) : [...this.state.selectedRowKeys, key];
         }
         this.setState({ selectedRowKeys: newKeys });
         return newKeys;
@@ -102,6 +102,28 @@ export class TableService {
                 }
             }
         });
+        // Column Search
+        if (this.state.searchState) {
+            Object.keys(this.state.searchState).forEach(key => {
+                const searchValue = this.state.searchState[key];
+                if (searchValue !== undefined && searchValue !== null && searchValue !== '') {
+                    const column = this.state.columns.find(col => (col.key || col.dataIndex) === key);
+                    if (column) {
+                        if (column.onFilter) {
+                            data = data.filter(record => column.onFilter?.(searchValue, record));
+                        }
+                        else {
+                            data = data.filter(record => {
+                                const val = this.getCellValue(record, column.dataIndex, column.key);
+                                if (val === undefined || val === null)
+                                    return false;
+                                return String(val).toLowerCase().includes(String(searchValue).toLowerCase());
+                            });
+                        }
+                    }
+                }
+            });
+        }
         // Sort
         const { columnKey, order } = this.state.sortState;
         if (columnKey && order) {
@@ -109,8 +131,8 @@ export class TableService {
             if (column?.sorter) {
                 const sortFn = typeof column.sorter === 'function' ? column.sorter : column.sorter.compare;
                 const defaultSort = (a, b) => {
-                    const aV = this.getCellValue(a, column.dataIndex);
-                    const bV = this.getCellValue(b, column.dataIndex);
+                    const aV = this.getCellValue(a, column.dataIndex, column.key);
+                    const bV = this.getCellValue(b, column.dataIndex, column.key);
                     return aV < bV ? -1 : aV > bV ? 1 : 0;
                 };
                 const finalSort = sortFn || defaultSort;
@@ -124,6 +146,12 @@ export class TableService {
     }
     getPaginatedData(processedData) {
         const start = (this.state.currentPage - 1) * this.state.pageSize;
+        // Server-side pagination: if start index is beyond the data length but we have data,
+        // the dataSource is already scoped to only the current page's records.
+        // Return the data as-is to avoid slicing to an empty array.
+        if (processedData.length > 0 && start >= processedData.length) {
+            return processedData;
+        }
         return processedData.slice(start, start + this.state.pageSize);
     }
     /**
@@ -132,9 +160,7 @@ export class TableService {
     toggleExpand(record) {
         const key = this.getRowKey(record);
         const isExpanded = this.state.expandedRowKeys.includes(key);
-        const newKeys = isExpanded
-            ? this.state.expandedRowKeys.filter(k => k !== key)
-            : [...this.state.expandedRowKeys, key];
+        const newKeys = isExpanded ? this.state.expandedRowKeys.filter(k => k !== key) : [...this.state.expandedRowKeys, key];
         this.setState({ expandedRowKeys: newKeys });
         return newKeys;
     }