@juv/codego-react-ui 3.4.8 → 3.5.0

package/dist/index.cjs

@@ -6480,7 +6480,7 @@ var import_react_dom2 = require("react-dom");
 var import_axios3 = __toESM(require("axios"), 1);
 var import_lucide_react17 = require("lucide-react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError }) {
+function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce = 300, transform, manual = false, refresh: refreshEnabled = false, refreshInterval = 0, hardReload, onSuccess, onError, filter: filterFields, sort: sortKeys }) {
   const [data, setData] = React28.useState([]);
   const [columns, setColumns] = React28.useState([]);
   const [currentPage, setCurrentPage] = React28.useState(1);
@@ -6490,6 +6490,15 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
   const [tick, setTick] = React28.useState(0);
   const [searchValue, setSearchValue] = React28.useState("");
   const debounceTimer = React28.useRef(void 0);
+  const [filterValues, setFilterValues] = React28.useState(() => {
+    const init = {};
+    filterFields?.forEach((f) => {
+      init[f.key] = f.type === "checkbox" || f.type === "toggle" ? false : "";
+    });
+    return init;
+  });
+  const [sortKey, setSortKey] = React28.useState("");
+  const [sortDir, setSortDir] = React28.useState("asc");
   React28.useEffect(() => {
     if (hardReload) hardReload.current = () => setTick((t) => t + 1);
   }, [hardReload]);
@@ -6498,13 +6507,32 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     const id = setInterval(() => setTick((t) => t + 1), refreshInterval);
     return () => clearInterval(id);
   }, [refreshInterval]);
