@universe-platform/ui 0.1.0-beta.10 → 0.1.0-beta.12

package/dist/index.js

@@ -68,6 +68,7 @@ __export(src_exports, {
   DatePickerCell: () => DatePickerCell,
   LinkPickerCell: () => LinkPickerCell,
   PASTEL_PALETTES: () => PASTEL_PALETTES,
+  RelationFilterPopover: () => RelationFilterPopover,
   RelationPickerCell: () => RelationPickerCell,
   TEXT_REPRESENTABLE_TYPES: () => TEXT_REPRESENTABLE_TYPES,
   TableBlock: () => TableBlock,
@@ -224,7 +225,7 @@ var COLUMN_DEFAULT_INPUT_CONFIG = {
   NUMBER: { inputType: "number", placeholder: "\u05D4\u05D6\u05DF \u05DE\u05E1\u05E4\u05E8" },
   BOOLEAN: { inputType: "select" },
   DATE: { inputType: "date" },
-  RELATION: { inputType: "text", placeholder: "\u05D4\u05D6\u05DF \u05E2\u05E8\u05DA \u05EA\u05E6\u05D5\u05D2\u05D4" },
+  RELATION: { inputType: "select", placeholder: "\u05D1\u05D7\u05E8 \u05E8\u05E9\u05D5\u05DE\u05D4 \u05DB\u05D1\u05E8\u05D9\u05E8\u05EA \u05DE\u05D7\u05D3\u05DC" },
   GOOGLE_DRIVE_FILE: { inputType: "text" },
   CURRENCY: { inputType: "number", placeholder: "\u05D4\u05D6\u05DF \u05DE\u05E1\u05E4\u05E8" },
   TIME: { inputType: "time" },
@@ -235,7 +236,7 @@ var COLUMN_DEFAULT_INPUT_CONFIG = {
 };
 
 // src/components/TableBlock/TableBlockClient.tsx
-var import_react12 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/hooks/useToast.ts
 var import_react2 = require("react");
@@ -1525,7 +1526,8 @@ function LinkPickerCell({ value, onChange, readOnly = false }) {
 }
 
 // src/components/TableBlock/fields/RelationPickerCell.tsx
-var import_react7 = require("react");
+var import_react7 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function isRawObjectId(str) {
@@ -1584,6 +1586,30 @@ function resolveRelationLabel(opt, column) {
   }
   return "";
 }
+var ITEM_HEIGHT = 35;
+var CONTAINER_HEIGHT = 200;
+var OVERSCAN = 5;
+var BATCH_SIZE = 50;
+var RelationPickerRow = import_react7.default.memo(function RelationPickerRow2({
+  id,
+  label,
+  isSelected,
+  onSelect,
+  height
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      onClick: () => onSelect(id),
+      style: { height: `${height}px` },
+      className: `flex items-center justify-between px-2.5 rounded cursor-pointer text-xs transition-colors ${isSelected ? "bg-blue-50 text-blue-900 font-medium" : "hover:bg-slate-50 text-slate-700"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate flex-1", children: label }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Check, { className: "w-3.5 h-3.5 text-blue-600 shrink-0 mr-1" })
+      ]
+    }
+  );
+});
 function RelationPickerCell({
   value,
   onChange,
@@ -1592,42 +1618,147 @@ function RelationPickerCell({
   rowId,
   readOnly = false
 }) {
-  var _a;
+  var _a, _b, _c;
   const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
   const [searchQuery, setSearchQuery] = (0, import_react7.useState)("");
+  const [isRemoteSearching, setIsRemoteSearching] = (0, import_react7.useState)(false);
+  const [isLoadingMore, setIsLoadingMore] = (0, import_react7.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react7.useState)(true);
+  const [items, setItems] = (0, import_react7.useState)([]);
+  const [skip, setSkip] = (0, import_react7.useState)(0);
+  const [scrollTop, setScrollTop] = (0, import_react7.useState)(0);
   const containerRef = (0, import_react7.useRef)(null);
+  const dropdownRef = (0, import_react7.useRef)(null);
   const searchInputRef = (0, import_react7.useRef)(null);
+  const listContainerRef = (0, import_react7.useRef)(null);
+  const sentinelRef = (0, import_react7.useRef)(null);
+  const [dropdownCoords, setDropdownCoords] = (0, import_react7.useState)(null);
+  const updateDropdownCoords = (0, import_react7.useCallback)(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const dropdownHeight = 280;
+    const dropdownWidth = Math.max(220, Math.min(320, rect.width || 220));
+    let right = window.innerWidth - rect.right;
+    if (right + dropdownWidth > window.innerWidth - 10) {
+      right = window.innerWidth - dropdownWidth - 10;
+    }
+    if (right < 10) {
+      right = 10;
+    }
+    const spaceBelow = window.innerHeight - rect.bottom;
+    let top = rect.bottom + 4;
+    if (spaceBelow < dropdownHeight && rect.top > dropdownHeight) {
+      top = Math.max(10, rect.top - dropdownHeight - 4);
+    } else {
+      top = Math.min(window.innerHeight - dropdownHeight - 10, top);
+    }
+    setDropdownCoords({ top, right, width: dropdownWidth });
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    if (!isOpen) return;
+    updateDropdownCoords();
+    const handleScrollOrResize = () => updateDropdownCoords();
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [isOpen, updateDropdownCoords]);
+  const stableLabelCacheRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
+  const skipRef = (0, import_react7.useRef)(0);
+  const isLoadingMoreRef = (0, import_react7.useRef)(false);
   const allowMultiple = Boolean((_a = column.config) == null ? void 0 : _a.allowMultiple);
+  const referencedTableId = (_b = column.config) == null ? void 0 : _b.referencedTableId;
+  const displayField = (_c = column.config) == null ? void 0 : _c.displayField;
   const selectedIds = (0, import_react7.useMemo)(() => normalizeRelationValue(value), [value]);
   const isStandalone = !context || context.relationOptions === void 0;
   const optionsLoaded = isStandalone || context.relationOptions[column.name] !== void 0;
-  const rawOptions = (0, import_react7.useMemo)(() => {
+  const baseOptions = (0, import_react7.useMemo)(() => {
     var _a2;
     return ((_a2 = context == null ? void 0 : context.relationOptions) == null ? void 0 : _a2[column.name]) || [];
   }, [context == null ? void 0 : context.relationOptions, column.name]);
   const processedOptions = (0, import_react7.useMemo)(() => {
-    return rawOptions.map((opt) => {
-      const label = resolveRelationLabel(opt, column);
-      return {
-        id: String(opt.id),
-        _displayLabel: label
-      };
-    }).filter((opt) => opt._displayLabel && opt._displayLabel.trim() !== "" && !isRawObjectId(opt._displayLabel));
-  }, [rawOptions, column]);
+    return items.map((opt) => ({
+      id: String(opt.id),
+      _displayLabel: resolveRelationLabel(opt, column) || opt.label || ""
+    })).filter((opt) => opt._displayLabel && opt._displayLabel.trim() !== "" && !isRawObjectId(opt._displayLabel));
+  }, [items, column]);
   const getDisplayForId = (0, import_react7.useCallback)((id) => {
-    const found = processedOptions.find((o) => String(o.id) === String(id));
-    if (found && found._displayLabel && !isRawObjectId(found._displayLabel)) {
-      return found._displayLabel;
+    var _a2, _b2, _c2;
+    if (!id) return "-";
+    const strId = String(id).trim();
+    if (!strId) return "-";
+    if (stableLabelCacheRef.current.has(strId)) {
+      const cached = stableLabelCacheRef.current.get(strId);
+      if (cached && cached !== "-" && !isRawObjectId(cached)) {
+        return cached;
+      }
+    }
+    const dictOpt = (_c2 = (_b2 = (_a2 = context == null ? void 0 : context.relationDictionaryRef) == null ? void 0 : _a2.current) == null ? void 0 : _b2[column.name]) == null ? void 0 : _c2.get(strId);
+    if (dictOpt) {
+      const lbl = resolveRelationLabel(dictOpt, column) || dictOpt.label || dictOpt.name;
+      if (lbl && !isRawObjectId(String(lbl))) {
+        stableLabelCacheRef.current.set(strId, String(lbl));
+        return String(lbl);
+      }
+    }
+    const foundInItems = items.find((o) => String(o.id) === strId);
+    if (foundInItems) {
+      const lbl = resolveRelationLabel(foundInItems, column) || foundInItems.label || foundInItems.name;
+      if (lbl && !isRawObjectId(String(lbl))) {
+        stableLabelCacheRef.current.set(strId, String(lbl));
+        return String(lbl);
+      }
+    }
+    const foundInBase = (baseOptions || []).find((o) => String(o.id) === strId);
+    if (foundInBase) {
+      const lbl = resolveRelationLabel(foundInBase, column) || foundInBase.label || foundInBase.name;
+      if (lbl && !isRawObjectId(String(lbl))) {
+        stableLabelCacheRef.current.set(strId, String(lbl));
+        return String(lbl);
+      }
     }
     return "-";
-  }, [processedOptions]);
+  }, [items, baseOptions, column, context]);
   const handleOpen = (e) => {
     if (readOnly) return;
     e == null ? void 0 : e.stopPropagation();
-    setIsOpen((prev) => !prev);
+    const nextOpen = !isOpen;
+    if (nextOpen) {
+      updateDropdownCoords();
+    }
+    setIsOpen(nextOpen);
+    if (!nextOpen) return;
     setSearchQuery("");
-    if (context == null ? void 0 : context.refetchRelation) {
-      context.refetchRelation(column.name);
+    setScrollTop(0);
+    setSkip(0);
+    skipRef.current = 0;
+    setHasMore(true);
+    const fetcher = (context == null ? void 0 : context.executeAction) ? (p) => context.executeAction("FETCH_RELATION", p) : (context == null ? void 0 : context.refetchRelation) ? (p) => context.refetchRelation(column.name, p) : null;
+    if (fetcher && referencedTableId) {
+      setIsLoadingMore(true);
+      isLoadingMoreRef.current = true;
+      fetcher({
+        referencedTableId,
+        displayField,
+        take: BATCH_SIZE,
+        limit: BATCH_SIZE,
+        skip: 0
+      }).then((res) => {
+        const newData = Array.isArray(res) ? res : (res == null ? void 0 : res.data) && Array.isArray(res.data) ? res.data : [];
+        setItems(newData);
+        setSkip(BATCH_SIZE);
+        skipRef.current = BATCH_SIZE;
+        if (newData.length < BATCH_SIZE) {
+          setHasMore(false);
+        }
+      }).catch((err) => {
+        console.warn("[RelationPickerCell] Initial fetch failed:", err);
+      }).finally(() => {
+        setIsLoadingMore(false);
+        isLoadingMoreRef.current = false;
+      });
     }
   };
   (0, import_react7.useEffect)(() => {
@@ -1638,7 +1769,105 @@ function RelationPickerCell({
       }, 50);
     }
   }, [isOpen]);
-  const handleSelectOption = (optId) => {
+  (0, import_react7.useEffect)(() => {
+    if (!isOpen) return;
+    const query = searchQuery.trim();
+    const fetcher = (context == null ? void 0 : context.executeAction) ? (p) => context.executeAction("FETCH_RELATION", p) : (context == null ? void 0 : context.refetchRelation) ? (p) => context.refetchRelation(column.name, p) : null;
+    if (!fetcher || !referencedTableId) return;
+    setSkip(0);
+    skipRef.current = 0;
+    setHasMore(true);
+    setScrollTop(0);
+    if (listContainerRef.current) {
+      listContainerRef.current.scrollTop = 0;
+    }
+    setIsRemoteSearching(true);
+    const timer = setTimeout(() => {
+      fetcher({
+        referencedTableId,
+        displayField,
+        search: query,
+        take: BATCH_SIZE,
+        limit: BATCH_SIZE,
+        skip: 0
+      }).then((res) => {
+        const newData = Array.isArray(res) ? res : (res == null ? void 0 : res.data) && Array.isArray(res.data) ? res.data : [];
+        setItems(newData);
+        setSkip(BATCH_SIZE);
+        skipRef.current = BATCH_SIZE;
+        if (newData.length < BATCH_SIZE) {
+          setHasMore(false);
+        }
+      }).catch((err) => {
+        console.warn("[RelationPickerCell] Remote search failed:", err);
+      }).finally(() => {
+        setIsRemoteSearching(false);
+      });
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [searchQuery, isOpen, referencedTableId, displayField, context, column.name]);
+  const handleLoadMore = (0, import_react7.useCallback)(async () => {
+    if (isLoadingMoreRef.current || !hasMore || !referencedTableId) return;
+    const fetcher = (context == null ? void 0 : context.executeAction) ? (p) => context.executeAction("FETCH_RELATION", p) : (context == null ? void 0 : context.refetchRelation) ? (p) => context.refetchRelation(column.name, p) : null;
+    if (!fetcher) return;
+    isLoadingMoreRef.current = true;
+    setIsLoadingMore(true);
+    const currentQuery = searchQuery.trim();
+    const currentSkip = skipRef.current;
+    try {
+      const res = await fetcher({
+        referencedTableId,
+        displayField,
+        search: currentQuery,
+        take: BATCH_SIZE,
+        limit: BATCH_SIZE,
+        skip: currentSkip
+      });
+      const newData = Array.isArray(res) ? res : (res == null ? void 0 : res.data) && Array.isArray(res.data) ? res.data : [];
+      if (newData.length < BATCH_SIZE) {
+        setHasMore(false);
+      }
+      if (newData.length > 0) {
+        setItems((prev) => {
+          const seen = new Set(prev.map((i) => String(i.id)));
+          const unique = newData.filter((i) => !seen.has(String(i.id)));
+          return [...prev, ...unique];
+        });
+        setSkip((prev) => prev + BATCH_SIZE);
+        skipRef.current += BATCH_SIZE;
+      }
+    } catch (err) {
+      console.warn("[RelationPickerCell] Load more failed:", err);
+    } finally {
+      isLoadingMoreRef.current = false;
+      setIsLoadingMore(false);
+    }
+  }, [hasMore, referencedTableId, searchQuery, context, column.name, displayField]);
+  (0, import_react7.useEffect)(() => {
+    if (!isOpen || !hasMore) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        var _a2;
+        if (((_a2 = entries[0]) == null ? void 0 : _a2.isIntersecting) && !isLoadingMoreRef.current) {
+          handleLoadMore();
+        }
+      },
+      { root: listContainerRef.current, threshold: 0.1 }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [isOpen, hasMore, handleLoadMore]);
+  const handleListScroll = (e) => {
+    const currentScrollTop = e.currentTarget.scrollTop;
+    setScrollTop(currentScrollTop);
+    const { clientHeight, scrollHeight } = e.currentTarget;
+    if (scrollHeight - (currentScrollTop + clientHeight) < 60 && hasMore && !isLoadingMoreRef.current) {
+      handleLoadMore();
+    }
+  };
+  const handleSelectOption = (0, import_react7.useCallback)((optId) => {
     if (!allowMultiple) {
       onChange([optId]);
       setIsOpen(false);
@@ -1649,7 +1878,7 @@ function RelationPickerCell({
         onChange([...selectedIds, optId]);
       }
     }
-  };
+  }, [allowMultiple, onChange, selectedIds]);
   const handleRemove = (idToRemove) => {
     onChange(selectedIds.filter((id) => id !== idToRemove));
   };
@@ -1660,7 +1889,8 @@ function RelationPickerCell({
   (0, import_react7.useEffect)(() => {
     if (!isOpen) return;
     function handleClickOutside(event) {
-      if (containerRef.current && !containerRef.current.contains(event.target)) {
+      const target = event.target;
+      if (containerRef.current && !containerRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
         setIsOpen(false);
       }
     }
@@ -1676,13 +1906,19 @@ function RelationPickerCell({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [isOpen]);
-  const filteredOptions = (0, import_react7.useMemo)(() => {
+  const displayedOptions = (0, import_react7.useMemo)(() => {
     const query = searchQuery.trim().toLowerCase();
     if (!query) return processedOptions;
     return processedOptions.filter((opt) => {
       return (opt._displayLabel || "").toLowerCase().includes(query);
     });
   }, [processedOptions, searchQuery]);
+  const totalItems = displayedOptions.length;
+  const totalHeight = totalItems * ITEM_HEIGHT;
+  const startIndex = Math.max(0, Math.floor(scrollTop / ITEM_HEIGHT) - OVERSCAN);
+  const endIndex = Math.min(totalItems, Math.ceil((scrollTop + CONTAINER_HEIGHT) / ITEM_HEIGHT) + OVERSCAN);
+  const visibleOptions = displayedOptions.slice(startIndex, endIndex);
+  const topPadding = startIndex * ITEM_HEIGHT;
   if (!optionsLoaded && selectedIds.length > 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-2 py-1 flex items-center h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "inline-block w-16 h-4 bg-slate-100 animate-pulse rounded" }) });
   }
@@ -1804,51 +2040,101 @@ function RelationPickerCell({
             )
           }
         ),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-          "div",
-          {
-            id: `relation-dropdown-${column.name}-${rowId || "cell"}`,
-            dir: "rtl",
-            className: "absolute top-full right-0 mt-1 z-[100] bg-white rounded-md shadow-lg border border-slate-200 p-1 min-w-[200px] w-full max-w-[300px] animate-in fade-in duration-100 flex flex-col",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative mb-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Search, { className: "w-3.5 h-3.5 text-slate-400 absolute right-2 top-2 pointer-events-none" }),
+        isOpen && dropdownCoords && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "div",
+            {
+              ref: dropdownRef,
+              id: `relation-dropdown-${column.name}-${rowId || "cell"}`,
+              dir: "rtl",
+              style: {
+                position: "fixed",
+                top: `${dropdownCoords.top}px`,
+                right: `${dropdownCoords.right}px`,
+                width: `${dropdownCoords.width}px`,
+                zIndex: 99999
+              },
+              className: "bg-white rounded-md shadow-2xl border border-slate-200 p-1 animate-in fade-in duration-100 flex flex-col",
+              onClick: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Search, { className: "w-3.5 h-3.5 text-slate-400 absolute right-2 top-2 pointer-events-none" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "input",
+                    {
+                      ref: searchInputRef,
+                      type: "text",
+                      placeholder: "\u05D7\u05E4\u05E9...",
+                      value: searchQuery,
+                      onChange: (e) => setSearchQuery(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Escape") {
+                          e.stopPropagation();
+                          setIsOpen(false);
+                        }
+                      },
+                      className: "w-full h-7 pr-7 pl-7 bg-slate-50 border border-slate-200 rounded text-xs text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                    }
+                  ),
+                  isRemoteSearching && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Loader2, { className: "w-3.5 h-3.5 text-blue-500 animate-spin absolute left-2 top-2 pointer-events-none" })
+                ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  "input",
+                  "div",
                   {
-                    ref: searchInputRef,
-                    type: "text",
-                    placeholder: "\u05D7\u05E4\u05E9...",
-                    value: searchQuery,
-                    onChange: (e) => setSearchQuery(e.target.value),
-                    onKeyDown: (e) => {
-                      if (e.key === "Escape") {
-                        e.stopPropagation();
-                        setIsOpen(false);
-                      }
-                    },
-                    className: "w-full h-7 pr-7 pl-2 bg-slate-50 border border-slate-200 rounded text-xs text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                    ref: listContainerRef,
+                    onScroll: handleListScroll,
+                    style: { maxHeight: `${CONTAINER_HEIGHT}px` },
+                    className: "overflow-y-auto relative",
+                    children: displayedOptions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: `${totalHeight}px`, position: "relative", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            transform: `translateY(${topPadding}px)`
+                          },
+                          children: visibleOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                            RelationPickerRow,
+                            {
+                              id: opt.id,
+                              label: opt._displayLabel,
+                              isSelected: selectedIds.includes(opt.id),
+                              onSelect: handleSelectOption,
+                              height: ITEM_HEIGHT
+                            },
+                            opt.id
+                          ))
+                        }
+                      ) }),
+                      hasMore && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: sentinelRef, className: "pt-1 pb-0.5 px-2 text-center", children: isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-center gap-1.5 text-xs text-slate-400 py-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Loader2, { className: "w-3 h-3 text-blue-500 animate-spin shrink-0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u05D8\u05D5\u05E2\u05DF \u05E2\u05D5\u05D3 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA..." })
+                      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleLoadMore();
+                          },
+                          className: "text-[11px] text-blue-600 hover:text-blue-700 hover:underline py-1 px-2 font-medium",
+                          children: "\u05D8\u05E2\u05DF \u05E2\u05D5\u05D3 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA..."
+                        }
+                      ) })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-2.5 px-2 text-center text-xs text-slate-400 select-none", children: isRemoteSearching ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-center gap-1.5 py-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Loader2, { className: "w-3 h-3 text-blue-500 animate-spin shrink-0" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "\u05DE\u05D7\u05E4\u05E9 \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA..." })
+                    ] }) : items.length === 0 ? "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D6\u05DE\u05D9\u05E0\u05D5\u05EA" : "\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA" })
                   }
                 )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "overflow-y-auto max-h-[180px] space-y-0.5", children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
-                const isSelected = selectedIds.includes(opt.id);
-                return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-                  "div",
-                  {
-                    onClick: () => handleSelectOption(opt.id),
-                    className: `flex items-center justify-between px-2.5 py-1.5 rounded cursor-pointer text-xs transition-colors ${isSelected ? "bg-blue-50 text-blue-900 font-medium" : "hover:bg-slate-50 text-slate-700"}`,
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate flex-1", children: opt._displayLabel }),
-                      isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Check, { className: "w-3.5 h-3.5 text-blue-600 shrink-0 mr-1" })
-                    ]
-                  },
-                  opt.id
-                );
-              }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-2.5 px-2 text-center text-xs text-slate-400 select-none", children: processedOptions.length === 0 ? "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D6\u05DE\u05D9\u05E0\u05D5\u05EA" : "\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA" }) })
-            ]
-          }
+              ]
+            }
+          ),
+          document.body
         )
       ]
     }
@@ -2269,7 +2555,7 @@ var FORM_INPUTS = {
 };
 
 // src/components/TableBlock/fields/SubTableViewer.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/utils/phone.ts
 function sanitizePhoneNumber(phone) {
@@ -2427,6 +2713,7 @@ function useColumnReorder({
 }
 
 // src/components/TableBlock/columnTitleUtils.tsx
+var import_react11 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var canvas = null;
 function measureTextWidth(text, font = '600 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif') {
@@ -2467,10 +2754,10 @@ function splitHeaderTitle(name) {
 }
 function calculateMinColumnWidth(name, isSubTable = false, colType) {
   const font = isSubTable ? '600 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' : '600 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-  const chromeWidth = isSubTable ? 44 : 52;
-  let baseMin = isSubTable ? 50 : 60;
+  const chromeWidth = isSubTable ? 24 : 26;
+  let baseMin = isSubTable ? 30 : 36;
   if ((colType == null ? void 0 : colType.toUpperCase()) === "GOOGLE_CONTACT") {
-    baseMin = isSubTable ? 110 : 120;
+    baseMin = isSubTable ? 100 : 110;
   }
   if (!name) return baseMin;
   const { isSingleWord, line1, line2 } = splitHeaderTitle(name);
@@ -2484,12 +2771,16 @@ function calculateMinColumnWidth(name, isSubTable = false, colType) {
   return Math.max(baseMin, Math.ceil(maxLine + chromeWidth));
 }
 function ColumnHeaderTitle({ name, width, isSubTable = false }) {
+  const [isMounted, setIsMounted] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
+    setIsMounted(true);
+  }, []);
   const { isSingleWord, line1, line2 } = splitHeaderTitle(name);
-  if (isSingleWord || !line2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap select-none overflow-hidden text-right flex-1", title: name, children: line1 });
+  if (!isMounted || isSingleWord || !line2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap select-none overflow-hidden text-right flex-1", title: name, children: name });
   }
   const font = isSubTable ? '600 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' : '600 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-  const chromeWidth = isSubTable ? 44 : 52;
+  const chromeWidth = isSubTable ? 24 : 26;
   const fullTitleWidth = measureTextWidth(name, font) + chromeWidth;
   if (width !== void 0 && width >= fullTitleWidth) {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "whitespace-nowrap select-none overflow-hidden text-right flex-1", title: name, children: name });
@@ -2623,18 +2914,18 @@ function SubTableCell({
   const isContact = colType === "GOOGLE_CONTACT";
   const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
   const serverValue = (_b = record.data[column.name]) != null ? _b : colType === "BOOLEAN" ? false : "";
-  const [draftValue, setDraftValue] = (0, import_react11.useState)(serverValue);
-  const [isDirty, setIsDirty] = (0, import_react11.useState)(false);
-  const [validationError, setValidationError] = (0, import_react11.useState)(null);
-  const cellRef = (0, import_react11.useRef)(null);
-  const draftRef = (0, import_react11.useRef)(draftValue);
-  const isDirtyRef = (0, import_react11.useRef)(isDirty);
-  const serverValueRef = (0, import_react11.useRef)(serverValue);
-  const recordIdRef = (0, import_react11.useRef)(record.id);
-  const columnRef = (0, import_react11.useRef)(column);
-  const onCommitRef = (0, import_react11.useRef)(onCommit);
-  const isCommittingRef = (0, import_react11.useRef)(false);
-  const lastFailedValRef = (0, import_react11.useRef)(void 0);
+  const [draftValue, setDraftValue] = (0, import_react12.useState)(serverValue);
+  const [isDirty, setIsDirty] = (0, import_react12.useState)(false);
+  const [validationError, setValidationError] = (0, import_react12.useState)(null);
+  const cellRef = (0, import_react12.useRef)(null);
+  const draftRef = (0, import_react12.useRef)(draftValue);
+  const isDirtyRef = (0, import_react12.useRef)(isDirty);
+  const serverValueRef = (0, import_react12.useRef)(serverValue);
+  const recordIdRef = (0, import_react12.useRef)(record.id);
+  const columnRef = (0, import_react12.useRef)(column);
+  const onCommitRef = (0, import_react12.useRef)(onCommit);
+  const isCommittingRef = (0, import_react12.useRef)(false);
+  const lastFailedValRef = (0, import_react12.useRef)(void 0);
   const { addToast } = useToast();
   draftRef.current = draftValue;
   isDirtyRef.current = isDirty;
@@ -2642,7 +2933,7 @@ function SubTableCell({
   recordIdRef.current = record.id;
   columnRef.current = column;
   onCommitRef.current = onCommit;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isDirtyRef.current) {
       setDraftValue(serverValue);
       draftRef.current = serverValue;
@@ -2650,7 +2941,7 @@ function SubTableCell({
       lastFailedValRef.current = void 0;
     }
   }, [serverValue]);
-  const commit = (0, import_react11.useCallback)(async (valToCommit) => {
+  const commit = (0, import_react12.useCallback)(async (valToCommit) => {
     if (isCommittingRef.current) return false;
     if (!isDirtyRef.current) return true;
     if (valToCommit === serverValueRef.current) {
@@ -2691,7 +2982,7 @@ function SubTableCell({
       isCommittingRef.current = false;
     }
   }, [addToast]);
-  const discard = (0, import_react11.useCallback)(() => {
+  const discard = (0, import_react12.useCallback)(() => {
     setDraftValue(serverValueRef.current);
     draftRef.current = serverValueRef.current;
     setIsDirty(false);
@@ -2699,7 +2990,7 @@ function SubTableCell({
     setValidationError(null);
     lastFailedValRef.current = void 0;
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return () => {
       if (isDirtyRef.current && !isCommittingRef.current) {
         const val = draftRef.current;
@@ -2801,7 +3092,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
   var _a, _b, _c, _d, _e, _f;
   const { addToast } = useToast();
   const entries = Array.isArray(value) ? value : [];
-  const [linkedRecords, setLinkedRecords] = (0, import_react11.useState)(() => {
+  const [linkedRecords, setLinkedRecords] = (0, import_react12.useState)(() => {
     const initial = [];
     for (const entry of entries) {
       if (entry.recordId && entry._resolvedData) {
@@ -2810,25 +3101,25 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     }
     return initial;
   });
-  const [targetSchema, setTargetSchema] = (0, import_react11.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
-  const [isSearchOpen, setIsSearchOpen] = (0, import_react11.useState)(false);
-  const [searchQuery, setSearchQuery] = (0, import_react11.useState)("");
-  const [searchResults, setSearchResults] = (0, import_react11.useState)([]);
-  const [isSearching, setIsSearching] = (0, import_react11.useState)(false);
-  const [isCreating, setIsCreating] = (0, import_react11.useState)(false);
-  const [newRecordData, setNewRecordData] = (0, import_react11.useState)({});
-  const [conflictModalState, setConflictModalState] = (0, import_react11.useState)({
+  const [targetSchema, setTargetSchema] = (0, import_react12.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
+  const [isSearchOpen, setIsSearchOpen] = (0, import_react12.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react12.useState)("");
+  const [searchResults, setSearchResults] = (0, import_react12.useState)([]);
+  const [isSearching, setIsSearching] = (0, import_react12.useState)(false);
+  const [isCreating, setIsCreating] = (0, import_react12.useState)(false);
+  const [newRecordData, setNewRecordData] = (0, import_react12.useState)({});
+  const [conflictModalState, setConflictModalState] = (0, import_react12.useState)({
     isOpen: false,
     fieldName: "",
     matchingRecords: []
   });
-  const searchRef = (0, import_react11.useRef)(null);
-  const searchTimerRef = (0, import_react11.useRef)(null);
+  const searchRef = (0, import_react12.useRef)(null);
+  const searchTimerRef = (0, import_react12.useRef)(null);
   const executeAction = context == null ? void 0 : context.executeAction;
   const referencedTableId = ((_a = column.config) == null ? void 0 : _a.referencedTableId) || column.referencedTableId;
-  const fetchedIdsRef = (0, import_react11.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react11.useEffect)(() => {
+  const fetchedIdsRef = (0, import_react12.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react12.useEffect)(() => {
     if (entries.length > 0) {
       setLinkedRecords((prev) => {
         const existingIds = new Set(prev.map((r) => r.id));
@@ -2843,7 +3134,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       });
     }
   }, [entries]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!referencedTableId || !executeAction) {
       setIsLoading(false);
       return;
@@ -2870,7 +3161,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       recordIdsToFetch.forEach((id) => fetchedIdsRef.current.delete(id));
     }).finally(() => setIsLoading(false));
   }, [referencedTableId, executeAction, entries, targetSchema]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const handleClick = (e) => {
       if (searchRef.current && !searchRef.current.contains(e.target)) {
         setIsSearchOpen(false);
@@ -2879,7 +3170,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     if (isSearchOpen) document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [isSearchOpen]);
-  const handleSearch = (0, import_react11.useCallback)((query) => {
+  const handleSearch = (0, import_react12.useCallback)((query) => {
     setSearchQuery(query);
     if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
     if (!query.trim()) {
@@ -2905,16 +3196,16 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       }
     }, 300);
   }, [executeAction, referencedTableId, entries]);
-  const [localColumnOrder, setLocalColumnOrder] = (0, import_react11.useState)(null);
-  (0, import_react11.useEffect)(() => {
+  const [localColumnOrder, setLocalColumnOrder] = (0, import_react12.useState)(null);
+  (0, import_react12.useEffect)(() => {
     setLocalColumnOrder(null);
   }, [column.name, (_b = column.config) == null ? void 0 : _b.subTableColumnOrder]);
-  const rawTargetColumns = (0, import_react11.useMemo)(() => {
+  const rawTargetColumns = (0, import_react12.useMemo)(() => {
     return ((targetSchema == null ? void 0 : targetSchema.columns) || []).filter(
       (c) => c.name !== "_id" && c.type !== "SUB_TABLE"
     );
   }, [targetSchema == null ? void 0 : targetSchema.columns]);
-  const targetColumns = (0, import_react11.useMemo)(() => {
+  const targetColumns = (0, import_react12.useMemo)(() => {
     var _a2;
     const activeOrder = localColumnOrder || ((_a2 = column.config) == null ? void 0 : _a2.subTableColumnOrder);
     if (!activeOrder || !Array.isArray(activeOrder) || activeOrder.length === 0) {
@@ -2965,8 +3256,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       return calculateMinColumnWidth(colName, true, col == null ? void 0 : col.type);
     }
   });
-  const [relationOptions, setRelationOptions] = (0, import_react11.useState)({});
-  (0, import_react11.useEffect)(() => {
+  const [relationOptions, setRelationOptions] = (0, import_react12.useState)({});
+  (0, import_react12.useEffect)(() => {
     if (!executeAction || !(targetSchema == null ? void 0 : targetSchema.columns) || targetSchema.columns.length === 0) return;
     const relationCols = targetSchema.columns.filter((c) => {
       var _a2, _b2;
@@ -2977,7 +3268,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       try {
         const options = await executeAction("FETCH_RELATION", {
           referencedTableId: (_a2 = col.config) == null ? void 0 : _a2.referencedTableId,
-          displayField: (_b2 = col.config) == null ? void 0 : _b2.displayField
+          displayField: (_b2 = col.config) == null ? void 0 : _b2.displayField,
+          limit: 1e3
         });
         if (options && Array.isArray(options)) {
           setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
@@ -2987,18 +3279,35 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
       }
     });
   }, [executeAction, targetColumns]);
-  const refetchRelation = (0, import_react11.useCallback)(async (colName) => {
-    var _a2, _b2, _c2;
+  const refetchRelation = (0, import_react12.useCallback)(async (colName, params) => {
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const col = targetColumns.find((c) => c.name === colName);
-    if (!col || ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) !== "RELATION" || !((_b2 = col.config) == null ? void 0 : _b2.referencedTableId) || !executeAction) return;
+    if (!col || ((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) !== "RELATION" || !((_b2 = col.config) == null ? void 0 : _b2.referencedTableId) || !executeAction) return [];
     try {
-      const options = await executeAction("FETCH_RELATION", { referencedTableId: col.config.referencedTableId, displayField: (_c2 = col.config) == null ? void 0 : _c2.displayField });
+      const options = await executeAction("FETCH_RELATION", {
+        referencedTableId: col.config.referencedTableId,
+        displayField: (_c2 = col.config) == null ? void 0 : _c2.displayField,
+        limit: (_d2 = params == null ? void 0 : params.limit) != null ? _d2 : 1e3,
+        skip: (_e2 = params == null ? void 0 : params.skip) != null ? _e2 : 0,
+        search: (_f2 = params == null ? void 0 : params.search) != null ? _f2 : ""
+      });
       if (options && Array.isArray(options)) {
-        setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
+        if (params == null ? void 0 : params.append) {
+          setRelationOptions((prev) => {
+            const existing = prev[col.name] || [];
+            const existingIds = new Set(existing.map((o) => String(o.id)));
+            const uniqueNew = options.filter((o) => !existingIds.has(String(o.id)));
+            return __spreadProps(__spreadValues({}, prev), { [col.name]: [...existing, ...uniqueNew] });
+          });
+        } else if (!(params == null ? void 0 : params.search)) {
+          setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [col.name]: options }));
+        }
+        return options;
       }
     } catch (err) {
       console.warn(`[SubTableViewer] Could not refetch relation options for column ${col.name}:`, err);
     }
+    return [];
   }, [targetColumns, executeAction]);
   const updateParentLinkage = async (updated) => {
     const isNewRow = rowId.startsWith("temp_");
@@ -3131,8 +3440,8 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     );
     updateParentLinkage(updated);
   };
-  const isMountedRef = (0, import_react11.useRef)(true);
-  (0, import_react11.useEffect)(() => {
+  const isMountedRef = (0, import_react12.useRef)(true);
+  (0, import_react12.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
@@ -3219,7 +3528,7 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
     }
   };
   const handleRecordCellChange = handleCommitRecordCell;
-  const handleQuietSubTableCellChange = (0, import_react11.useCallback)((recordId, colName, value2) => {
+  const handleQuietSubTableCellChange = (0, import_react12.useCallback)((recordId, colName, value2) => {
     setLinkedRecords(
       (prev) => prev.map((r) => r.id === recordId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value2 }) }) : r)
     );
@@ -3667,12 +3976,352 @@ function SubTableViewer({ rowId, column, value, onChange, context }) {
 }
 
 // src/components/TableBlock/TableBlockClient.tsx
+var import_lucide_react8 = require("lucide-react");
+
+// src/components/TableBlock/RelationFilterPopover.tsx
+var import_react13 = require("react");
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+function calculatePopoverCoords(rect) {
+  if (!rect || typeof window === "undefined") return null;
+  const popoverWidth = 260;
+  const popoverHeight = 360;
+  let right = window.innerWidth - rect.right;
+  if (right + popoverWidth > window.innerWidth - 10) {
+    right = window.innerWidth - popoverWidth - 10;
+  }
+  if (right < 10) {
+    right = 10;
+  }
+  const spaceBelow = window.innerHeight - rect.bottom;
+  let top = rect.bottom + 6;
+  if (spaceBelow < popoverHeight && rect.top > popoverHeight) {
+    top = Math.max(10, rect.top - popoverHeight - 6);
+  } else {
+    top = Math.min(window.innerHeight - popoverHeight - 10, top);
+  }
+  return { top, right };
+}
+function RelationFilterPopover({
+  isOpen,
+  onClose,
+  column,
+  triggerRect,
+  options,
+  filterValue,
+  selectedValues,
+  onSelectionChange,
+  isLoading = false
+}) {
+  const popoverRef = (0, import_react13.useRef)(null);
+  const searchInputRef = (0, import_react13.useRef)(null);
+  const selectAllRef = (0, import_react13.useRef)(null);
+  const [searchQuery, setSearchQuery] = (0, import_react13.useState)("");
+  const [coords, setCoords] = (0, import_react13.useState)(
+    () => calculatePopoverCoords(triggerRect)
+  );
+  const [mode, setMode] = (0, import_react13.useState)("include");
+  const [checkedSet, setCheckedSet] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
+  const [excludedSet, setExcludedSet] = (0, import_react13.useState)(/* @__PURE__ */ new Set());
+  const prevIsOpenRef = (0, import_react13.useRef)(isOpen);
+  (0, import_react13.useEffect)(() => {
+    const justOpened = isOpen && !prevIsOpenRef.current;
+    prevIsOpenRef.current = isOpen;
+    if (justOpened) {
+      const activeVal = filterValue != null ? filterValue : selectedValues;
+      if (activeVal && typeof activeVal === "object" && !Array.isArray(activeVal) && "operator" in activeVal && activeVal.operator === "notIn") {
+        setMode("exclude");
+        setExcludedSet(new Set(activeVal.values || []));
+        setCheckedSet(/* @__PURE__ */ new Set());
+      } else if (Array.isArray(activeVal) && activeVal.length > 0) {
+        setMode("include");
+        setCheckedSet(new Set(activeVal));
+        setExcludedSet(/* @__PURE__ */ new Set());
+      } else {
+        setMode("include");
+        setCheckedSet(/* @__PURE__ */ new Set());
+        setExcludedSet(/* @__PURE__ */ new Set());
+      }
+    }
+  }, [isOpen, filterValue, selectedValues]);
+  const updatePosition = (0, import_react13.useCallback)(() => {
+    const next = calculatePopoverCoords(triggerRect);
+    if (next) setCoords(next);
+  }, [triggerRect]);
+  (0, import_react13.useEffect)(() => {
+    if (isOpen) {
+      updatePosition();
+      setTimeout(() => {
+        var _a;
+        return (_a = searchInputRef.current) == null ? void 0 : _a.focus();
+      }, 50);
+    } else {
+      setSearchQuery("");
+    }
+  }, [isOpen, updatePosition]);
+  (0, import_react13.useEffect)(() => {
+    if (!isOpen) return;
+    const handleScrollOrResize = () => updatePosition();
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [isOpen, updatePosition]);
+  (0, import_react13.useEffect)(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (e) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [isOpen, onClose]);
+  (0, import_react13.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+  const filteredOptions = (0, import_react13.useMemo)(() => {
+    if (!searchQuery.trim()) return options;
+    const q = searchQuery.trim().toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(q));
+  }, [options, searchQuery]);
+  const isOptionChecked = (0, import_react13.useCallback)(
+    (label) => {
+      if (mode === "exclude") {
+        return !excludedSet.has(label);
+      }
+      return checkedSet.has(label);
+    },
+    [mode, excludedSet, checkedSet]
+  );
+  const allFilteredSelected = (0, import_react13.useMemo)(() => {
+    if (filteredOptions.length === 0) return false;
+    return filteredOptions.every((opt) => isOptionChecked(opt.label));
+  }, [filteredOptions, isOptionChecked]);
+  const someFilteredSelected = (0, import_react13.useMemo)(() => {
+    return filteredOptions.some((opt) => isOptionChecked(opt.label));
+  }, [filteredOptions, isOptionChecked]);
+  (0, import_react13.useEffect)(() => {
+    if (selectAllRef.current) {
+      selectAllRef.current.indeterminate = !allFilteredSelected && someFilteredSelected;
+    }
+  }, [allFilteredSelected, someFilteredSelected]);
+  const handleToggleOption = (label) => {
+    if (mode === "exclude") {
+      const nextExcluded = new Set(excludedSet);
+      if (nextExcluded.has(label)) {
+        nextExcluded.delete(label);
+      } else {
+        nextExcluded.add(label);
+      }
+      setExcludedSet(nextExcluded);
+      if (nextExcluded.size === 0) {
+        onSelectionChange(void 0);
+      } else {
+        onSelectionChange({ operator: "notIn", values: Array.from(nextExcluded) });
+      }
+    } else {
+      const nextChecked = new Set(checkedSet);
+      if (nextChecked.has(label)) {
+        nextChecked.delete(label);
+      } else {
+        nextChecked.add(label);
+      }
+      setCheckedSet(nextChecked);
+      if (nextChecked.size === 0) {
+        onSelectionChange(void 0);
+      } else if (options.length > 0 && nextChecked.size >= options.length) {
+        setMode("exclude");
+        setExcludedSet(/* @__PURE__ */ new Set());
+        onSelectionChange(void 0);
+      } else {
+        onSelectionChange(Array.from(nextChecked));
+      }
+    }
+  };
+  const handleToggleSelectAll = (checked) => {
+    if (checked) {
+      setMode("exclude");
+      setExcludedSet(/* @__PURE__ */ new Set());
+      setCheckedSet(/* @__PURE__ */ new Set());
+      onSelectionChange(void 0);
+    } else {
+      setMode("include");
+      setCheckedSet(/* @__PURE__ */ new Set());
+      setExcludedSet(/* @__PURE__ */ new Set());
+      onSelectionChange(void 0);
+    }
+  };
+  const handleResetFilter = () => {
+    setMode("include");
+    setCheckedSet(/* @__PURE__ */ new Set());
+    setExcludedSet(/* @__PURE__ */ new Set());
+    setSearchQuery("");
+    onSelectionChange(void 0);
+  };
+  if (!isOpen || !coords) return null;
+  const selectedCount = (0, import_react13.useMemo)(() => {
+    if (mode === "exclude") {
+      return Math.max(0, options.length - excludedSet.size);
+    }
+    return checkedSet.size;
+  }, [mode, options.length, excludedSet.size, checkedSet.size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      ref: popoverRef,
+      dir: "rtl",
+      style: {
+        top: `${coords.top}px`,
+        right: `${coords.right}px`
+      },
+      className: "fixed z-[99999] w-[260px] bg-white rounded-xl shadow-2xl border border-slate-200 p-2.5 text-right select-none animate-in fade-in duration-100",
+      onClick: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between border-b border-slate-100 pb-2 mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs font-bold text-slate-700 truncate", children: [
+              "\u05E1\u05D9\u05E0\u05D5\u05DF \u05DC\u05E4\u05D9 ",
+              column.name
+            ] }),
+            mode === "exclude" && excludedSet.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-[10px] text-amber-600 font-semibold", children: [
+              "(\u05D4\u05DB\u05DC \u05DC\u05DE\u05E2\u05D8 ",
+              excludedSet.size,
+              ")"
+            ] }) : mode === "exclude" && excludedSet.size === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] text-brand font-semibold", children: "(\u05D4\u05DB\u05DC \u05E0\u05D1\u05D7\u05E8)" }) : selectedCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-[10px] text-brand font-semibold", children: [
+              "(",
+              selectedCount,
+              " \u05E0\u05D1\u05D7\u05E8\u05D5)"
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "text-slate-400 hover:text-slate-600 p-0.5 rounded hover:bg-slate-100 transition-colors cursor-pointer",
+              title: "\u05E1\u05D2\u05D5\u05E8",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.Search, { className: "w-3.5 h-3.5 text-slate-400 absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              placeholder: "\u05D7\u05D9\u05E4\u05D5\u05E9 \u05D0\u05E4\u05E9\u05E8\u05D5\u05D9\u05D5\u05EA...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              className: "h-7 text-xs pr-7 pl-6 w-full rounded-md border border-slate-200 bg-slate-50 focus:bg-white focus:border-brand focus:ring-1 focus:ring-brand text-slate-800 transition-all placeholder:text-slate-400"
+            }
+          ),
+          searchQuery && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSearchQuery(""),
+              className: "absolute left-1.5 top-1/2 -translate-y-1/2 p-0.5 text-slate-400 hover:text-slate-600 rounded",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "w-3 h-3" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-1.5 py-1 mb-1 rounded hover:bg-slate-50 transition-colors border-b border-slate-100 pb-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-xs font-medium text-slate-700 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "input",
+              {
+                ref: selectAllRef,
+                type: "checkbox",
+                checked: allFilteredSelected,
+                onChange: (e) => handleToggleSelectAll(e.target.checked),
+                className: "w-3.5 h-3.5 rounded border-slate-300 text-brand focus:ring-brand cursor-pointer accent-[#0d9488]"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u05D1\u05D7\u05E8 \u05D4\u05DB\u05DC" })
+          ] }),
+          (mode === "exclude" || checkedSet.size > 0) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: handleResetFilter,
+              className: "text-[11px] text-blue-600 hover:text-blue-700 hover:underline flex items-center gap-1 cursor-pointer",
+              title: "\u05E0\u05E7\u05D4 \u05E1\u05D9\u05E0\u05D5\u05DF \u05D5\u05D4\u05E6\u05D2 \u05D4\u05DB\u05DC",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.RotateCcw, { className: "w-2.5 h-2.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u05E0\u05E7\u05D4" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-h-[250px] overflow-y-auto space-y-0.5 custom-scrollbar pr-0.5", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center py-6 text-slate-400 text-xs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-4 h-4 border-2 border-brand border-t-transparent rounded-full animate-spin ml-2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u05D8\u05D5\u05E2\u05DF \u05D0\u05E4\u05E9\u05E8\u05D5\u05D9\u05D5\u05EA..." })
+        ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-6 text-center text-xs text-slate-400", children: "\u05DC\u05D0 \u05E0\u05DE\u05E6\u05D0\u05D5 \u05D0\u05E4\u05E9\u05E8\u05D5\u05D9\u05D5\u05EA" }) : filteredOptions.map((opt) => {
+          const isChecked = isOptionChecked(opt.label);
+          return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "label",
+            {
+              className: `flex items-center gap-2 px-2 py-1 rounded cursor-pointer transition-colors text-xs ${isChecked ? "text-slate-800 font-medium bg-slate-50/60" : "text-slate-500 hover:bg-slate-50"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isChecked,
+                    onChange: () => handleToggleOption(opt.label),
+                    className: "w-3.5 h-3.5 rounded border-slate-300 text-brand focus:ring-brand cursor-pointer accent-[#0d9488]"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate flex-1", title: opt.label, children: opt.label })
+              ]
+            },
+            opt.id
+          );
+        }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "border-t border-slate-100 pt-1.5 mt-1 flex items-center justify-between text-[11px] text-slate-400 px-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+            filteredOptions.length,
+            " \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "text-slate-600 hover:text-slate-900 font-medium px-2 py-0.5 rounded hover:bg-slate-100 transition-colors cursor-pointer",
+              children: "\u05E1\u05D2\u05D5\u05E8"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/TableBlock/TableBlockClient.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function TableBlockClient({
   data: initialRecords,
   settings: schema,
   executeAction,
+  exportAction,
   emitEvent,
   pageState,
   isLoading,
@@ -3685,6 +4334,7 @@ function TableBlockClient({
   "data-testid": dataTestId
 }) {
   const { showError, addToast } = useToast();
+  const [isExporting, setIsExporting] = (0, import_react14.useState)(false);
   const tableKey = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id) || (schema == null ? void 0 : schema.name) || "default";
   const { columnWidths, startResize } = useColumnResize({
     storageKey: `table_widths_${tableKey}`,
@@ -3695,14 +4345,18 @@ function TableBlockClient({
       return calculateMinColumnWidth(colName, false, col == null ? void 0 : col.type);
     }
   });
-  const [isMounted, setIsMounted] = (0, import_react12.useState)(false);
-  const [isInitialLoading, setIsInitialLoading] = (0, import_react12.useState)(true);
-  const [page, setPage] = (0, import_react12.useState)(1);
-  const [limit, setLimit] = (0, import_react12.useState)(50);
-  const [totalRecords, setTotalRecords] = (0, import_react12.useState)(0);
-  const [totalPages, setTotalPages] = (0, import_react12.useState)(1);
-  const [showSummary, setShowSummary] = (0, import_react12.useState)(false);
-  (0, import_react12.useEffect)(() => {
+  const executeActionRef = (0, import_react14.useRef)(executeAction);
+  (0, import_react14.useEffect)(() => {
+    executeActionRef.current = executeAction;
+  }, [executeAction]);
+  const [isMounted, setIsMounted] = (0, import_react14.useState)(false);
+  const [isInitialLoading, setIsInitialLoading] = (0, import_react14.useState)(true);
+  const [page, setPage] = (0, import_react14.useState)(1);
+  const [limit, setLimit] = (0, import_react14.useState)(50);
+  const [totalRecords, setTotalRecords] = (0, import_react14.useState)(0);
+  const [totalPages, setTotalPages] = (0, import_react14.useState)(1);
+  const [showSummary, setShowSummary] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
     if (typeof window !== "undefined") {
       const savedSummary = localStorage.getItem(`table_summary_${tableKey}`);
       if (savedSummary !== null) {
@@ -3751,7 +4405,7 @@ function TableBlockClient({
       return __spreadProps(__spreadValues({}, row), { id: String(row.id || ""), data: rowData });
     });
   };
-  const mergeColumnDefs = (0, import_react12.useCallback)((existingCols, incomingCols) => {
+  const mergeColumnDefs = (0, import_react14.useCallback)((existingCols, incomingCols) => {
     if (!incomingCols || incomingCols.length === 0) return existingCols || [];
     if (!existingCols || existingCols.length === 0) return incomingCols;
     const existingMap = new Map(existingCols.map((c) => [c.name, c]));
@@ -3771,18 +4425,18 @@ function TableBlockClient({
       return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
     });
   }, []);
-  const [localColumns, setLocalColumns] = (0, import_react12.useState)(() => (schema == null ? void 0 : schema.columns) || []);
-  (0, import_react12.useEffect)(() => {
+  const [localColumns, setLocalColumns] = (0, import_react14.useState)(() => (schema == null ? void 0 : schema.columns) || []);
+  (0, import_react14.useEffect)(() => {
     if ((schema == null ? void 0 : schema.columns) && schema.columns.length > 0) {
       setLocalColumns((prev) => mergeColumnDefs(prev, schema.columns));
     }
   }, [schema == null ? void 0 : schema.columns, mergeColumnDefs]);
-  const [dirty, setDirty] = (0, import_react12.useState)({ added: [], modified: {}, deleted: [] });
-  const dirtyRef = (0, import_react12.useRef)(dirty);
-  (0, import_react12.useEffect)(() => {
+  const [dirty, setDirty] = (0, import_react14.useState)({ added: [], modified: {}, deleted: [] });
+  const dirtyRef = (0, import_react14.useRef)(dirty);
+  (0, import_react14.useEffect)(() => {
     dirtyRef.current = dirty;
   }, [dirty]);
-  const mergeWithDirty = (0, import_react12.useCallback)((baseRecords) => {
+  const mergeWithDirty = (0, import_react14.useCallback)((baseRecords) => {
     const { added, modified, deleted } = dirtyRef.current;
     const nonDeleted = (baseRecords || []).filter((r) => !deleted.includes(r.id));
     const modifiedRecords = nonDeleted.map((r) => {
@@ -3795,9 +4449,10 @@ function TableBlockClient({
     const uniqueAdded = added.filter((r) => !baseIds.has(r.id));
     return [...uniqueAdded, ...modifiedRecords];
   }, []);
-  const [data, setData] = (0, import_react12.useState)(() => normalizeRecords(initialRecords));
-  const [serverRecords, setServerRecords] = (0, import_react12.useState)(() => normalizeRecords(initialRecords));
-  (0, import_react12.useEffect)(() => {
+  const [data, setData] = (0, import_react14.useState)(() => normalizeRecords(initialRecords));
+  const [serverRecords, setServerRecords] = (0, import_react14.useState)(() => normalizeRecords(initialRecords));
+  const filteredData = data;
+  (0, import_react14.useEffect)(() => {
     if (initialRecords) {
       const norm = normalizeRecords(initialRecords);
       setServerRecords(norm);
@@ -3814,27 +4469,114 @@ function TableBlockClient({
     }
     return false;
   };
-  const [baseRecordsMap, setBaseRecordsMap] = (0, import_react12.useState)(() => {
+  const [baseRecordsMap, setBaseRecordsMap] = (0, import_react14.useState)(() => {
     const map = /* @__PURE__ */ new Map();
     (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
     return map;
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (initialRecords && initialRecords.length > 0) {
       const map = /* @__PURE__ */ new Map();
       (normalizeRecords(initialRecords) || []).forEach((r) => map.set(r.id, __spreadValues({}, r.data)));
       setBaseRecordsMap(map);
     }
   }, [initialRecords]);
-  const refetchTableData = (0, import_react12.useCallback)((targetPage) => {
-    const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
-    if (!tableId || !executeAction) return Promise.resolve();
-    const activePage = targetPage !== void 0 ? targetPage : page;
-    const skip = (activePage - 1) * limit;
-    return executeAction("FETCH_TABLE_DATA", { tableId, page: activePage, limit, skip }).then((res) => {
-      var _a;
-      if (res) {
-        if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
+  const [searchQuery, setSearchQuery] = (0, import_react14.useState)("");
+  const [columnFilters, setColumnFilters] = (0, import_react14.useState)({});
+  const [activeSearchCol, setActiveSearchCol] = (0, import_react14.useState)(null);
+  const activeSearchRef = (0, import_react14.useRef)(null);
+  const [activeRelationCol, setActiveRelationCol] = (0, import_react14.useState)(null);
+  const [relationTriggerRect, setRelationTriggerRect] = (0, import_react14.useState)(null);
+  const filterButtonRefs = (0, import_react14.useRef)({});
+  const [relationOptions, setRelationOptions] = (0, import_react14.useState)({});
+  const [relationFilterOptions, setRelationFilterOptions] = (0, import_react14.useState)({});
+  const [loadingFilterCol, setLoadingFilterCol] = (0, import_react14.useState)(null);
+  const relationDictionaryRef = (0, import_react14.useRef)({});
+  const mergeRelationOptions = (0, import_react14.useCallback)((colName, newOptions) => {
+    if (!Array.isArray(newOptions) || newOptions.length === 0) return;
+    if (!relationDictionaryRef.current[colName]) {
+      relationDictionaryRef.current[colName] = /* @__PURE__ */ new Map();
+    }
+    const dict = relationDictionaryRef.current[colName];
+    let hasNew = false;
+    for (const opt of newOptions) {
+      if (!opt) continue;
+      const id = String(opt.id || opt._id || "");
+      if (!id) continue;
+      const existing = dict.get(id);
+      if (!existing || opt.label && !existing.label) {
+        dict.set(id, opt);
+        hasNew = true;
+      }
+    }
+    if (hasNew) {
+      setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), {
+        [colName]: Array.from(dict.values())
+      }));
+    }
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    if (!activeSearchCol) return;
+    const handleMouseDown = (e) => {
+      if (activeSearchRef.current && !activeSearchRef.current.contains(e.target)) {
+        setActiveSearchCol(null);
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [activeSearchCol]);
+  const filtersKey = (0, import_react14.useMemo)(() => {
+    const active = {};
+    Object.entries(columnFilters).forEach(([k, v]) => {
+      if (Array.isArray(v) && v.length > 0) active[k] = v;
+      else if (v && typeof v === "object" && "operator" in v && Array.isArray(v.values) && v.values.length > 0) active[k] = v;
+      else if (typeof v === "string" && v.trim()) active[k] = v.trim();
+    });
+    return JSON.stringify(active);
+  }, [columnFilters]);
+  const [debouncedSearch, setDebouncedSearch] = (0, import_react14.useState)(searchQuery);
+  (0, import_react14.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchQuery.trim());
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+  const isSearchMountedRef = (0, import_react14.useRef)(false);
+  (0, import_react14.useEffect)(() => {
+    if (!isSearchMountedRef.current) {
+      isSearchMountedRef.current = true;
+      return;
+    }
+    setPage(1);
+  }, [debouncedSearch]);
+  const [isFetching, setIsFetching] = (0, import_react14.useState)(false);
+  const fetchRequestIdRef = (0, import_react14.useRef)(0);
+  const fetchTableData = (0, import_react14.useCallback)((targetPage, targetLimit, targetSearch, targetFiltersKey) => {
+    const tableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    const action = executeActionRef.current;
+    if (!tableId || !action) return Promise.resolve();
+    const currentRequestId = ++fetchRequestIdRef.current;
+    setIsFetching(true);
+    let activeFilters = {};
+    try {
+      activeFilters = JSON.parse(targetFiltersKey);
+    } catch (e) {
+    }
+    const skip = (targetPage - 1) * targetLimit;
+    return action("FETCH_TABLE_DATA", {
+      tableId,
+      page: targetPage,
+      limit: targetLimit,
+      skip,
+      search: targetSearch || void 0,
+      columnFilters: Object.keys(activeFilters).length > 0 ? activeFilters : void 0
+    }).then((res) => {
+      var _a;
+      if (currentRequestId !== fetchRequestIdRef.current) return;
+      if (res) {
+        if (((_a = res.schema) == null ? void 0 : _a.columns) && res.schema.columns.length > 0) {
           setLocalColumns((prev) => mergeColumnDefs(prev, res.schema.columns));
         }
         if (res.records && Array.isArray(res.records)) {
@@ -3847,37 +4589,50 @@ function TableBlockClient({
         }
         if (res.meta) {
           const total = typeof res.meta.totalRecords === "number" ? res.meta.totalRecords : 0;
-          const pages = typeof res.meta.totalPages === "number" ? res.meta.totalPages : Math.ceil(total / limit) || 1;
+          const pages = typeof res.meta.totalPages === "number" ? res.meta.totalPages : Math.ceil(total / targetLimit) || 1;
           setTotalRecords(total);
           setTotalPages(pages);
-          if (activePage > pages && pages >= 1) {
-            setPage(pages);
-          }
         } else if (res.records && Array.isArray(res.records)) {
           setTotalRecords(res.records.length);
-          setTotalPages(Math.ceil(res.records.length / limit) || 1);
+          setTotalPages(Math.ceil(res.records.length / targetLimit) || 1);
+        }
+        if (res.relationOptions && typeof res.relationOptions === "object") {
+          for (const [colName, opts] of Object.entries(res.relationOptions)) {
+            if (Array.isArray(opts)) {
+              mergeRelationOptions(colName, opts);
+            }
+          }
         }
       }
     }).catch((err) => {
-      console.error("[TableBlock] Failed to auto-fetch table data:", err);
+      if (currentRequestId === fetchRequestIdRef.current) {
+        console.error("[TableBlock] Failed to fetch table data:", err);
+      }
+    }).finally(() => {
+      if (currentRequestId === fetchRequestIdRef.current) {
+        setIsFetching(false);
+        setIsInitialLoading(false);
+      }
     });
-  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, page, limit, executeAction, mergeColumnDefs, mergeWithDirty]);
-  (0, import_react12.useEffect)(() => {
-    let isMounted2 = true;
-    const fetchPromise = refetchTableData();
-    if (fetchPromise && typeof fetchPromise.finally === "function") {
-      fetchPromise.finally(() => {
-        if (isMounted2) {
-          setIsInitialLoading(false);
-        }
-      });
-    } else {
-      setIsInitialLoading(false);
-    }
-    return () => {
-      isMounted2 = false;
-    };
-  }, [refetchTableData]);
+  }, [schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, mergeColumnDefs, mergeWithDirty, mergeRelationOptions]);
+  (0, import_react14.useEffect)(() => {
+    fetchTableData(page, limit, debouncedSearch, filtersKey);
+  }, [page, limit, debouncedSearch, filtersKey, fetchTableData]);
+  const refetchTableData = (0, import_react14.useCallback)(() => {
+    return fetchTableData(page, limit, debouncedSearch, filtersKey);
+  }, [page, limit, debouncedSearch, filtersKey, fetchTableData]);
+  const handleApplyColumnFilter = (0, import_react14.useCallback)((colName, nextVal) => {
+    setColumnFilters((prev) => {
+      const next = __spreadValues({}, prev);
+      if (nextVal === void 0 || Array.isArray(nextVal) && nextVal.length === 0 || typeof nextVal === "string" && !nextVal.trim() || typeof nextVal === "object" && "values" in nextVal && Array.isArray(nextVal.values) && nextVal.values.length === 0) {
+        delete next[colName];
+      } else {
+        next[colName] = nextVal;
+      }
+      return next;
+    });
+    setPage(1);
+  }, []);
   const handleLimitChange = (newLimit) => {
     setLimit(newLimit);
     setPage(1);
@@ -3891,37 +4646,15 @@ function TableBlockClient({
   const handleNextPage = () => {
     setPage((prev) => Math.min(totalPages, prev + 1));
   };
-  (0, import_react12.useEffect)(() => {
-    if (error) {
-      showError(error, "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05E8\u05DB\u05D9\u05D1");
-    }
-  }, [error, showError]);
-  const [searchQuery, setSearchQuery] = (0, import_react12.useState)("");
-  const [columnFilters, setColumnFilters] = (0, import_react12.useState)({});
-  const [activeSearchCol, setActiveSearchCol] = (0, import_react12.useState)(null);
-  const activeSearchRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
-    if (!activeSearchCol) return;
-    const handleMouseDown = (e) => {
-      if (activeSearchRef.current && !activeSearchRef.current.contains(e.target)) {
-        setActiveSearchCol(null);
-      }
-    };
-    document.addEventListener("mousedown", handleMouseDown);
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDown);
-    };
-  }, [activeSearchCol]);
-  const [selectedIds, setSelectedIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
-  const [pendingDeletions, setPendingDeletions] = (0, import_react12.useState)([]);
-  const [isSaving, setIsSaving] = (0, import_react12.useState)(false);
+  const [selectedIds, setSelectedIds] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
+  const [pendingDeletions, setPendingDeletions] = (0, import_react14.useState)([]);
+  const [isSaving, setIsSaving] = (0, import_react14.useState)(false);
   const isUpdatingActive = Boolean(isUpdating || isSaving);
-  const [isSaveSuccess, setIsSaveSuccess] = (0, import_react12.useState)(false);
-  const [relationOptions, setRelationOptions] = (0, import_react12.useState)({});
-  const [expandedRowIds, setExpandedRowIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
-  const schemaColsString = (0, import_react12.useMemo)(() => JSON.stringify(localColumns || []), [localColumns]);
-  const refetchRelation = (0, import_react12.useCallback)(async (colName) => {
-    var _a, _b, _c;
+  const [isSaveSuccess, setIsSaveSuccess] = (0, import_react14.useState)(false);
+  const [expandedRowIds, setExpandedRowIds] = (0, import_react14.useState)(/* @__PURE__ */ new Set());
+  const schemaColsString = (0, import_react14.useMemo)(() => JSON.stringify(localColumns || []), [localColumns]);
+  const refetchRelation = (0, import_react14.useCallback)(async (colName, params) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     let parsedCols = [];
     try {
       parsedCols = JSON.parse(schemaColsString);
@@ -3931,19 +4664,125 @@ function TableBlockClient({
       var _a2;
       return c.name === colName && ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION";
     });
-    if (!col || !((_a = col.config) == null ? void 0 : _a.referencedTableId)) return;
+    if (!col || !((_a = col.config) == null ? void 0 : _a.referencedTableId)) return [];
     try {
       if (executeAction) {
-        const options = await executeAction("FETCH_RELATION", { referencedTableId: (_b = col.config) == null ? void 0 : _b.referencedTableId, displayField: (_c = col.config) == null ? void 0 : _c.displayField });
-        if (options && Array.isArray(options)) {
-          setRelationOptions((prev) => __spreadProps(__spreadValues({}, prev), { [colName]: options }));
+        const take = (_c = (_b = params == null ? void 0 : params.take) != null ? _b : params == null ? void 0 : params.limit) != null ? _c : 1e3;
+        const payload = {
+          referencedTableId: (_d = col.config) == null ? void 0 : _d.referencedTableId,
+          displayField: (_e = col.config) == null ? void 0 : _e.displayField
+        };
+        if (params == null ? void 0 : params.recordIds) {
+          payload.recordIds = params.recordIds;
+        } else {
+          payload.take = take;
+          payload.limit = take;
+          payload.skip = (_f = params == null ? void 0 : params.skip) != null ? _f : 0;
+          payload.search = (_g = params == null ? void 0 : params.search) != null ? _g : "";
+        }
+        const options = await executeAction("FETCH_RELATION", payload);
+        const list = Array.isArray(options) ? options : (options == null ? void 0 : options.data) && Array.isArray(options.data) ? options.data : [];
+        if (list && Array.isArray(list)) {
+          mergeRelationOptions(colName, list);
+          return list;
         }
       }
     } catch (err) {
       console.warn(`[TableBlock] Could not fetch relation options for column ${colName}:`, err);
     }
-  }, [schemaColsString, executeAction]);
-  (0, import_react12.useEffect)(() => {
+    return [];
+  }, [schemaColsString, executeAction, mergeRelationOptions]);
+  const fetchRelationFilterOptions = (0, import_react14.useCallback)(async (colName) => {
+    var _a;
+    let parsedCols = [];
+    try {
+      parsedCols = JSON.parse(schemaColsString);
+    } catch (e) {
+    }
+    const col = parsedCols.find((c) => {
+      var _a2;
+      return c.name === colName && ((_a2 = c.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION";
+    });
+    if (!col || !((_a = col.config) == null ? void 0 : _a.referencedTableId) || !executeAction) return;
+    const currentTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+    setLoadingFilterCol(colName);
+    try {
+      const res = await executeAction("FETCH_RELATION", {
+        referencedTableId: col.config.referencedTableId,
+        currentTableId,
+        columnName: colName,
+        isFilter: true,
+        displayField: col.config.displayField,
+        take: 1e3
+      });
+      const list = Array.isArray(res) ? res : (res == null ? void 0 : res.data) && Array.isArray(res.data) ? res.data : [];
+      setRelationFilterOptions((prev) => __spreadProps(__spreadValues({}, prev), {
+        [colName]: list
+      }));
+      if (list.length > 0) {
+        mergeRelationOptions(colName, list);
+      }
+    } catch (err) {
+      console.warn(`[TableBlock] Failed to fetch distinct relation filter options for ${colName}:`, err);
+    } finally {
+      setLoadingFilterCol(null);
+    }
+  }, [schemaColsString, schema == null ? void 0 : schema.tableMetaId, schema == null ? void 0 : schema.tableId, schema == null ? void 0 : schema.id, executeAction, mergeRelationOptions]);
+  const requestedRelationIdsRef = (0, import_react14.useRef)({});
+  (0, import_react14.useEffect)(() => {
+    if (!executeAction || !data || data.length === 0) return;
+    let parsedCols = [];
+    try {
+      parsedCols = JSON.parse(schemaColsString);
+    } catch (e) {
+    }
+    const relationCols = parsedCols.filter(
+      (c) => {
+        var _a;
+        return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "RELATION";
+      }
+    );
+    if (relationCols.length === 0) return;
+    relationCols.forEach(async (col) => {
+      var _a, _b;
+      const referencedTableId = (_a = col.config) == null ? void 0 : _a.referencedTableId;
+      if (!referencedTableId) return;
+      const extractedIds = /* @__PURE__ */ new Set();
+      data.forEach((row) => {
+        if (!(row == null ? void 0 : row.data)) return;
+        const ids = normalizeRelationValue(row.data[col.name]);
+        ids.forEach((id) => {
+          if (/^[0-9a-fA-F]{24}$/.test(id)) {
+            extractedIds.add(id);
+          }
+        });
+      });
+      if (extractedIds.size === 0) return;
+      const existingOptions = relationOptions[col.name] || [];
+      const existingIds = new Set(existingOptions.map((o) => String(o.id)));
+      if (!requestedRelationIdsRef.current[col.name]) {
+        requestedRelationIdsRef.current[col.name] = /* @__PURE__ */ new Set();
+      }
+      const inFlight = requestedRelationIdsRef.current[col.name];
+      const missingIds = Array.from(extractedIds).filter((id) => !existingIds.has(id) && !inFlight.has(id));
+      if (missingIds.length === 0) return;
+      missingIds.forEach((id) => inFlight.add(id));
+      try {
+        const resolved = await executeAction("FETCH_RELATION", {
+          referencedTableId,
+          displayField: (_b = col.config) == null ? void 0 : _b.displayField,
+          recordIds: missingIds
+        });
+        const items = Array.isArray(resolved) ? resolved : (resolved == null ? void 0 : resolved.data) && Array.isArray(resolved.data) ? resolved.data : [];
+        if (items.length > 0) {
+          mergeRelationOptions(col.name, items);
+        }
+      } catch (err) {
+        console.warn(`[TableBlock] Failed to populate relations for ${col.name}:`, err);
+      }
+    });
+  }, [data, schemaColsString, executeAction, relationOptions, mergeRelationOptions]);
+  (0, import_react14.useEffect)(() => {
     let parsedCols = [];
     try {
       parsedCols = JSON.parse(schemaColsString);
@@ -3957,7 +4796,7 @@ function TableBlockClient({
       refetchRelation(col.name);
     });
   }, [schemaColsString, refetchRelation]);
-  const normalizedColumns = (0, import_react12.useMemo)(() => {
+  const normalizedColumns = (0, import_react14.useMemo)(() => {
     return (localColumns || []).map((col, idx) => {
       const isRequired = col.isRequired === true || String(col.isRequired) === "true";
       const isUnique = col.isUnique === true || String(col.isUnique) === "true";
@@ -3971,17 +4810,17 @@ function TableBlockClient({
       return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
     });
   }, [localColumns]);
-  const filteredColumns = (0, import_react12.useMemo)(() => {
+  const filteredColumns = (0, import_react14.useMemo)(() => {
     const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
     return normalizedColumns.filter((col) => !systemFields.includes(col.name) && !col.isHidden);
   }, [normalizedColumns]);
-  const customizableColumns = (0, import_react12.useMemo)(() => {
+  const customizableColumns = (0, import_react14.useMemo)(() => {
     const systemFields = ["_id", "createdAt", "updatedAt", "orgId", "tableId"];
     return normalizedColumns.filter((col) => !systemFields.includes(col.name));
   }, [normalizedColumns]);
-  const [isColumnsDropdownOpen, setIsColumnsDropdownOpen] = (0, import_react12.useState)(false);
-  const dropdownRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [isColumnsDropdownOpen, setIsColumnsDropdownOpen] = (0, import_react14.useState)(false);
+  const dropdownRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsColumnsDropdownOpen(false);
@@ -4191,46 +5030,45 @@ function TableBlockClient({
     setData((prev) => [newRow, ...prev]);
     setDirty((prev) => __spreadProps(__spreadValues({}, prev), { added: [newRow, ...prev.added] }));
   };
-  const handleCellChange = (rowId, colName, value) => {
+  const handleCellChange = (0, import_react14.useCallback)((rowId, colName, value) => {
     setData((prev) => prev.map(
       (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
     ));
-    const isAdded = dirty.added.some((r) => r.id === rowId);
-    if (isAdded) {
-      setDirty((prev) => __spreadProps(__spreadValues({}, prev), {
-        added: prev.added.map(
-          (r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value }) }) : r
-        )
-      }));
-    } else {
-      const origData = baseRecordsMap.get(rowId) || {};
-      const origValue = origData[colName];
-      setDirty((prev) => {
-        const currentMods = __spreadValues({}, prev.modified[rowId] || {});
-        if (isEqualValues(value, origValue)) {
-          delete currentMods[colName];
-        } else {
-          currentMods[colName] = value;
-        }
-        const nextModified = __spreadValues({}, prev.modified);
-        if (Object.keys(currentMods).length === 0) {
-          delete nextModified[rowId];
-        } else {
-          nextModified[rowId] = currentMods;
-        }
+    setDirty((prev) => {
+      const isAdded = prev.added.some((r) => r.id === rowId);
+      if (isAdded) {
         return __spreadProps(__spreadValues({}, prev), {
-          modified: nextModified
+          added: prev.added.map(
+            (r) => r.id === rowId ? __spreadProps(__spreadValues({}, r), { data: __spreadProps(__spreadValues({}, r.data), { [colName]: value }) }) : r
+          )
         });
+      }
+      const origData = baseRecordsMap.get(rowId) || {};
+      const origValue = origData[colName];
+      const currentMods = __spreadValues({}, prev.modified[rowId] || {});
+      if (isEqualValues(value, origValue)) {
+        delete currentMods[colName];
+      } else {
+        currentMods[colName] = value;
+      }
+      const nextModified = __spreadValues({}, prev.modified);
+      if (Object.keys(currentMods).length === 0) {
+        delete nextModified[rowId];
+      } else {
+        nextModified[rowId] = currentMods;
+      }
+      return __spreadProps(__spreadValues({}, prev), {
+        modified: nextModified
       });
-    }
-  };
-  const triggerSaveSuccess = (0, import_react12.useCallback)(() => {
+    });
+  }, [baseRecordsMap]);
+  const triggerSaveSuccess = (0, import_react14.useCallback)(() => {
     setIsSaveSuccess(true);
     setTimeout(() => {
       setIsSaveSuccess(false);
     }, 2500);
   }, []);
-  const handleQuietCellChange = (0, import_react12.useCallback)((rowId, colName, value) => {
+  const handleQuietCellChange = (0, import_react14.useCallback)((rowId, colName, value) => {
     setData((prev) => prev.map(
       (row) => row.id === rowId ? __spreadProps(__spreadValues({}, row), { data: __spreadProps(__spreadValues({}, row.data), { [colName]: value }) }) : row
     ));
@@ -4254,22 +5092,28 @@ function TableBlockClient({
       });
     }
   }, []);
-  const toggleSelectAll = (checked) => {
-    const nextSelected = checked ? new Set(filteredData.map((r) => r.id)) : /* @__PURE__ */ new Set();
-    setSelectedIds(nextSelected);
-    if (emitEvent) {
-      emitEvent("SELECTION_CHANGE", { selectedIds: Array.from(nextSelected), componentId });
-    }
-  };
-  const toggleSelectRow = (rowId, checked) => {
-    const newSelected = new Set(selectedIds);
-    if (checked) newSelected.add(rowId);
-    else newSelected.delete(rowId);
-    setSelectedIds(newSelected);
-    if (emitEvent) {
-      emitEvent("SELECTION_CHANGE", { selectedIds: Array.from(newSelected), componentId });
-    }
-  };
+  const toggleSelectAll = (0, import_react14.useCallback)((checked) => {
+    setSelectedIds(checked ? new Set(filteredData.map((r) => r.id)) : /* @__PURE__ */ new Set());
+  }, [filteredData]);
+  const toggleSelectRow = (0, import_react14.useCallback)((rowId, checked) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(rowId);
+      else next.delete(rowId);
+      return next;
+    });
+  }, []);
+  const handleToggleExpand = (0, import_react14.useCallback)((rowId) => {
+    setExpandedRowIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      return next;
+    });
+  }, []);
+  const handleMarkForDeletion = (0, import_react14.useCallback)((fileId) => {
+    setPendingDeletions((prev) => [...prev, fileId]);
+  }, []);
   const handleDeleteSelected = () => {
     const idsToDelete = Array.from(selectedIds);
     if (idsToDelete.length === 0) return;
@@ -4348,9 +5192,6 @@ function TableBlockClient({
     setData(serverRecords.map((r) => __spreadProps(__spreadValues({}, r), { data: __spreadValues({}, r.data) })));
     setSelectedIds(/* @__PURE__ */ new Set());
     setPendingDeletions([]);
-    if (emitEvent) {
-      emitEvent("SELECTION_CHANGE", { selectedIds: [], componentId });
-    }
   };
   const handleSave = async () => {
     var _a, _b;
@@ -4498,7 +5339,7 @@ function TableBlockClient({
       setIsSaving(false);
     }
   };
-  const getRowRelationLabels = (0, import_react12.useCallback)((rowVal, col) => {
+  const getRowRelationLabels = (0, import_react14.useCallback)((rowVal, col) => {
     const ids = normalizeRelationValue(rowVal);
     if (ids.length === 0) return [];
     const options = relationOptions[col.name] || [];
@@ -4506,19 +5347,23 @@ function TableBlockClient({
       const opt = options.find((o) => o.id === id || o._id === id);
       if (opt) {
         const resolved = resolveRelationLabel(opt, col);
-        if (resolved) return resolved;
-        if (opt.label) return String(opt.label);
-        if (opt.name) return String(opt.name);
+        if (resolved && !isRawObjectId(resolved)) return resolved;
+        if (opt.label && !isRawObjectId(String(opt.label))) return String(opt.label);
+        if (opt.name && !isRawObjectId(String(opt.name))) return String(opt.name);
       }
       if (typeof rowVal === "object" && rowVal !== null) {
-        if (rowVal._displayLabel) return String(rowVal._displayLabel);
-        if (rowVal.label) return String(rowVal.label);
+        if (rowVal._displayLabel && !isRawObjectId(String(rowVal._displayLabel))) return String(rowVal._displayLabel);
+        if (rowVal.label && !isRawObjectId(String(rowVal.label))) return String(rowVal.label);
       }
-      return id;
-    });
+      return "";
+    }).filter(Boolean);
   }, [relationOptions]);
-  const getUniqueRelationOptions = (0, import_react12.useCallback)((col) => {
+  const getUniqueRelationOptions = (0, import_react14.useCallback)((col) => {
+    if (relationFilterOptions[col.name]) {
+      return relationFilterOptions[col.name];
+    }
     const seenIds = /* @__PURE__ */ new Set();
+    const seenLabels = /* @__PURE__ */ new Set();
     const results = [];
     const options = relationOptions[col.name] || [];
     data.forEach((row) => {
@@ -4529,58 +5374,23 @@ function TableBlockClient({
           seenIds.add(id);
           const opt = options.find((o) => o.id === id || o._id === id);
           let label = opt ? resolveRelationLabel(opt, col) : "";
-          if (!label && opt) label = opt.label || opt.name || opt.title || id;
-          if (!label) label = id;
-          results.push({ id, label });
-        }
-      });
-    });
-    return results.sort((a, b) => a.label.localeCompare(b.label));
-  }, [data, relationOptions]);
-  const filteredData = (0, import_react12.useMemo)(() => {
-    const hasGlobalSearch = Boolean(searchQuery && searchQuery.trim() !== "");
-    const activeFilters = Object.entries(columnFilters).filter(([, val]) => Boolean(val && val.trim() !== ""));
-    const hasColumnFilters = activeFilters.length > 0;
-    if (!hasGlobalSearch && !hasColumnFilters) return data;
-    const lowerGlobal = hasGlobalSearch ? searchQuery.trim().toLowerCase() : "";
-    return data.filter((row) => {
-      var _a;
-      if (!row || !row.data) return false;
-      if (hasGlobalSearch) {
-        const matchesGlobal = (localColumns || []).some((col) => {
-          var _a2;
-          const rawVal = row.data[col.name];
-          if (rawVal === void 0 || rawVal === null) return false;
-          if (((_a2 = col.type) == null ? void 0 : _a2.toUpperCase()) === "RELATION") {
-            const labels = getRowRelationLabels(rawVal, col);
-            return labels.some((l) => l.toLowerCase().includes(lowerGlobal));
+          if (!label && opt) {
+            const fallback = opt.label || opt.name || opt.title;
+            if (fallback && typeof fallback === "string" && !isRawObjectId(fallback)) {
+              label = fallback.trim();
+            }
           }
-          if (typeof rawVal === "object") {
-            return JSON.stringify(rawVal).toLowerCase().includes(lowerGlobal);
+          if (label && label.trim() && label !== id && !isRawObjectId(label) && !seenLabels.has(label.trim())) {
+            seenLabels.add(label.trim());
+            results.push({ id, label: label.trim() });
           }
-          return String(rawVal).toLowerCase().includes(lowerGlobal);
-        });
-        if (!matchesGlobal) return false;
-      }
-      for (const [colName, filterVal] of activeFilters) {
-        const lowerFilter = filterVal.trim().toLowerCase();
-        const col = (localColumns || []).find((c) => c.name === colName);
-        const rawVal = row.data[colName];
-        if (((_a = col == null ? void 0 : col.type) == null ? void 0 : _a.toUpperCase()) === "RELATION") {
-          const labels = getRowRelationLabels(rawVal, col);
-          const matches = labels.some((l) => l.toLowerCase().includes(lowerFilter));
-          if (!matches) return false;
-        } else {
-          if (rawVal === void 0 || rawVal === null) return false;
-          const strVal = typeof rawVal === "object" ? JSON.stringify(rawVal).toLowerCase() : String(rawVal).toLowerCase();
-          if (!strVal.includes(lowerFilter)) return false;
         }
-      }
-      return true;
+      });
     });
-  }, [data, searchQuery, columnFilters, localColumns, getRowRelationLabels]);
+    return results.sort((a, b) => a.label.localeCompare(b.label));
+  }, [data, relationOptions, relationFilterOptions]);
   const errorMessage = error ? typeof error === "string" ? error : error.message || String(error) : null;
-  const columnTotals = (0, import_react12.useMemo)(() => {
+  const columnTotals = (0, import_react14.useMemo)(() => {
     const totals = {};
     if (!showSummary) return totals;
     filteredColumns.forEach((col) => {
@@ -4598,42 +5408,120 @@ function TableBlockClient({
     });
     return totals;
   }, [filteredData, filteredColumns, showSummary]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  const hasSelectedRows = selectedIds.size > 0;
+  const hasActiveSearchOrFilter = Boolean(searchQuery && searchQuery.trim() !== "") || Object.values(columnFilters).some(
+    (v) => Array.isArray(v) ? v.length > 0 : v && typeof v === "object" && "values" in v ? v.values.length > 0 : typeof v === "string" && Boolean(v.trim())
+  );
+  let exportButtonText = "\u05D9\u05D9\u05E6\u05D0 \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD";
+  let ExportButtonIcon = import_lucide_react8.Download;
+  if (hasSelectedRows) {
+    exportButtonText = `\u05D9\u05D9\u05E6\u05D0 ${selectedIds.size} \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA`;
+    ExportButtonIcon = import_lucide_react8.Download;
+  } else if (hasActiveSearchOrFilter) {
+    exportButtonText = "\u05D9\u05D9\u05E6\u05D0 \u05EA\u05D5\u05E6\u05D0\u05D5\u05EA \u05E1\u05D9\u05E0\u05D5\u05DF";
+    ExportButtonIcon = import_lucide_react8.Filter;
+  }
+  const handleExportCsv = async () => {
+    if (isExporting) return;
+    const systemFields = ["_id", "id", "createdAt", "updatedAt", "createdBy", "updatedBy", "orgId", "tableId"];
+    const userHiddenColumns = normalizedColumns.filter((c) => c.isHidden && !systemFields.includes(c.name)).map((c) => c.name);
+    if (userHiddenColumns.length > 0) {
+      addToast({
+        message: "\u05DE\u05D9\u05D9\u05E6\u05D0 \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD... \u05E9\u05D9\u05DD \u05DC\u05D1: \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA \u05DE\u05D5\u05E1\u05EA\u05E8\u05D5\u05EA \u05DC\u05D0 \u05D9\u05D9\u05DB\u05DC\u05DC\u05D5 \u05D1\u05E7\u05D5\u05D1\u05E5",
+        type: "info",
+        duration: 3e3
+      });
+    } else {
+      addToast({
+        message: "\u05DE\u05D9\u05D9\u05E6\u05D0 \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD...",
+        type: "info",
+        duration: 3e3
+      });
+    }
+    setIsExporting(true);
+    try {
+      const targetTableId = (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id);
+      if (!targetTableId) {
+        showError("\u05DE\u05D6\u05D4\u05D4 \u05D4\u05D8\u05D1\u05DC\u05D4 \u05D7\u05E1\u05E8 (tableId)", "\u05E9\u05D2\u05D9\u05D0\u05EA \u05D9\u05D9\u05E6\u05D5\u05D0");
+        return;
+      }
+      const payload = {
+        tableId: targetTableId,
+        orgId,
+        search: searchQuery.trim() || void 0,
+        columnFilters: Object.keys(columnFilters).length > 0 ? columnFilters : void 0,
+        selectedRowIds: hasSelectedRows ? Array.from(selectedIds) : [],
+        hiddenColumnIds: userHiddenColumns
+      };
+      let res;
+      if (exportAction) {
+        res = await exportAction(payload);
+      } else if (executeAction) {
+        res = await executeAction("EXPORT_TABLE_TO_CSV", payload);
+      } else {
+        throw new Error("\u05E8\u05DB\u05D9\u05D1 \u05D4\u05EA\u05E7\u05E9\u05D5\u05E8\u05EA \u05DC\u05D0 \u05D0\u05D5\u05EA\u05D7\u05DC");
+      }
+      const result = (res == null ? void 0 : res.data) || res;
+      if ((result == null ? void 0 : result.success) === false) {
+        throw new Error(result.error || "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D9\u05D9\u05E6\u05D5\u05D0 \u05D4\u05E0\u05EA\u05D5\u05E0\u05D9\u05DD");
+      }
+      const csvString = (result == null ? void 0 : result.csvString) || (result == null ? void 0 : result.csv);
+      if (!csvString) {
+        throw new Error("\u05DC\u05D0 \u05D4\u05EA\u05E7\u05D1\u05DC\u05D5 \u05E0\u05EA\u05D5\u05E0\u05D9 CSV \u05DE\u05D4\u05E9\u05E8\u05EA");
+      }
+      const fileName = (result == null ? void 0 : result.fileName) || `${((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name) || "table").trim()}_export.csv`;
+      const blob = new Blob([csvString], { type: "text/csv;charset=utf-8;" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.setAttribute("download", fileName);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("[TableBlock] Export to CSV failed:", err);
+      showError((err == null ? void 0 : err.message) || String(err), "\u05E9\u05D2\u05D9\u05D0\u05D4 \u05D1\u05D9\u05D9\u05E6\u05D5\u05D0 \u05D4\u05E0\u05EA\u05D5\u05E0\u05D9\u05DD");
+    } finally {
+      setIsExporting(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       id: componentId,
       "data-testid": dataTestId || (componentId ? `table-block-${componentId}` : void 0),
-      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs min-h-[350px] overflow-hidden ${className}`,
+      className: `flex flex-col w-full bg-white border border-slate-200 rounded-xl shadow-xs flex-1 min-h-0 overflow-hidden ${className}`,
       dir: "rtl",
       children: [
-        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4 h-4 text-rose-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: errorMessage })
+        errorMessage && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-3 bg-rose-50 border-b border-rose-200 text-rose-700 text-sm flex items-center justify-between shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4 text-rose-500 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: errorMessage })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 p-3.5 sm:p-4 bg-slate-50 border-b border-slate-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center gap-2.5", children: [
-            ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: schema.title || schema.name }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 p-3.5 sm:p-4 bg-slate-50 border-b border-slate-200 shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+            ((schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.name)) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "font-bold text-slate-800 text-sm sm:text-base border-l border-slate-300 pl-3 ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: schema.title || schema.name }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: handleAddRow,
                 disabled: isInitialLoading || isLoading || isUpdatingActive,
                 className: `w-9 h-9 text-white rounded-lg shadow-xs flex items-center justify-center transition-all ${isInitialLoading || isLoading || isUpdatingActive ? "bg-emerald-950/80 text-emerald-400/60 pointer-events-none cursor-not-allowed" : "bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 cursor-pointer"}`,
                 title: isInitialLoading ? "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." : "\u05D4\u05D5\u05E1\u05E3 \u05E9\u05D5\u05E8\u05D4 \u05D7\u05D3\u05E9\u05D4",
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4.5 h-4.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M12 4v16m8-8H4" }) })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: handleDuplicateRow,
                 disabled: isInitialLoading || isLoading || isUpdatingActive || selectedIds.size !== 1,
                 className: "w-9 h-9 bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-700 rounded-lg shadow-2xs flex items-center justify-center transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                 title: "\u05E9\u05DB\u05E4\u05DC \u05E9\u05D5\u05E8\u05D4 \u05E0\u05D1\u05D7\u05E8\u05EA",
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.Copy, { className: "w-4 h-4 text-blue-600 shrink-0" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
               "button",
               {
                 onClick: handleDeleteSelected,
@@ -4641,12 +5529,12 @@ function TableBlockClient({
                 className: "w-9 h-9 bg-rose-50 hover:bg-rose-100 border border-rose-200 text-rose-700 rounded-lg shadow-2xs flex items-center justify-center relative transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                 title: "\u05DE\u05D7\u05E7 \u05E9\u05D5\u05E8\u05D5\u05EA \u05E0\u05D1\u05D7\u05E8\u05D5\u05EA",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4.5 h-4.5 text-rose-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
-                  selectedIds.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "absolute -top-1.5 -right-1.5 bg-rose-600 text-white min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs", children: selectedIds.size })
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4.5 h-4.5 text-rose-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+                  selectedIds.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute -top-1.5 -right-1.5 bg-rose-600 text-white min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs", children: selectedIds.size })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
               "button",
               {
                 onClick: toggleSummary,
@@ -4654,13 +5542,13 @@ function TableBlockClient({
                 className: `h-9 px-3 border font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer ${showSummary ? "bg-indigo-50 border-indigo-200 text-indigo-700 hover:bg-indigo-100" : "bg-white border-slate-300 text-slate-700 hover:bg-slate-100"}`,
                 title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E9\u05D5\u05E8\u05EA \u05E1\u05D9\u05DB\u05D5\u05DD",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hidden sm:inline", children: "\u05E1\u05DB\u05D9\u05DE\u05D4" })
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "hidden sm:inline", children: "\u05E1\u05DB\u05D9\u05DE\u05D4" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 "button",
                 {
                   onClick: () => setIsColumnsDropdownOpen((prev) => !prev),
@@ -4668,16 +5556,16 @@ function TableBlockClient({
                   className: "h-9 px-3 bg-white hover:bg-slate-100 border border-slate-300 text-slate-700 font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer",
                   title: "\u05D4\u05E6\u05D2/\u05D4\u05E1\u05EA\u05E8 \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4 h-4 text-slate-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: `w-3.5 h-3.5 text-slate-500 transition-transform ${isColumnsDropdownOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4 text-slate-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: `w-3.5 h-3.5 text-slate-500 transition-transform ${isColumnsDropdownOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
                   ]
                 }
               ),
-              isColumnsDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-56 bg-white border border-slate-200 rounded-xl shadow-xl z-50 p-1.5 dir-rtl animate-in fade-in slide-in-from-top-2 duration-150", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "px-2 py-1.5 text-xs font-bold text-slate-500 border-b border-slate-100 mb-1 flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u05D4\u05E6\u05D2\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-[10px] font-normal text-slate-400", children: [
+              isColumnsDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute right-0 top-full mt-1.5 w-56 bg-white border border-slate-200 rounded-xl shadow-xl z-50 p-1.5 dir-rtl animate-in fade-in slide-in-from-top-2 duration-150", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "px-2 py-1.5 text-xs font-bold text-slate-500 border-b border-slate-100 mb-1 flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "\u05D4\u05E6\u05D2\u05EA \u05E2\u05DE\u05D5\u05D3\u05D5\u05EA" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-[10px] font-normal text-slate-400", children: [
                       "(",
                       customizableColumns.filter((c) => !c.isHidden).length,
                       "/",
@@ -4685,7 +5573,7 @@ function TableBlockClient({
                       ")"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "button",
                     {
                       type: "button",
@@ -4695,7 +5583,7 @@ function TableBlockClient({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-h-60 overflow-y-auto space-y-0.5", children: customizableColumns.map((col) => {
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "max-h-60 overflow-y-auto space-y-0.5", children: customizableColumns.map((col) => {
                   const isRequired = col.isRequired === true || String(col.isRequired) === "true";
                   const isUnique = col.isUnique === true || String(col.isUnique) === "true";
                   const isProtected = isRequired || isUnique;
@@ -4709,7 +5597,7 @@ function TableBlockClient({
                     protectedExplanation = "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9 - \u05DC\u05D0 \u05E0\u05D9\u05EA\u05DF \u05DC\u05D4\u05D5\u05E8\u05D9\u05D3 \u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5 \u05DE\u05D4\u05EA\u05E6\u05D5\u05D2\u05D4";
                   }
                   const badgeLabel = isRequired && isUnique ? "\u05D7\u05D5\u05D1\u05D4 + \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9" : isRequired ? "\u05E9\u05D3\u05D4 \u05D7\u05D5\u05D1\u05D4" : "\u05E9\u05D3\u05D4 \u05D9\u05D9\u05D7\u05D5\u05D3\u05D9";
-                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                     "div",
                     {
                       onClick: () => {
@@ -4720,8 +5608,8 @@ function TableBlockClient({
                       title: isProtected ? protectedExplanation : void 0,
                       className: `group flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition-colors select-none ${isProtected ? "opacity-75 bg-slate-50 border border-slate-100/70 cursor-not-allowed" : "hover:bg-slate-100 active:bg-slate-200 cursor-pointer"}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                             "input",
                             {
                               type: "checkbox",
@@ -4732,16 +5620,16 @@ function TableBlockClient({
                               className: "w-3.5 h-3.5 rounded border-slate-300 text-brand focus:ring-brand/20 cursor-pointer disabled:cursor-not-allowed disabled:opacity-60"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `font-medium truncate ${isProtected ? "text-slate-500" : "text-slate-700"}`, children: col.name })
                         ] }),
-                        isProtected && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                        isProtected && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                           "div",
                           {
                             className: "flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-50 text-amber-800 border border-amber-200/80 cursor-help",
                             title: protectedExplanation,
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-3 h-3 text-amber-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2.2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
-                              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: badgeLabel })
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-3 h-3 text-amber-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2.2", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
+                              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: badgeLabel })
                             ]
                           }
                         )
@@ -4752,9 +5640,23 @@ function TableBlockClient({
                 }) })
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "button",
+              {
+                onClick: handleExportCsv,
+                disabled: isLoading || isUpdatingActive || isExporting,
+                className: `h-9 px-3 font-semibold rounded-lg shadow-2xs flex items-center gap-1.5 text-xs transition-all disabled:opacity-40 disabled:pointer-events-none cursor-pointer border ${hasSelectedRows ? "bg-blue-50 hover:bg-blue-100 border-blue-200 text-blue-700" : hasActiveSearchOrFilter ? "bg-amber-50 hover:bg-amber-100 border-amber-200 text-amber-800" : "bg-white hover:bg-slate-100 border-slate-300 text-slate-700"}`,
+                title: exportButtonText,
+                "data-testid": "export-csv-button",
+                children: [
+                  isExporting ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.Loader2, { className: "w-4 h-4 shrink-0 animate-spin text-slate-500" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ExportButtonIcon, { className: "w-4 h-4 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: isExporting ? "\u05DE\u05D9\u05D9\u05E6\u05D0..." : exportButtonText })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "h-5 w-px bg-slate-300 mx-1 hidden sm:block" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex-1 sm:w-64 max-w-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "input",
                 {
                   placeholder: "\u05D7\u05D9\u05E4\u05D5\u05E9 \u05D1\u05E8\u05E9\u05D5\u05DE\u05D5\u05EA...",
@@ -4764,28 +5666,28 @@ function TableBlockClient({
                   className: "w-full h-9 px-3 pr-9 text-xs border border-slate-300 rounded-lg bg-white shadow-2xs focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 text-slate-800 disabled:opacity-50"
                 }
               ),
-              searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: () => setSearchQuery(""),
                   className: "absolute right-2.5 top-2.5 text-slate-400 hover:text-slate-600 transition-colors p-0.5 rounded-full hover:bg-slate-100 cursor-pointer",
                   title: "Clear search",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "w-3.5 h-3.5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.X, { className: "w-3.5 h-3.5" })
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4 h-4 text-slate-400 absolute right-2.5 top-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4 text-slate-400 absolute right-2.5 top-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
-            isUpdatingActive ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-blue-600 font-semibold flex items-center gap-1.5 bg-blue-50 border border-blue-200 px-3 py-1.5 rounded-lg animate-pulse", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-3", children: [
+            isUpdatingActive ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-xs text-blue-600 font-semibold flex items-center gap-1.5 bg-blue-50 border border-blue-200 px-3 py-1.5 rounded-lg animate-pulse", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
               "\u05DE\u05E2\u05D3\u05DB\u05DF..."
-            ] }) : isSaveSuccess ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-xs text-emerald-700 font-semibold flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-lg animate-in fade-in duration-200", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) }),
+            ] }) : isSaveSuccess ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-xs text-emerald-700 font-semibold flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-lg animate-in fade-in duration-200", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-4 h-4 text-emerald-600 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", d: "M5 13l4 4L19 7" }) }),
               "\u05E2\u05D5\u05D3\u05DB\u05DF \u05D1\u05D4\u05E6\u05DC\u05D7\u05D4"
-            ] }) : hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1.5 animate-in fade-in", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs font-semibold text-amber-700", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            ] }) : hasChanges ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5 animate-in fade-in", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs font-semibold text-amber-700", children: "\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "button",
                 {
                   type: "button",
@@ -4794,30 +5696,31 @@ function TableBlockClient({
                   className: "p-1 text-amber-700 hover:text-amber-900 hover:bg-amber-100/80 active:bg-amber-200/80 rounded-md transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none",
                   title: "\u05D1\u05D8\u05DC \u05D0\u05EA \u05DB\u05DC \u05D4\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5",
                   "aria-label": "\u05D1\u05D8\u05DC \u05D0\u05EA \u05DB\u05DC \u05D4\u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD \u05E9\u05DC\u05D0 \u05E0\u05E9\u05DE\u05E8\u05D5",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.RotateCcw, { className: "w-3.5 h-3.5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.RotateCcw, { className: "w-3.5 h-3.5" })
                 }
               )
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 onClick: handleSave,
                 disabled: isUpdatingActive || isLoading || !hasChanges,
                 className: `h-9 px-4 text-xs font-bold rounded-lg shadow-2xs transition-all flex items-center justify-center cursor-pointer ${hasChanges && !isUpdatingActive && !isLoading ? "bg-brand hover:bg-brand-hover active:bg-[#00897b] text-white shadow-teal-500/20" : "opacity-50 grayscale bg-slate-200 text-slate-400 cursor-not-allowed"}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: isUpdatingActive ? "\u05E9\u05D5\u05DE\u05E8..." : "\u05E9\u05DE\u05D9\u05E8\u05EA \u05E9\u05D9\u05E0\u05D5\u05D9\u05D9\u05DD" })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `overflow-x-auto relative min-h-[260px] flex-1 transition-opacity duration-200 ${isMounted ? "opacity-100" : "opacity-0"}`, children: [
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `overflow-x-auto overflow-y-auto relative max-h-[calc(100vh-240px)] min-h-[260px] flex-1 transition-opacity duration-200 ${isMounted ? "opacity-100" : "opacity-0"}`, children: [
+          isFetching && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 left-0 right-0 h-0.5 bg-blue-500/20 overflow-hidden z-30", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-full h-full bg-brand animate-pulse" }) }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-xs z-20 flex flex-col items-center justify-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-6 h-6 border-2 border-brand border-t-transparent rounded-full animate-spin" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-sm font-medium text-slate-600", children: "\u05D8\u05D5\u05E2\u05DF \u05E0\u05EA\u05D5\u05E0\u05D9\u05DD..." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { className: "w-full text-sm text-right border-collapse table-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { className: "bg-slate-100/80 text-slate-700 sticky top-0 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { className: "h-12 min-h-[48px]", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { className: "border-b border-l border-slate-200 p-1.5 text-center shrink-0 h-12 min-h-[48px] align-middle", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { className: "w-full text-sm text-right border-collapse table-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { className: "bg-white text-slate-700 sticky top-0 z-10 shadow-xs", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { className: "h-12 min-h-[48px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { className: "border-b border-l border-slate-200 p-1.5 text-center shrink-0 h-12 min-h-[48px] align-middle bg-white", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                   "input",
                   {
                     type: "checkbox",
@@ -4830,7 +5733,7 @@ function TableBlockClient({
                 filteredColumns.some((c) => {
                   var _a;
                   return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "SUB_TABLE";
-                }) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-5 h-5 shrink-0" })
+                }) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-5 h-5 shrink-0" })
               ] }) }),
               filteredColumns.map((col) => {
                 var _a, _b;
@@ -4841,16 +5744,25 @@ function TableBlockClient({
                 const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
                 const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
                 const isRelation = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) === "RELATION";
-                const filterVal = columnFilters[col.name] || "";
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                const filterVal = columnFilters[col.name];
+                const hasActiveFilter = Array.isArray(filterVal) ? filterVal.length > 0 : filterVal && typeof filterVal === "object" && "values" in filterVal ? filterVal.values.length > 0 : Boolean(filterVal && filterVal.trim() !== "");
+                let filterTooltip = "\u05D7\u05E4\u05E9 \u05D5\u05E1\u05E0\u05DF \u05D1\u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5";
+                if (Array.isArray(filterVal)) {
+                  filterTooltip = `\u05DE\u05E1\u05D5\u05E0\u05DF \u05DC\u05E4\u05D9: ${filterVal.length} \u05D0\u05E4\u05E9\u05E8\u05D5\u05D9\u05D5\u05EA \u05E0\u05D1\u05D7\u05E8\u05D5\u05EA`;
+                } else if (filterVal && typeof filterVal === "object" && "operator" in filterVal && filterVal.operator === "notIn") {
+                  filterTooltip = `\u05DE\u05D5\u05D7\u05E8\u05D2\u05D9\u05DD: ${filterVal.values.length} \u05E4\u05E8\u05D9\u05D8\u05D9\u05DD (\u05D4\u05DB\u05DC \u05DC\u05DE\u05E2\u05D8)`;
+                } else if (typeof filterVal === "string" && filterVal.trim()) {
+                  filterTooltip = `\u05DE\u05E1\u05D5\u05E0\u05DF \u05DC\u05E4\u05D9: "${filterVal}" (\u05DC\u05D7\u05E5 \u05DC\u05E2\u05E8\u05D9\u05DB\u05D4)`;
+                }
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                   "th",
                   __spreadProps(__spreadValues({
                     style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
                     title: isSearching ? void 0 : col.name
                   }, dragProps), {
-                    className: `relative border-b border-l border-slate-200 px-2.5 py-1.5 font-semibold text-slate-700 select-none transition-colors h-12 min-h-[48px] align-middle ${isSearching ? "cursor-default bg-blue-50/40" : "cursor-grab active:cursor-grabbing hover:bg-slate-200/60"} ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : ""}`,
+                    className: `group relative border-b border-l border-slate-200 px-2 py-1 font-semibold text-slate-700 select-none transition-colors h-12 min-h-[48px] align-middle bg-white ${isSearching ? "cursor-default bg-blue-50/40" : "cursor-grab active:cursor-grabbing hover:bg-slate-100"} ${isDragging ? "opacity-40 bg-slate-200 border-dashed border-2 border-brand" : ""} ${isDragOver ? "bg-blue-50 border-r-4 border-r-brand text-brand font-bold" : ""}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                         "div",
                         {
                           onMouseDown: (e) => {
@@ -4862,7 +5774,7 @@ function TableBlockClient({
                           title: "\u05E9\u05E0\u05D4 \u05D2\u05D5\u05D3\u05DC \u05E2\u05DE\u05D5\u05D3\u05D4"
                         }
                       ),
-                      isSearching ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      isSearching && !isRelation ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         "div",
                         {
                           ref: activeSearchRef,
@@ -4870,46 +5782,15 @@ function TableBlockClient({
                           onClick: (e) => e.stopPropagation(),
                           onMouseDown: (e) => e.stopPropagation(),
                           children: [
-                            isRelation ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative flex items-center w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-                              "select",
-                              {
-                                autoFocus: true,
-                                value: filterVal,
-                                onChange: (e) => {
-                                  const val = e.target.value;
-                                  setColumnFilters((prev) => {
-                                    const next = __spreadValues({}, prev);
-                                    if (val) next[col.name] = val;
-                                    else delete next[col.name];
-                                    return next;
-                                  });
-                                },
-                                onKeyDown: (e) => {
-                                  if (e.key === "Escape" || e.key === "Enter") {
-                                    setActiveSearchCol(null);
-                                  }
-                                },
-                                className: "h-7 text-xs px-1.5 w-full rounded border border-blue-400 bg-white text-slate-800 focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer truncate",
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", children: "\u05D4\u05DB\u05DC" }),
-                                  getUniqueRelationOptions(col).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt.label, children: opt.label }, opt.id))
-                                ]
-                              }
-                            ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "relative flex items-center w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "relative flex items-center w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                               "input",
                               {
                                 autoFocus: true,
                                 type: "text",
                                 placeholder: `\u05D7\u05E4\u05E9 \u05D1-${col.name}...`,
-                                value: filterVal,
+                                value: typeof filterVal === "string" ? filterVal : "",
                                 onChange: (e) => {
-                                  const val = e.target.value;
-                                  setColumnFilters((prev) => {
-                                    const next = __spreadValues({}, prev);
-                                    if (val) next[col.name] = val;
-                                    else delete next[col.name];
-                                    return next;
-                                  });
+                                  handleApplyColumnFilter(col.name, e.target.value);
                                 },
                                 onKeyDown: (e) => {
                                   if (e.key === "Escape" || e.key === "Enter") {
@@ -4919,7 +5800,7 @@ function TableBlockClient({
                                 className: "h-7 text-xs px-2 w-full rounded border border-blue-400 bg-white text-slate-800 focus:outline-none focus:ring-1 focus:ring-blue-400"
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -4929,59 +5810,60 @@ function TableBlockClient({
                                 },
                                 onClick: (e) => {
                                   e.stopPropagation();
-                                  setColumnFilters((prev) => {
-                                    const next = __spreadValues({}, prev);
-                                    delete next[col.name];
-                                    return next;
-                                  });
+                                  handleApplyColumnFilter(col.name, void 0);
                                   setActiveSearchCol(null);
                                 },
                                 className: "p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200/70 rounded transition-colors cursor-pointer shrink-0",
                                 title: "\u05E0\u05E7\u05D4 \u05D5\u05E1\u05D2\u05D5\u05E8 \u05D7\u05D9\u05E4\u05D5\u05E9",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.X, { className: "w-3.5 h-3.5" })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.X, { className: "w-3.5 h-3.5" })
                               }
                             )
                           ]
                         }
-                      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between gap-1.5 group overflow-hidden w-full", title: col.name, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-1.5 min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ColumnHeaderTitle, { name: col.name, width: currentWidth, isSubTable: false }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
-                          ((_b = col.type) == null ? void 0 : _b.toUpperCase()) !== "SUB_TABLE" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center justify-center w-full h-full min-w-0 select-none py-0.5", title: col.name, children: [
+                        ((_b = col.type) == null ? void 0 : _b.toUpperCase()) !== "SUB_TABLE" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          "button",
+                          {
+                            ref: (el) => {
+                              filterButtonRefs.current[col.name] = el;
+                            },
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              e.preventDefault();
+                              if (isRelation) {
+                                if (activeRelationCol === col.name) {
+                                  setActiveRelationCol(null);
+                                  setRelationTriggerRect(null);
+                                } else {
+                                  const btn = filterButtonRefs.current[col.name];
+                                  if (btn) {
+                                    setRelationTriggerRect(btn.getBoundingClientRect());
+                                  }
+                                  setActiveRelationCol(col.name);
+                                  fetchRelationFilterOptions(col.name);
+                                }
+                              } else {
                                 setActiveSearchCol(col.name);
-                              },
-                              className: `p-1 rounded transition-all cursor-pointer ${filterVal ? "opacity-100 text-blue-600 bg-blue-100 hover:bg-blue-200" : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-600 hover:bg-slate-200/60"}`,
-                              title: filterVal ? `\u05DE\u05E1\u05D5\u05E0\u05DF \u05DC\u05E4\u05D9: "${filterVal}" (\u05DC\u05D7\u05E5 \u05DC\u05E2\u05E8\u05D9\u05DB\u05D4)` : "\u05D7\u05E4\u05E9 \u05D5\u05E1\u05E0\u05DF \u05D1\u05E2\u05DE\u05D5\u05D3\u05D4 \u05D6\u05D5",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react7.Search, { className: "w-3.5 h-3.5" })
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                            "svg",
-                            {
-                              className: "w-3.5 h-3.5 text-slate-400 opacity-40 group-hover:opacity-100 transition-opacity shrink-0 cursor-grab",
-                              fill: "none",
-                              viewBox: "0 0 24 24",
-                              stroke: "currentColor",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M8 9h.01M8 15h.01M16 9h.01M16 15h.01" })
-                            }
-                          )
-                        ] })
+                              }
+                            },
+                            className: `p-0.5 rounded transition-colors cursor-pointer mb-0.5 shrink-0 ${hasActiveFilter ? "opacity-100 text-blue-600 bg-blue-100 hover:bg-blue-200" : activeRelationCol === col.name ? "opacity-100 text-blue-600 bg-blue-100" : "opacity-0 group-hover:opacity-100 text-slate-400 hover:text-slate-600 hover:bg-slate-200/60"}`,
+                            title: filterTooltip,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react8.Filter, { className: "w-3 h-3" })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ColumnHeaderTitle, { name: col.name, width: currentWidth, isSubTable: false })
                       ] })
                     ]
                   }),
                   col.name
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { className: "w-full min-w-[50px] border-b border-slate-200 pointer-events-none h-12 min-h-[48px]" })
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { className: "w-full min-w-[50px] border-b border-slate-200 pointer-events-none h-12 min-h-[48px] bg-white" })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: "bg-white", children: (isStateEmpty || filteredData.length === 0) && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { colSpan: filteredColumns.length + 2, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { className: `bg-white transition-opacity duration-150 ${isFetching ? "opacity-50 pointer-events-none" : "opacity-100"}`, children: (isStateEmpty || filteredData.length === 0) && !isLoading && !isFetching ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { colSpan: filteredColumns.length + 2, className: "text-center py-12 text-slate-400", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: "w-8 h-8 text-slate-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: "\u05D0\u05D9\u05DF \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05DC\u05D4\u05E6\u05D2\u05D4." })
             ] }) }) }) : filteredData.map((row) => {
               const hasSubTableCols = filteredColumns.some((c) => {
                 var _a;
@@ -4992,108 +5874,40 @@ function TableBlockClient({
                 var _a;
                 return ((_a = c.type) == null ? void 0 : _a.toUpperCase()) === "SUB_TABLE";
               });
-              return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.default.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { className: "hover:bg-blue-50/30 transition-colors group", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      "input",
-                      {
-                        type: "checkbox",
-                        checked: selectedIds.has(row.id),
-                        onChange: (e) => toggleSelectRow(row.id, e.target.checked),
-                        disabled: isLoading || isUpdatingActive,
-                        className: "w-4 h-4 rounded border-slate-300 text-brand"
-                      }
-                    ),
-                    hasSubTableCols && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => setExpandedRowIds((prev) => {
-                          const next = new Set(prev);
-                          if (next.has(row.id)) next.delete(row.id);
-                          else next.add(row.id);
-                          return next;
-                        }),
-                        className: "w-5 h-5 rounded-full bg-slate-500 hover:bg-slate-600 text-white flex items-center justify-center transition-colors cursor-pointer shrink-0 shadow-sm",
-                        title: isExpanded ? "\u05E1\u05D2\u05D5\u05E8 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4" : "\u05E4\u05EA\u05D7 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: `w-3 h-3 transition-transform duration-150 ${isExpanded ? "rotate-90" : "rotate-180"}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3", d: "M9 5l7 7-7 7" }) })
-                      }
-                    )
-                  ] }) }),
-                  filteredColumns.map((col) => {
-                    var _a;
-                    const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
-                    const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
-                    const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
-                    const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
-                    let value = (row == null ? void 0 : row.data) ? row.data[col.name] : void 0;
-                    if (value === void 0 && col.defaultValue !== void 0) {
-                      value = colType === "CURRENCY" || colType === "NUMBER" ? parseFloat(col.defaultValue) : col.defaultValue;
-                      if (colType === "CURRENCY" || colType === "NUMBER") {
-                        if (isNaN(value)) value = null;
-                      }
-                    }
-                    if (value === void 0) value = null;
-                    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                      "td",
-                      {
-                        className: `border-b border-l border-slate-200 p-0 relative ${colType === "RELATION" ? "overflow-visible" : "overflow-hidden"}`,
-                        style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                          InputComponent,
-                          {
-                            value,
-                            column: col,
-                            rowId: row.id,
-                            onChange: (v) => handleCellChange(row.id, col.name, v),
-                            context: {
-                              tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
-                              tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
-                              onMarkForDeletion: (fileId) => setPendingDeletions((prev) => [...prev, fileId]),
-                              relationOptions,
-                              refetchRelation,
-                              executeAction,
-                              emitEvent,
-                              pageState,
-                              componentId,
-                              orgId,
-                              updateQuietly: handleQuietCellChange,
-                              triggerSaveSuccess,
-                              rowData: row.data
-                            }
-                          }
-                        )
-                      },
-                      col.name
-                    );
-                  }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
-                ] }),
-                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                  ExpandedSubTables,
-                  {
-                    rowId: row.id,
-                    rowData: row.data,
-                    subTableColumns,
-                    filteredColumnsLength: filteredColumns.length,
-                    handleCellChange,
-                    context: {
-                      executeAction,
-                      orgId,
-                      parentTableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
-                      tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
-                      rowData: row.data,
-                      updateQuietly: handleQuietCellChange,
-                      triggerSaveSuccess,
-                      onUpdateColumnConfig: handleUpdateColumnConfig
-                    }
-                  }
-                )
-              ] }, row.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                TableRow,
+                {
+                  row,
+                  isSelected: selectedIds.has(row.id),
+                  isExpanded,
+                  filteredColumns,
+                  columnWidths,
+                  hasSubTableCols,
+                  subTableColumns,
+                  isLoading: isLoading || isFetching,
+                  isUpdatingActive,
+                  onToggleSelect: toggleSelectRow,
+                  onToggleExpand: handleToggleExpand,
+                  handleCellChange,
+                  handleQuietCellChange,
+                  handleUpdateColumnConfig,
+                  onMarkForDeletion: handleMarkForDeletion,
+                  triggerSaveSuccess,
+                  schema,
+                  orgId,
+                  componentId,
+                  pageState,
+                  relationOptions,
+                  relationDictionaryRef,
+                  refetchRelation,
+                  executeAction,
+                  emitEvent
+                },
+                row.id
+              );
             }) }),
-            showSummary && filteredData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tfoot", { className: "bg-slate-50 border-t-2 border-slate-300 sticky bottom-0 z-10 shadow-[0_-2px_4px_rgba(0,0,0,0.02)]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center font-bold text-slate-600 text-xs", children: '\u05E1\u05D4"\u05DB' }),
+            showSummary && filteredData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tfoot", { className: "bg-slate-50 border-t-2 border-slate-300 sticky bottom-0 z-10 shadow-[0_-2px_4px_rgba(0,0,0,0.02)]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center font-bold text-slate-600 text-xs", children: '\u05E1\u05D4"\u05DB' }),
               filteredColumns.map((col) => {
                 var _a, _b;
                 const typeUpper = (_a = col.type) == null ? void 0 : _a.toUpperCase();
@@ -5107,16 +5921,16 @@ function TableBlockClient({
                     displayVal = symbol ? `${symbol} ${displayVal}` : displayVal;
                   }
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "border-b border-l border-slate-200 p-2 text-sm font-semibold text-slate-700 bg-slate-50 relative", children: isNumeric && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center text-right justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate", children: displayVal }) }) }, col.name);
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-l border-slate-200 p-2 text-sm font-semibold text-slate-700 bg-slate-50 relative", children: isNumeric && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center text-right justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate", children: displayVal }) }) }, col.name);
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: "border-b border-slate-200 bg-slate-50 pointer-events-none" })
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-slate-200 bg-slate-50 pointer-events-none" })
             ] }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 bg-slate-50 border-t border-slate-200 text-xs text-slate-600 rounded-b-xl", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium text-slate-700", children: "\u05E9\u05D5\u05E8\u05D5\u05EA \u05DC\u05E2\u05DE\u05D5\u05D3:" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 px-4 py-3 bg-slate-50 border-t border-slate-200 text-xs text-slate-600 rounded-b-xl shrink-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium text-slate-700", children: "\u05E9\u05D5\u05E8\u05D5\u05EA \u05DC\u05E2\u05DE\u05D5\u05D3:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
               "select",
               {
                 value: limit,
@@ -5124,27 +5938,27 @@ function TableBlockClient({
                 disabled: isLoading || isUpdatingActive,
                 className: "bg-white border border-slate-300 rounded-lg px-2.5 py-1 text-slate-700 font-semibold shadow-2xs cursor-pointer focus:outline-none focus:ring-2 focus:ring-brand disabled:opacity-50",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: 20, children: "20" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: 50, children: "50" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: 100, children: "100" })
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: 20, children: "20" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: 50, children: "50" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: 100, children: "100" })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "font-medium text-slate-600", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "font-medium text-slate-600", children: [
               "\u05E2\u05DE\u05D5\u05D3 ",
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { className: "text-slate-900", children: page }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { className: "text-slate-900", children: page }),
               " \u05DE\u05EA\u05D5\u05DA ",
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { className: "text-slate-900", children: totalPages || 1 }),
-              totalRecords > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "text-slate-500 font-normal", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { className: "text-slate-900", children: totalPages || 1 }),
+              totalRecords > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-slate-500 font-normal", children: [
                 " (",
                 totalRecords,
                 ' \u05E8\u05E9\u05D5\u05DE\u05D5\u05EA \u05D1\u05E1\u05D4"\u05DB)'
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "button",
                 {
                   onClick: handlePrevPage,
@@ -5154,7 +5968,7 @@ function TableBlockClient({
                   children: "\u05D4\u05E7\u05D5\u05D3\u05DD"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "button",
                 {
                   onClick: handleNextPage,
@@ -5166,7 +5980,31 @@ function TableBlockClient({
               )
             ] })
           ] })
