@moontra/moonui-pro 2.25.7 → 2.25.9

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useMemo, useCallback, useRef, useEffect, forwardRef, createContext, useContext, useLayoutEffect, useDebugValue, Component } from 'react';
 import * as AccordionPrimitive2 from '@radix-ui/react-accordion';
-import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, BarChart3, Menu, Bell, CheckCheck, CheckCircle, Palette, User, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Phone, Globe, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code as Code$1, Link as Link$1, Undo, Redo, Edit, GripVertical, Type, Heading1, Heading2, Heading3, CheckSquare, Highlighter, Link2, Table as Table$1, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Languages, Lightbulb, MoreVertical, TrendingUp, Activity, BellOff, Target, ArrowUpRight, ArrowDownRight, CalendarIcon, MapPin, Navigation, ArrowUp, ArrowDown, ArrowUpDown, Calendar as Calendar$1, DollarSign, Users, Map as Map$1, Music, Archive, File, FileSpreadsheet, FileJson, FileDown, ChevronsLeft, ChevronsRight, Star, Shield, Award, Gem, Flame, Repeat, Move, EyeOff, Timer, Square, Cpu, GitBranch, ArrowRight, Trash, MessageCircle, Paperclip, Printer, TrendingDown, Grip, Unlock, Github, Server, Monitor, MemoryStick, HardDrive, Network, Columns, Pin, Sun, Moon, Send, Tag, Flag, Trophy, GitFork, Package } from 'lucide-react';
+import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, BarChart3, Menu, Bell, CheckCheck, CheckCircle, Palette, User, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Phone, Globe, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code as Code$1, Link as Link$1, Undo, Redo, Edit, GripVertical, Type, Heading1, Heading2, Heading3, CheckSquare, Highlighter, Link2, Table as Table$1, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Languages, Lightbulb, MoreVertical, TrendingUp, Activity, BellOff, Target, ArrowUpRight, ArrowDownRight, CalendarIcon, MapPin, Navigation, ArrowUp, ArrowDown, ArrowUpDown, Calendar as Calendar$1, DollarSign, Users, Map as Map$1, Music, Archive, File, FileSpreadsheet, FileJson, FileDown, ChevronsLeft, ChevronsRight, Star, Shield, Award, Gem, Flame, Repeat, Move, EyeOff, Timer, Square, Cpu, GitBranch, ArrowRight, Trash, MessageCircle, Paperclip, Printer, TrendingDown, Grip, Unlock, Github, Server, Monitor, MemoryStick, HardDrive, Network, Columns, PlusCircle, Pin, Sun, Moon, Send, Tag, Flag, Trophy, GitFork, Package } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -73197,8 +73197,19 @@ function FilterConditionRow({
   const selectedColumn = columns.find((col) => col.id === filter.column);
   const columnDef = selectedColumn?.columnDef;
   const columnType = columnDef?.meta?.filterType || "string";
+  const filterOptions = columnDef?.meta?.filterOptions;
+  columnDef?.meta?.filterValueAccessor;
   const availableOperators = getOperatorsForColumnType(columnType);
   const needsValue = filter.operator !== "isNull" && filter.operator !== "isNotNull";
+  const needsMultiValue = filter.operator === "in" || filter.operator === "notIn";
+  const enumOptions = t__default.useMemo(() => {
+    if (columnType !== "select" && !filterOptions)
+      return null;
+    if (filterOptions) {
+      return filterOptions;
+    }
+    return null;
+  }, [columnType, filterOptions]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-3 border rounded-lg bg-muted/30", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs(
@@ -73251,6 +73262,50 @@ function FilterConditionRow({
           ] })
         ]
       }