+  const activeFilterParams = React28.useMemo(() => {
+    const out = {};
+    filterFields?.forEach((f) => {
+      const v = filterValues[f.key];
+      if (f.type === "checkbox" || f.type === "toggle") {
+        if (v) out[f.key] = 1;
+      } else if (f.type === "date-range") {
+        if (v?.from) out[`${f.key}_from`] = v.from;
+        if (v?.to) out[`${f.key}_to`] = v.to;
+      } else if (v !== "" && v !== null && v !== void 0) {
+        out[f.key] = v;
+      }
+    });
+    if (sortKey) {
+      out.sort = sortKey;
+      out.direction = sortDir;
+    }
+    return out;
+  }, [filterValues, sortKey, sortDir, filterFields]);
   React28.useEffect(() => {
     if (manual && tick === 0) return;
     let cancelled = false;
     setLoading(true);
     setError(null);
     import_axios3.default.get(url, {
-      params: { ...params, page: currentPage, search: searchValue }
+      params: { ...params, ...activeFilterParams, page: currentPage, search: searchValue }
     }).then(({ data: res }) => {
       if (cancelled) return;
       const payload = encrypt ? decryptLaravelPayload(res, key) : res;
@@ -6550,15 +6578,184 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     return () => {
       cancelled = true;
     };
-  }, [url, currentPage, tick, JSON.stringify(params), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
+  }, [url, currentPage, tick, JSON.stringify(params), JSON.stringify(activeFilterParams), encrypt, decryptPayloadLog, JSON.stringify(columnOverrides), searchValue]);
   const handleSearchChange = (value) => {
     setSearchValue(value);
     setCurrentPage(1);
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    debounceTimer.current = setTimeout(() => {
-      setTick((t) => t + 1);
-    }, debounce);
+    debounceTimer.current = setTimeout(() => setTick((t) => t + 1), debounce);
+  };
+  const handleFilterChange = (key2, value) => {
+    setFilterValues((prev) => ({ ...prev, [key2]: value }));
+    setCurrentPage(1);
+    setTick((t) => t + 1);
+  };
+  const handleClearFilters = () => {
+    const reset = {};
+    filterFields?.forEach((f) => {
+      reset[f.key] = f.type === "checkbox" || f.type === "toggle" ? false : "";
+    });
+    setFilterValues(reset);
+    setSortKey("");
+    setSortDir("asc");
+    setCurrentPage(1);
+    setTick((t) => t + 1);
   };
+  const hasActiveFilters = filterFields?.some((f) => {
+    const v = filterValues[f.key];
+    return f.type === "checkbox" || f.type === "toggle" ? !!v : v !== "" && v !== null && v !== void 0;
+  }) || !!sortKey;
+  const filterBar = filterFields?.length || sortKeys?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-wrap items-end gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3", children: [
+    filterFields?.map((f) => {
+      const label = f.label ?? f.key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+      const value = filterValues[f.key];
+      const opts = (f.options ?? []).map(
+        (o) => typeof o === "string" ? { label: o, value: o } : o
+      );
+      if (f.type === "checkbox") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: !!value,
+            onChange: (e) => handleFilterChange(f.key, e.target.checked),
+            className: "h-4 w-4 rounded accent-primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium text-foreground", children: label })
+      ] }, f.key);
+      if (f.type === "toggle") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": !!value,
+            onClick: () => handleFilterChange(f.key, !value),
+            className: cn(
+              "relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors",
+              value ? "bg-primary" : "bg-muted"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cn(
+              "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform",
+              value ? "translate-x-4" : "translate-x-0"
+            ) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs font-medium text-foreground", children: label })
+      ] }, f.key);
+      if (f.type === "select") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "select",
+          {
+            value: value ?? "",
+            onChange: (e) => handleFilterChange(f.key, e.target.value),
+            className: "h-8 min-w-[120px] rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: "", children: f.placeholder ?? `All ${label}` }),
+              opts.map((o) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: o.value, children: o.label }, o.value))
+            ]
+          }
+        )
+      ] }, f.key);
+      if (f.type === "date" || f.type === "date-time") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "input",
+          {
+            type: f.type === "date-time" ? "datetime-local" : "date",
+            value: value ?? "",
+            onChange: (e) => handleFilterChange(f.key, e.target.value),
+            className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+          }
+        )
+      ] }, f.key);
+      if (f.type === "date-range") return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: "date",
+              value: value?.from ?? "",
+              onChange: (e) => handleFilterChange(f.key, { ...value, from: e.target.value }),
+              className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-xs text-muted-foreground", children: "\u2013" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "input",
+            {
+              type: "date",
+              value: value?.to ?? "",
+              onChange: (e) => handleFilterChange(f.key, { ...value, to: e.target.value }),
+              className: "h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+            }
+          )
+        ] })
+      ] }, f.key);
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "input",
+          {
+            type: "text",
+            value: value ?? "",
+            placeholder: f.placeholder ?? `Filter ${label}\u2026`,
+            onChange: (e) => handleFilterChange(f.key, e.target.value),
+            className: "h-8 min-w-[140px] rounded-lg border border-border bg-background px-3 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+          }
+        )
+      ] }, f.key);
+    }),
+    sortKeys?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Sort by" }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "select",
+          {
+            value: sortKey,
+            onChange: (e) => {
+              setSortKey(e.target.value);
+              setCurrentPage(1);
+              setTick((t) => t + 1);
+            },
+            className: "h-8 min-w-[120px] rounded-lg border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: "", children: "Default" }),
+              sortKeys.map((k) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("option", { value: k, children: k.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) }, k))
+            ]
+          }
+        ),
+        sortKey && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setSortDir((d) => d === "asc" ? "desc" : "asc");
+              setTick((t) => t + 1);
+            },
+            className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+            title: sortDir === "asc" ? "Ascending" : "Descending",
+            children: sortDir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.ChevronDown, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] })
+    ] }) : null,
+    hasActiveFilters && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: handleClearFilters,
+        className: "flex h-8 items-center gap-1.5 self-end rounded-lg border border-border bg-background px-3 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.X, { className: "h-3 w-3" }),
+          " Clear"
+        ]
+      }
+    )
+  ] }) : null;
   return {
     data,
     columns,
@@ -6567,6 +6764,7 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     serverPagination: pagination ? { pagination, currentPage, goToPage: (page) => setCurrentPage(page) } : null,
     loading,
     error,
+    filterBar,
     goToPage: (page) => setCurrentPage(page),
     reload: () => setTick((t) => t + 1),
     refresh: () => setTick((t) => t + 1),
@@ -7276,6 +7474,9 @@ function Table({
   renderExpanded,
   columnVisibility,
   onColumnVisibilityChange,
+  columnVisibilityIcon,
+  filterBar,
+  filterableIcon,
   exportable = false,
   onExport,
   virtualized = false,
@@ -7296,6 +7497,8 @@ function Table({
   const [sortKey, setSortKey] = React28.useState(null);
   const [sortDir, setSortDir] = React28.useState(null);
   const [bulkLoading, setBulkLoading] = React28.useState(false);
+  const [bulkConfirm, setBulkConfirm] = React28.useState(null);
+  const [filterBarOpen, setFilterBarOpen] = React28.useState(false);
   const [expandedIds, setExpandedIds] = React28.useState(/* @__PURE__ */ new Set());
   const [dragOverId, setDragOverId] = React28.useState(null);
   const [focusedRowIdx, setFocusedRowIdx] = React28.useState(-1);
@@ -7432,7 +7635,7 @@ function Table({
   const unselectedCount = totalRows - selectedIds.length;
   const handleSelectAllRecords = () => setSelectedIds(filteredData.map((item) => String(item[idKey])));
   const handleUnselectAll = () => setSelectedIds([]);
-  const handleBulkDeleteSelected = async () => {
+  const execBulkDeleteSelected = async () => {
     if (!bulkDeleteBaseUrl || selectedIds.length === 0) {
       onBulkDelete?.(selectedIds);
       setSelectedIds([]);
@@ -7454,7 +7657,7 @@ function Table({
       setBulkLoading(false);
     }
   };
-  const handleDeleteAll = async () => {
+  const execDeleteAll = async () => {
     if (!bulkDeleteBaseUrl) return;
     setBulkLoading(true);
     try {
@@ -7521,10 +7724,22 @@ function Table({
                 ]
               }
             ),
+            unselectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              "button",
+              {
+                onClick: handleSelectAllRecords,
+                disabled: bulkLoading,
+                className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors disabled:opacity-40",
+                children: [
+                  "Select all ",
+                  unselectedCount
+                ]
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
               "button",
               {
-                onClick: handleBulkDeleteSelected,
+                onClick: () => setBulkConfirm("selected"),
                 disabled: bulkLoading,
                 className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
                 children: [
@@ -7534,30 +7749,29 @@ function Table({
                   " selected"
                 ]
               }
+            ),
+            bulkDeleteBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              "button",
+              {
+                onClick: () => setBulkConfirm("all"),
+                disabled: bulkLoading,
+                className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
+                children: [
+                  bulkLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Trash2, { className: "h-3.5 w-3.5" }),
+                  "Delete all"
+                ]
+              }
             )
           ] }),
-          selectable && unselectedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-            "button",
-            {
-              onClick: handleSelectAllRecords,
-              disabled: bulkLoading,
-              className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors disabled:opacity-40",
-              children: [
-                "Select all ",
-                unselectedCount
-              ]
-            }
-          ),
-          selectable && bulkDeleteBaseUrl && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          filterBar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "button",
             {
-              onClick: handleDeleteAll,
-              disabled: bulkLoading,
-              className: "inline-flex items-center gap-1.5 rounded-lg bg-danger/10 border border-danger/20 px-3 py-1.5 text-xs font-medium text-danger hover:bg-danger/20 transition-colors disabled:opacity-40",
-              children: [
-                bulkLoading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Trash2, { className: "h-3.5 w-3.5" }),
-                "Delete all"
-              ]
+              onClick: () => setFilterBarOpen((o) => !o),
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
+                filterBarOpen ? "border-primary bg-primary/10 text-primary hover:bg-primary/20" : "border-border bg-muted/50 text-muted-foreground hover:bg-muted"
+              ),
+              children: filterableIcon ?? "Filter"
             }
           ),
           exportable && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative group", children: [
@@ -7573,7 +7787,7 @@ function Table({
             )) })
           ] }),
           columnVisibility && onColumnVisibilityChange && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative group", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: "Columns" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: "inline-flex items-center gap-1.5 rounded-lg border border-border bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-muted transition-colors", children: columnVisibilityIcon ?? "Columns" }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute right-0 top-full mt-1 z-20 hidden group-hover:flex flex-col min-w-[150px] rounded-xl border border-border bg-card shadow-lg overflow-hidden p-2 gap-1", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-muted cursor-pointer text-xs", children: [
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 "input",
@@ -7595,6 +7809,7 @@ function Table({
           ] })
         ] })
       ] }),