-        ] })
+        ] }),
+        activeRelationCol && (() => {
+          const activeColDef = filteredColumns.find((c) => c.name === activeRelationCol);
+          if (!activeColDef) return null;
+          const rawSelected = columnFilters[activeRelationCol];
+          const currentSelected = typeof rawSelected === "object" && rawSelected !== null ? rawSelected : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            RelationFilterPopover,
+            {
+              isOpen: Boolean(activeRelationCol),
+              onClose: () => {
+                setActiveRelationCol(null);
+                setRelationTriggerRect(null);
+              },
+              column: activeColDef,
+              triggerRect: relationTriggerRect,
+              options: getUniqueRelationOptions(activeColDef),
+              filterValue: currentSelected,
+              onSelectionChange: (newSelected) => {
+                handleApplyColumnFilter(activeRelationCol, newSelected);
+              },
+              isLoading: loadingFilterCol === activeRelationCol
+            }
+          );
+        })()
       ]
     }
   );
@@ -5180,11 +6018,11 @@ function ExpandedSubTables({
   context
 }) {
   var _a;
-  const [activeTab, setActiveTab] = (0, import_react12.useState)((_a = subTableColumns[0]) == null ? void 0 : _a.name);
+  const [activeTab, setActiveTab] = (0, import_react14.useState)((_a = subTableColumns[0]) == null ? void 0 : _a.name);
   if (subTableColumns.length === 0) return null;
   if (subTableColumns.length === 1) {
     const stCol = subTableColumns[0];
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       SubTableViewer,
       {
         rowId,
@@ -5196,8 +6034,8 @@ function ExpandedSubTables({
     ) }) });
   }
   const activeCol = subTableColumns.find((c) => c.name === activeTab) || subTableColumns[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50 overflow-hidden", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex border-b border-slate-200 bg-slate-100/50 px-2 pt-2 gap-1 overflow-hidden", children: subTableColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("td", { colSpan: filteredColumnsLength + 2, className: "p-0 border-b border-slate-200 bg-slate-50/50 overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex border-b border-slate-200 bg-slate-100/50 px-2 pt-2 gap-1 overflow-hidden", children: subTableColumns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         type: "button",
@@ -5207,7 +6045,7 @@ function ExpandedSubTables({
       },
       col.name
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       SubTableViewer,
       {
         rowId,
@@ -5220,11 +6058,134 @@ function ExpandedSubTables({
     ) })
   ] }) });
 }