+    ) : (columnType === "select" || enumOptions) && !needsMultiValue ? (
+      // Single select dropdown for enum values
+      /* @__PURE__ */ jsxs(
+        MoonUISelectPro,
+        {
+          value: filter.value || "",
+          onValueChange: (value) => onUpdate({ value }),
+          children: [
+            /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, { placeholder: "Select value..." }) }),
+            /* @__PURE__ */ jsx(MoonUISelectContentPro, { style: { zIndex: 1e4 }, children: enumOptions?.map((option) => /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: option, children: option }, option)) })
+          ]
+        }
+      )
+    ) : (columnType === "select" || enumOptions) && needsMultiValue ? (
+      // Multi-select for 'in' and 'notIn' operators
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Select multiple values:" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto border rounded-md p-2", children: enumOptions?.map((option) => {
+          const values = Array.isArray(filter.value) ? filter.value : [];
+          const isSelected = values.includes(option);
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "flex items-center gap-2 cursor-pointer hover:bg-muted/50 p-1 rounded",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: isSelected,
+                    onChange: (e) => {
+                      const newValues = e.target.checked ? [...values, option] : values.filter((v) => v !== option);
+                      onUpdate({ value: newValues });
+                    },
+                    className: "rounded border-gray-300"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-sm", children: option })
+              ]
+            },
+            option
+          );
+        }) })
+      ] })
     ) : columnType === "number" ? /* @__PURE__ */ jsx(
       MoonUIInputPro,
       {
@@ -73259,6 +73314,16 @@ function FilterConditionRow({
         onChange: (e) => onUpdate({ value: e.target.value }),
         placeholder: "Enter value..."
       }
+    ) : needsMultiValue ? (
+      // Text input for comma-separated values
+      /* @__PURE__ */ jsx(
+        MoonUIInputPro,
+        {
+          value: Array.isArray(filter.value) ? filter.value.join(", ") : filter.value || "",
+          onChange: (e) => onUpdate({ value: e.target.value }),
+          placeholder: "Enter values separated by comma..."
+        }
+      )
     ) : /* @__PURE__ */ jsx(
       MoonUIInputPro,
       {
@@ -73269,6 +73334,366 @@ function FilterConditionRow({
     ) })
   ] });
 }