+      filterBar && filterBarOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: filterBar }),
       loading && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-center py-12 text-muted-foreground gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Loader2, { className: "h-5 w-5 animate-spin" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-sm", children: "Loading\u2026" })
@@ -7988,6 +8203,37 @@ function Table({
           }
         }
       }
+    ),
+    bulkConfirm && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+          style: { background: "rgba(0,0,0,0.5)" },
+          onMouseDown: (e) => {
+            if (e.target === e.currentTarget) setBulkConfirm(null);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-base font-semibold", children: "Confirm Delete" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: () => setBulkConfirm(null), className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.X, { className: "h-4 w-4" }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-6 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-muted-foreground", children: bulkConfirm === "selected" ? `Are you sure you want to delete ${selectedIds.length} selected record${selectedIds.length !== 1 ? "s" : ""}? This action cannot be undone.` : "Are you sure you want to delete all records? This action cannot be undone." }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "px-6 py-4 border-t border-border flex justify-end gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: () => setBulkConfirm(null), disabled: bulkLoading, children: "Cancel" }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { variant: "danger", size: "sm", disabled: bulkLoading, onClick: async () => {
+                if (bulkConfirm === "selected") await execBulkDeleteSelected();
+                else await execDeleteAll();
+                setBulkConfirm(null);
+              }, children: [
+                bulkLoading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.Loader2, { className: "h-3.5 w-3.5 mr-1.5 animate-spin" }),
+                bulkLoading ? "Deleting\u2026" : "Delete"
+              ] })
+            ] })
+          ] })
+        }
+      ),
+      document.body
     )
   ] });
 }