+var TableRow = import_react14.default.memo(function TableRow2({
+  row,
+  isSelected,
+  isExpanded,
+  filteredColumns,
+  columnWidths,
+  hasSubTableCols,
+  subTableColumns,
+  isLoading,
+  isUpdatingActive,
+  onToggleSelect,
+  onToggleExpand,
+  handleCellChange,
+  handleQuietCellChange,
+  handleUpdateColumnConfig,
+  onMarkForDeletion,
+  triggerSaveSuccess,
+  schema,
+  orgId,
+  componentId,
+  pageState,
+  relationOptions,
+  relationDictionaryRef,
+  refetchRelation,
+  executeAction,
+  emitEvent
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react14.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { className: `hover:bg-blue-50/30 transition-colors group ${isSelected ? "bg-blue-50/40" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-l border-slate-200 p-1.5 text-center bg-white group-hover:bg-transparent", style: { width: 72, minWidth: 72, maxWidth: 72 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: isSelected,
+            onChange: (e) => onToggleSelect(row.id, e.target.checked),
+            disabled: isLoading || isUpdatingActive,
+            className: "w-4 h-4 rounded border-slate-300 text-brand"
+          }
+        ),
+        hasSubTableCols && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onToggleExpand(row.id),
+            className: "w-5 h-5 rounded-full bg-slate-500 hover:bg-slate-600 text-white flex items-center justify-center transition-colors cursor-pointer shrink-0 shadow-sm",
+            title: isExpanded ? "\u05E1\u05D2\u05D5\u05E8 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4" : "\u05E4\u05EA\u05D7 \u05EA\u05EA-\u05D8\u05D1\u05DC\u05D4",
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { className: `w-3 h-3 transition-transform duration-150 ${isExpanded ? "rotate-90" : "rotate-180"}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3", d: "M9 5l7 7-7 7" }) })
+          }
+        )
+      ] }) }),
+      filteredColumns.map((col) => {
+        var _a;
+        const colType = ((_a = col.type) == null ? void 0 : _a.toUpperCase()) || "DEFAULT";
+        const InputComponent = FORM_INPUTS[colType] || FORM_INPUTS.DEFAULT;
+        const colMinWidth = calculateMinColumnWidth(col.name, false, col.type);
+        const currentWidth = Math.max(colMinWidth, columnWidths[col.name] || 200);
+        let value = (row == null ? void 0 : row.data) ? row.data[col.name] : void 0;
+        if (value === void 0 && col.defaultValue !== void 0) {
+          value = colType === "CURRENCY" || colType === "NUMBER" ? parseFloat(col.defaultValue) : col.defaultValue;
+          if (colType === "CURRENCY" || colType === "NUMBER") {
+            if (isNaN(value)) value = null;
+          }
+        }
+        if (value === void 0) value = null;
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "td",
+          {
+            className: `border-b border-l border-slate-200 p-0 relative ${colType === "RELATION" ? "overflow-visible" : "overflow-hidden"}`,
+            style: { width: currentWidth, minWidth: currentWidth, maxWidth: currentWidth },
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              InputComponent,
+              {
+                value,
+                column: col,
+                rowId: row.id,
+                onChange: (v) => handleCellChange(row.id, col.name, v),
+                context: {
+                  tableName: (schema == null ? void 0 : schema.name) || (schema == null ? void 0 : schema.tableName) || (schema == null ? void 0 : schema.title) || (schema == null ? void 0 : schema.id) || "Table",
+                  tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+                  onMarkForDeletion,
+                  relationOptions,
+                  relationDictionaryRef,
+                  refetchRelation,
+                  executeAction,
+                  emitEvent,
+                  pageState,
+                  componentId,
+                  orgId,
+                  updateQuietly: handleQuietCellChange,
+                  triggerSaveSuccess,
+                  rowData: row.data
+                }
+              }
+            )
+          },
+          col.name
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { className: "border-b border-slate-200 bg-white pointer-events-none" })
+    ] }),
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ExpandedSubTables,
+      {
+        rowId: row.id,
+        rowData: row.data,
+        subTableColumns,
+        filteredColumnsLength: filteredColumns.length,
+        handleCellChange,
+        context: {
+          executeAction,
+          orgId,
+          parentTableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+          tableId: (schema == null ? void 0 : schema.tableMetaId) || (schema == null ? void 0 : schema.tableId) || (schema == null ? void 0 : schema.id),
+          rowData: row.data,
+          updateQuietly: handleQuietCellChange,
+          triggerSaveSuccess,
+          onUpdateColumnConfig: handleUpdateColumnConfig
+        }
+      }
+    )
+  ] });
+});
 
 // src/components/TableBlock/TableBlock.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function TableBlock(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TableBlockClient, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TableBlockClient, __spreadValues({}, props));
 }
 
 // src/registry.ts
@@ -5241,6 +6202,7 @@ var UNIVERSE_COMPONENTS = {
   DatePickerCell,
   LinkPickerCell,
   PASTEL_PALETTES,
+  RelationFilterPopover,
   RelationPickerCell,
   TEXT_REPRESENTABLE_TYPES,
   TableBlock,