+function DataTableQuickFilter({
+  table,
+  filter,
+  data
+}) {
+  const column = table.getColumn(filter.column);
+  if (!column) {
+    return null;
+  }
+  const columnDef = column.columnDef;
+  const filterValueAccessor = columnDef?.meta?.filterValueAccessor;
+  const filterOptions = columnDef?.meta?.filterOptions;
+  const getFilterValue = (row) => {
+    if (filterValueAccessor) {
+      return filterValueAccessor(row);
+    }
+    const value = row[filter.column];
+    return value;
+  };
+  const availableOptions = useMemo(() => {
+    if (filter.options && filter.options !== "auto") {
+      return filter.options;
+    }
+    if (filterOptions) {
+      return filterOptions;
+    }
+    const uniqueValues = /* @__PURE__ */ new Set();
+    data.forEach((row) => {
+      const value = getFilterValue(row);
+      if (value != null && value !== "") {
+        uniqueValues.add(String(value));
+      }
+    });
+    return Array.from(uniqueValues).sort().slice(0, 50);
+  }, [data, filter.options, filterOptions]);
+  const optionCounts = useMemo(() => {
+    if (!filter.showCounts)
+      return {};
+    const counts = {};
+    availableOptions.forEach((option) => {
+      counts[option] = 0;
+    });
+    data.forEach((row) => {
+      const value = getFilterValue(row);
+      if (value != null && counts[String(value)] !== void 0) {
+        counts[String(value)]++;
+      }
+    });
+    return counts;
+  }, [data, filter.showCounts, availableOptions]);
+  const filterValue = column.getFilterValue();
+  const selectedValues = useMemo(() => {
+    if (!filterValue)
+      return /* @__PURE__ */ new Set();
+    if (Array.isArray(filterValue))
+      return new Set(filterValue);
+    return /* @__PURE__ */ new Set([String(filterValue)]);
+  }, [filterValue]);
+  const label = filter.label || column.id;
+  const handleSelect = (value) => {
+    if (filter.multi) {
+      const newValues = new Set(selectedValues);
+      if (newValues.has(value)) {
+        newValues.delete(value);
+      } else {
+        newValues.add(value);
+      }
+      if (newValues.size === 0) {
+        column.setFilterValue(void 0);
+      } else {
+        column.setFilterValue(Array.from(newValues));
+      }
+    } else {
+      if (selectedValues.has(value)) {
+        column.setFilterValue(void 0);
+      } else {
+        column.setFilterValue(value);
+      }
+    }
+  };
+  const handleClear = () => {
+    column.setFilterValue(void 0);
+  };
+  return /* @__PURE__ */ jsxs(MoonUIPopoverPro, { children: [
+    /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
+      MoonUIButtonPro,
+      {
+        variant: "outline",
+        size: "sm",
+        className: cn(
+          "h-8 border-dashed",
+          selectedValues.size > 0 && "border-solid"
+        ),
+        children: [
+          label,
+          selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "mx-2 h-4 w-px bg-border" }),
+            /* @__PURE__ */ jsx(
+              MoonUIBadgePro,
+              {
+                variant: "secondary",
+                className: "rounded-sm px-1 font-normal",
+                children: selectedValues.size
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(MoonUIPopoverContentPro, { className: "w-[250px] p-0", align: "start", children: /* @__PURE__ */ jsxs(MoonUICommandPro, { children: [
+      /* @__PURE__ */ jsx(MoonUICommandInputPro, { placeholder: `Search ${label.toLowerCase()}...` }),
+      /* @__PURE__ */ jsxs(MoonUICommandListPro, { children: [
+        /* @__PURE__ */ jsx(MoonUICommandEmptyPro, { children: "No results found." }),
+        /* @__PURE__ */ jsx(MoonUICommandGroupPro, { children: availableOptions.map((option) => {
+          const isSelected = selectedValues.has(option);
+          return /* @__PURE__ */ jsxs(
+            MoonUICommandItemPro,
+            {
+              onSelect: () => handleSelect(option),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                    ),
+                    children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4") })
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: option }),
+                filter.showCounts && optionCounts[option] !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: optionCounts[option] })
+              ]
+            },
+            option
+          );
+        }) })
+      ] }),
+      selectedValues.size > 0 && /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsxs(
+        MoonUIButtonPro,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "w-full justify-center",
+          onClick: handleClear,
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "mr-2 h-4 w-4" }),
+            "Clear filter"
+          ]
+        }
+      ) })
+    ] }) })
+  ] });
+}
+function DataTableFacetedFilter({
+  table,
+  column: columnId,
+  title,
+  options = "auto",
+  data
+}) {
+  const column = table.getColumn(columnId);
+  const [searchQuery, setSearchQuery] = useState("");
+  if (!column) {
+    return null;
+  }
+  const columnDef = column.columnDef;
+  const filterValueAccessor = columnDef?.meta?.filterValueAccessor;
+  const filterOptions = columnDef?.meta?.filterOptions;
+  const getFilterValue = (row) => {
+    if (filterValueAccessor) {
+      return filterValueAccessor(row);
+    }
+    const value = row[columnId];
+    return value;
+  };
+  const { availableOptions, optionCounts } = useMemo(() => {
+    const counts = {};
+    const uniqueValues = /* @__PURE__ */ new Set();
+    data.forEach((row) => {
+      const value = getFilterValue(row);
+      if (value != null && value !== "") {
+        const strValue = String(value);
+        uniqueValues.add(strValue);
+        counts[strValue] = (counts[strValue] || 0) + 1;
+      }
+    });
+    let finalOptions = [];
+    if (options !== "auto") {
+      finalOptions = options;
+    } else if (filterOptions) {
+      finalOptions = filterOptions.map((opt) => ({ value: opt, label: opt }));
+    } else {
+      finalOptions = Array.from(uniqueValues).sort().slice(0, 50).map((value) => ({ value, label: value }));
+    }
+    return { availableOptions: finalOptions, optionCounts: counts };
+  }, [data, options, filterOptions]);
+  const filterValue = column.getFilterValue();
+  const selectedValues = new Set(filterValue || []);
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery)
+      return availableOptions;
+    return availableOptions.filter((option) => {
+      const label = option.label || option.value;
+      return label.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [availableOptions, searchQuery]);
+  const displayTitle = title || columnId;
+  const handleSelect = (value) => {
+    const newValues = new Set(selectedValues);
+    if (newValues.has(value)) {
+      newValues.delete(value);
+    } else {
+      newValues.add(value);
+    }
+    if (newValues.size === 0) {
+      column.setFilterValue(void 0);
+    } else {
+      column.setFilterValue(Array.from(newValues));
+    }
+  };
+  const handleClearAll = () => {
+    column.setFilterValue(void 0);
+    setSearchQuery("");
+  };
+  const handleSelectAll = () => {
+    const allValues = filteredOptions.map((opt) => opt.value);
+    column.setFilterValue(allValues);
+  };
+  return /* @__PURE__ */ jsxs(MoonUIPopoverPro, { children: [
+    /* @__PURE__ */ jsx(MoonUIPopoverTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
+      MoonUIButtonPro,
+      {
+        variant: "outline",
+        size: "sm",
+        className: cn(
+          "h-8 border-dashed",
+          selectedValues.size > 0 && "border-solid"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(PlusCircle, { className: "mr-2 h-4 w-4" }),
+          displayTitle,
+          selectedValues.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(MoonUISeparatorPro, { orientation: "vertical", className: "mx-2 h-4" }),
+            /* @__PURE__ */ jsx(
+              MoonUIBadgePro,
+              {
+                variant: "secondary",
+                className: "rounded-sm px-1 font-normal lg:hidden",
+                children: selectedValues.size
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? /* @__PURE__ */ jsxs(
+              MoonUIBadgePro,
+              {
+                variant: "secondary",
+                className: "rounded-sm px-1 font-normal",
+                children: [
+                  selectedValues.size,
+                  " selected"
+                ]
+              }
+            ) : Array.from(selectedValues).slice(0, 2).map((value) => {
+              const option = availableOptions.find((opt) => opt.value === value);
+              return /* @__PURE__ */ jsx(
+                MoonUIBadgePro,
+                {
+                  variant: "secondary",
+                  className: "rounded-sm px-1 font-normal",
+                  children: option?.label || value
+                },
+                value
+              );
+            }) })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(MoonUIPopoverContentPro, { className: "w-[300px] p-0", align: "start", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          MoonUIInputPro,
+          {
+            placeholder: `Search ${displayTitle.toLowerCase()}...`,
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            className: "h-8 pl-8"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(MoonUISeparatorPro, {}),
+      /* @__PURE__ */ jsx("div", { className: "max-h-[300px] overflow-y-auto", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No results found" }) : /* @__PURE__ */ jsx("div", { className: "p-2", children: filteredOptions.map((option) => {
+        const isSelected = selectedValues.has(option.value);
+        const count4 = optionCounts[option.value] || 0;
+        return /* @__PURE__ */ jsxs(
+          MoonUIButtonPro,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "w-full justify-start font-normal",
+            onClick: () => handleSelect(option.value),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                    isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                  ),
+                  children: /* @__PURE__ */ jsx(Check, { className: cn("h-4 w-4") })
+                }
+              ),
+              option.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: option.icon }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: option.label || option.value }),
+              count4 > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: count4 })
+            ]
+          },
+          option.value
+        );
+      }) }) }),
+      (selectedValues.size > 0 || filteredOptions.length > 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MoonUISeparatorPro, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-2", children: [
+          selectedValues.size > 0 ? /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleClearAll,
+              className: "h-8 px-2 lg:px-3",
+              children: [
+                "Clear",
+                /* @__PURE__ */ jsx(X, { className: "ml-2 h-4 w-4" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(
+            MoonUIButtonPro,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleSelectAll,
+              className: "h-8 px-2 lg:px-3",
+              children: [
+                "Select all",
+                /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            selectedValues.size,
+            " of ",
+            availableOptions.length,
+            " selected"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
 function DataTable({
   columns: originalColumns,
   data,
@@ -73278,6 +73703,7 @@ function DataTable({
   selectable = false,
   pagination = true,
   pageSize = 10,
+  pageSizeOptions = [5, 10, 20, 50, 100],
   className,
   onRowSelect,
   onExport,
@@ -73286,6 +73712,8 @@ function DataTable({
   expandedRows: controlledExpandedRows,
   onRowExpandChange,
   bulkActions = [],
+  quickFilters = [],
+  facetedFilters = [],
   features = {},
   theme = {},
   texts = {},
@@ -73381,12 +73809,29 @@ function DataTable({
     globalFilterFn: "includesString",
     filterFns: {
       custom: (row, columnId, filterValue) => {
+        if (Array.isArray(filterValue)) {
+          const column = table.getColumn(columnId);
+          const columnDef = column?.columnDef;
+          const filterValueAccessor = columnDef?.meta?.filterValueAccessor;
+          const cellValue = filterValueAccessor ? filterValueAccessor(row.original) : row.getValue(columnId);
+          return filterValue.includes(String(cellValue));
+        }
+        if (typeof filterValue === "string" || typeof filterValue === "number" || typeof filterValue === "boolean") {
+          const column = table.getColumn(columnId);
+          const columnDef = column?.columnDef;
+          const filterValueAccessor = columnDef?.meta?.filterValueAccessor;
+          const cellValue = filterValueAccessor ? filterValueAccessor(row.original) : row.getValue(columnId);
+          return String(cellValue) === String(filterValue);
+        }
         if (!filterValue?.custom || !filterValue?.filters)
           return true;
         const filters = filterValue.filters;
         const matchAll = filterValue.matchAll !== void 0 ? filterValue.matchAll : true;
         const allFilterResults = filters.map((filterCondition) => {
-          const cellValue = row.getValue(filterCondition.column);
+          const column = table.getColumn(filterCondition.column);
+          const columnDef = column?.columnDef;
+          const filterValueAccessor = columnDef?.meta?.filterValueAccessor;
+          const cellValue = filterValueAccessor ? filterValueAccessor(row.original) : row.getValue(filterCondition.column);
           const filterVal = filterCondition.value;
           switch (filterCondition.operator) {
             case "equals":
@@ -73409,6 +73854,10 @@ function DataTable({
               return Number(cellValue) >= Number(filterVal);
             case "lessThanOrEqual":
               return Number(cellValue) <= Number(filterVal);
+            case "in":
+              return Array.isArray(filterVal) ? filterVal.includes(cellValue) : String(filterVal).split(",").map((v) => v.trim()).includes(String(cellValue));
+            case "notIn":
+              return Array.isArray(filterVal) ? !filterVal.includes(cellValue) : !String(filterVal).split(",").map((v) => v.trim()).includes(String(cellValue));
             case "isNull":
               return cellValue == null || cellValue === "";
             case "isNotNull":
@@ -73519,6 +73968,24 @@ function DataTable({
             }
           )
         ] }),
+        quickFilters.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: quickFilters.map((filter, index2) => /* @__PURE__ */ jsx(
+          DataTableQuickFilter,
+          {
+            table,
+            filter,
+            data
+          },
+          `quick-${filter.column}-${index2}`
+        )) }),
+        facetedFilters.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: facetedFilters.map((columnId) => /* @__PURE__ */ jsx(
+          DataTableFacetedFilter,
+          {
+            table,
+            column: columnId,
+            data
+          },
+          `faceted-${columnId}`
+        )) }),
         filterable && /* @__PURE__ */ jsxs(
           MoonUIButtonPro,
           {
@@ -73650,7 +74117,7 @@ function DataTable({
               },
               className: "h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm",
               disabled: isPaginationLoading,
-              children: [10, 20, 30, 40, 50].map((pageSize2) => /* @__PURE__ */ jsx("option", { value: pageSize2, children: pageSize2 }, pageSize2))
+              children: pageSizeOptions.map((size4) => /* @__PURE__ */ jsx("option", { value: size4, children: size4 }, size4))
             }
           )
         ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.25.7",
+    "version": "2.25.9",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",