package/dist/index.d.cts

@@ -293,6 +293,17 @@ interface UseServerTableOptions {
     onSuccess?: (data: any[]) => void;
     /** Called on fetch error */
     onError?: (error: Error) => void;
+    /**
+     * Filter fields rendered above the table.
+     * Each field appends its value as a query param on every request.
+     * Supported types: "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range"
+     */
+    filter?: ServerTableFilterField[];
+    /**
+     * Sortable column keys. Renders a sort dropdown above the table.
+     * Appends sort=key&direction=asc|desc to every request.
+     */
+    sort?: string[];
 }
 /**
  * Return type from the useServerTable hook
@@ -310,6 +321,8 @@ interface UseServerTableReturn<T> {
     goToPage: (page: number) => void;
     reload: () => void;
     refresh: () => void;
+    /** Rendered filter + sort bar — place above <Table /> */
+    filterBar: React.ReactNode;
     searchValue: string;
     onSearchChange: (value: string) => void;
     page: number;
@@ -354,6 +367,18 @@ interface ServerPaginationProp {
     currentPage: number;
     goToPage: (page: number) => void;
 }
+type ServerTableFilterType = "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range";
+interface ServerTableFilterField {
+    key: string;
+    type: ServerTableFilterType;
+    label?: string;
+    placeholder?: string;
+    /** Options for type="select" */
+    options?: string[] | {
+        label: string;
+        value: string;
+    }[];
+}
 /**
  * Custom hook for fetching and managing server-side paginated table data.
  * Supports Laravel encryption, auto-column derivation, and flexible pagination.
@@ -370,7 +395,7 @@ interface ServerPaginationProp {
  * })
  * ```
  */
-declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
+declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError, filter: filterFields, sort: sortKeys }: UseServerTableOptions): UseServerTableReturn<T>;
 /**
  * Available field types for action forms (edit/view modals)
  * @type {ActionFieldType}
@@ -713,6 +738,12 @@ interface TableProps<T> {
      * - `"soft"` — neumorphic soft shadows, no hard borders
      */
     variant?: "default" | "zebra" | "card" | "glass" | "soft";
+    /** Custom icon for the column visibility toggle button. When provided, hides the "Columns" text label. */
+    columnVisibilityIcon?: React.ReactElement;
+    /** Filter bar node (e.g. from useServerTable's filterBar). Rendered below the toolbar when visible. */
+    filterBar?: React.ReactNode;
+    /** Custom icon for the filter toggle button. When provided, hides the "Filter" text label. */
+    filterableIcon?: React.ReactElement;
     className?: string;
 }
 /**
@@ -742,7 +773,7 @@ interface TableProps<T> {
  * />
  * ```
  */
-declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, columnVisibilityIcon, filterBar, filterableIcon, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type BulletinPriority = "low" | "medium" | "high" | "urgent";
 type BulletinLayout = "grid" | "list" | "masonry";

package/dist/index.d.ts

@@ -293,6 +293,17 @@ interface UseServerTableOptions {
     onSuccess?: (data: any[]) => void;
     /** Called on fetch error */
     onError?: (error: Error) => void;
+    /**
+     * Filter fields rendered above the table.
+     * Each field appends its value as a query param on every request.
+     * Supported types: "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range"
+     */
+    filter?: ServerTableFilterField[];
+    /**
+     * Sortable column keys. Renders a sort dropdown above the table.
+     * Appends sort=key&direction=asc|desc to every request.
+     */
+    sort?: string[];
 }
 /**
  * Return type from the useServerTable hook
@@ -310,6 +321,8 @@ interface UseServerTableReturn<T> {
     goToPage: (page: number) => void;
     reload: () => void;
     refresh: () => void;
+    /** Rendered filter + sort bar — place above <Table /> */
+    filterBar: React.ReactNode;
     searchValue: string;
     onSearchChange: (value: string) => void;
     page: number;
@@ -354,6 +367,18 @@ interface ServerPaginationProp {
     currentPage: number;
     goToPage: (page: number) => void;
 }
+type ServerTableFilterType = "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range";
+interface ServerTableFilterField {
+    key: string;
+    type: ServerTableFilterType;
+    label?: string;
+    placeholder?: string;
+    /** Options for type="select" */
+    options?: string[] | {
+        label: string;
+        value: string;
+    }[];
+}
 /**
  * Custom hook for fetching and managing server-side paginated table data.
  * Supports Laravel encryption, auto-column derivation, and flexible pagination.
@@ -370,7 +395,7 @@ interface ServerPaginationProp {
  * })
  * ```
  */
-declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
+declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError, filter: filterFields, sort: sortKeys }: UseServerTableOptions): UseServerTableReturn<T>;
 /**
  * Available field types for action forms (edit/view modals)
  * @type {ActionFieldType}
@@ -713,6 +738,12 @@ interface TableProps<T> {
      * - `"soft"` — neumorphic soft shadows, no hard borders
      */
     variant?: "default" | "zebra" | "card" | "glass" | "soft";
+    /** Custom icon for the column visibility toggle button. When provided, hides the "Columns" text label. */
+    columnVisibilityIcon?: React.ReactElement;
+    /** Filter bar node (e.g. from useServerTable's filterBar). Rendered below the toolbar when visible. */
+    filterBar?: React.ReactNode;
+    /** Custom icon for the filter toggle button. When provided, hides the "Filter" text label. */
+    filterableIcon?: React.ReactElement;
     className?: string;
 }
 /**
@@ -742,7 +773,7 @@ interface TableProps<T> {
  * />
  * ```
  */
-declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, columnVisibilityIcon, filterBar, filterableIcon, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 type BulletinPriority = "low" | "medium" | "high" | "urgent";
 type BulletinLayout = "grid" | "list" | "masonry";