@moontra/moonui-pro 2.4.0 → 2.4.1

package/dist/index.d.ts

@@ -1541,6 +1541,13 @@ interface BulkAction<T = any> {
  */
 type ExportFormat = 'csv' | 'json' | 'xlsx';
 
+interface FilterCondition {
+    column: string;
+    operator: FilterOperator;
+    value: any;
+}
+type FilterOperator = 'equals' | 'notEquals' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'between' | 'in' | 'notIn' | 'isNull' | 'isNotNull';
+
 interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
@@ -1748,4 +1755,4 @@ declare namespace index {
   };
 }
 
-export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, AdvancedChart, AdvancedFormField, AdvancedForms, AdvancedFormsProps, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, AnimatedButtonProps, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, BulkAction, MoonUIButtonPro as Button, Calendar, CalendarEvent, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, ChartType, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, DraggableListProps, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, index as Enhanced, ErrorBoundary, ExportFormat, FileUpload, FloatingActionButton, FloatingActionButtonProps, GitHubRepository, GitHubStars, GitHubStarsProps, HealthCheck, HealthCheckEndpoint, HealthCheckProps, HealthCheckResult, HoverCard3D, HoverCard3DProps, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyImageProps, LazyList, LazyListProps, MagneticButton, MagneticButtonProps, MemoryAnalytics, MemoryAnalyticsProps, MemoryConfig, MemoryEfficientData, MemoryEfficientDataProps, MemoryStats, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIInputPro, MoonUILabelPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, OptimizedImage, OptimizedImageProps, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceAlert, PerformanceDebugger, PerformanceDebuggerProps, PerformanceEntry, PerformanceMetric, PerformanceMetrics, PerformanceMonitor, PerformanceMonitorProps, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, SelectableVirtualListProps, MoonUISeparatorPro as Separator, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SpotlightCardProps, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, VirtualListProps, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useStreamingData, useVirtualList };
+export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, AdvancedChart, AdvancedFormField, AdvancedForms, AdvancedFormsProps, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, AnimatedButtonProps, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, BulkAction, MoonUIButtonPro as Button, Calendar, CalendarEvent, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, ChartType, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, DraggableListProps, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, index as Enhanced, ErrorBoundary, ExportFormat, FileUpload, FilterCondition, FilterOperator, FloatingActionButton, FloatingActionButtonProps, GitHubRepository, GitHubStars, GitHubStarsProps, HealthCheck, HealthCheckEndpoint, HealthCheckProps, HealthCheckResult, HoverCard3D, HoverCard3DProps, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyImageProps, LazyList, LazyListProps, MagneticButton, MagneticButtonProps, MemoryAnalytics, MemoryAnalyticsProps, MemoryConfig, MemoryEfficientData, MemoryEfficientDataProps, MemoryStats, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIInputPro, MoonUILabelPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, OptimizedImage, OptimizedImageProps, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceAlert, PerformanceDebugger, PerformanceDebuggerProps, PerformanceEntry, PerformanceMetric, PerformanceMetrics, PerformanceMonitor, PerformanceMonitorProps, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, SelectableVirtualListProps, MoonUISeparatorPro as Separator, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SpotlightCardProps, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, VirtualListProps, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useStreamingData, useVirtualList };

package/dist/index.mjs

@@ -3791,7 +3791,7 @@ var me = t.forwardRef((r2, o) => {
     var e;
     return Array.from(((e = I.current) == null ? void 0 : e.querySelectorAll(ce)) || []);
   }
-  function X12(e) {
+  function X13(e) {
     let s = V()[e];
     s && E.setState("value", s.getAttribute(T));
   }
@@ -3806,10 +3806,10 @@ var me = t.forwardRef((r2, o) => {
       s = e > 0 ? we(s, N) : De(s, N), i = s == null ? void 0 : s.querySelector(ce);
     i ? E.setState("value", i.getAttribute(T)) : Q(e);
   }
-  let oe = () => X12(V().length - 1), ie3 = (e) => {
+  let oe = () => X13(V().length - 1), ie3 = (e) => {
     e.preventDefault(), e.metaKey ? oe() : e.altKey ? re(1) : Q(1);
   }, se = (e) => {
-    e.preventDefault(), e.metaKey ? X12(0) : e.altKey ? re(-1) : Q(-1);
+    e.preventDefault(), e.metaKey ? X13(0) : e.altKey ? re(-1) : Q(-1);
   };
   return t.createElement(Primitive2.div, { ref: o, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e) => {
     var s;
@@ -3836,7 +3836,7 @@ var me = t.forwardRef((r2, o) => {
           break;
         }
         case "Home": {
-          e.preventDefault(), X12(0);
+          e.preventDefault(), X13(0);
           break;
         }
         case "End": {
@@ -52710,6 +52710,338 @@ function getVisibleColumns(columns, columnVisibility) {
     return key && columnVisibility[key] !== false;
   }).map((col) => col.id || col.accessorKey).filter(Boolean);
 }
+var operatorLabels = {
+  equals: "Equals",
+  notEquals: "Not equals",
+  contains: "Contains",
+  notContains: "Not contains",
+  startsWith: "Starts with",
+  endsWith: "Ends with",
+  greaterThan: "Greater than",
+  lessThan: "Less than",
+  greaterThanOrEqual: "Greater than or equal",
+  lessThanOrEqual: "Less than or equal",
+  between: "Between",
+  in: "In",
+  notIn: "Not in",
+  isNull: "Is empty",
+  isNotNull: "Is not empty"
+};
+function getOperatorsForColumnType(columnType) {
+  switch (columnType) {
+    case "number":
+      return ["equals", "notEquals", "greaterThan", "lessThan", "greaterThanOrEqual", "lessThanOrEqual", "between", "isNull", "isNotNull"];
+    case "date":
+      return ["equals", "notEquals", "greaterThan", "lessThan", "greaterThanOrEqual", "lessThanOrEqual", "between", "isNull", "isNotNull"];
+    case "boolean":
+      return ["equals", "notEquals", "isNull", "isNotNull"];
+    case "select":
+      return ["equals", "notEquals", "in", "notIn", "isNull", "isNotNull"];
+    default:
+      return ["equals", "notEquals", "contains", "notContains", "startsWith", "endsWith", "isNull", "isNotNull"];
+  }
+}
+function DataTableFilterDrawer({
+  table,
+  open,
+  onOpenChange,
+  position = "right",
+  width = "400px",
+  filters: externalFilters,
+  onFiltersChange,
+  customFilters
+}) {
+  const [internalFilters, setInternalFilters] = useState([]);
+  const [matchAll, setMatchAll] = useState(true);
+  const filters = externalFilters || internalFilters;
+  const setFilters = onFiltersChange || setInternalFilters;
+  const filterableColumns = useMemo(() => {
+    return table.getAllColumns().filter((column) => {
+      if (column.id === "select" || column.id === "actions" || column.id === "expander") {
+        return false;
+      }
+      return column.getCanFilter();
+    });
+  }, [table]);
+  const addFilter = () => {
+    const firstColumn = filterableColumns[0];
+    if (!firstColumn)
+      return;
+    const newFilter = {
+      column: firstColumn.id,
+      operator: "contains",
+      value: ""
+    };
+    setFilters([...filters, newFilter]);
+  };
+  const updateFilter = (index, updates) => {
+    const newFilters = [...filters];
+    newFilters[index] = { ...newFilters[index], ...updates };
+    setFilters(newFilters);
+  };
+  const removeFilter = (index) => {
+    setFilters(filters.filter((_, i) => i !== index));
+  };
+  const clearAllFilters = () => {
+    setFilters([]);
+    table.resetColumnFilters();
+  };
+  const applyFilters = () => {
+    table.resetColumnFilters();
+    filters.forEach((filter) => {
+      const column = table.getColumn(filter.column);
+      if (!column)
+        return;
+      switch (filter.operator) {
+        case "equals":
+          column.setFilterValue(filter.value);
+          break;
+        case "notEquals":
+          column.setFilterValue((value) => value !== filter.value);
+          break;
+        case "contains":
+          column.setFilterValue(
+            (value) => String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          );
+          break;
+        case "notContains":
+          column.setFilterValue(
+            (value) => !String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          );
+          break;
+        case "startsWith":
+          column.setFilterValue(
+            (value) => String(value).toLowerCase().startsWith(String(filter.value).toLowerCase())
+          );
+          break;
+        case "endsWith":
+          column.setFilterValue(
+            (value) => String(value).toLowerCase().endsWith(String(filter.value).toLowerCase())
+          );
+          break;
+        case "greaterThan":
+          column.setFilterValue((value) => Number(value) > Number(filter.value));
+          break;
+        case "lessThan":
+          column.setFilterValue((value) => Number(value) < Number(filter.value));
+          break;
+        case "greaterThanOrEqual":
+          column.setFilterValue((value) => Number(value) >= Number(filter.value));
+          break;
+        case "lessThanOrEqual":
+          column.setFilterValue((value) => Number(value) <= Number(filter.value));
+          break;
+        case "isNull":
+          column.setFilterValue((value) => value == null || value === "");
+          break;
+        case "isNotNull":
+          column.setFilterValue((value) => value != null && value !== "");
+          break;
+      }
+    });
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-black/20 z-40",
+        onClick: () => onOpenChange(false)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { x: position === "right" ? "100%" : "-100%" },
+        animate: { x: 0 },
+        exit: { x: position === "right" ? "100%" : "-100%" },
+        transition: { type: "spring", damping: 30, stiffness: 300 },
+        className: cn(
+          "fixed top-0 bottom-0 z-50 bg-background border-l shadow-xl",
+          position === "right" ? "right-0" : "left-0"
+        ),
+        style: { width },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Filter, { className: "h-5 w-5" }),
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: "Filters" }),
+              filters.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                "(",
+                filters.length,
+                " active)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              MoonUIButtonPro,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: () => onOpenChange(false),
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsx(MoonUILabelPro, { className: "text-sm font-medium mb-2 block", children: "Match conditions" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: matchAll ? "primary" : "outline",
+                    size: "sm",
+                    onClick: () => setMatchAll(true),
+                    className: "flex-1",
+                    children: "Match all"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MoonUIButtonPro,
+                  {
+                    variant: !matchAll ? "primary" : "outline",
+                    size: "sm",
+                    onClick: () => setMatchAll(false),
+                    className: "flex-1",
+                    children: "Match any"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mb-6" }),
+            customFilters && /* @__PURE__ */ jsxs(Fragment, { children: [
+              customFilters,
+              /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "my-6" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-4", children: filters.map((filter, index) => /* @__PURE__ */ jsx(
+              FilterConditionRow,
+              {
+                filter,
+                columns: filterableColumns,
+                onUpdate: (updates) => updateFilter(index, updates),
+                onRemove: () => removeFilter(index)
+              },
+              index
+            )) }),
+            /* @__PURE__ */ jsxs(
+              MoonUIButtonPro,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: addFilter,
+                className: "w-full mt-4",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+                  "Add filter"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-4 border-t space-y-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              MoonUIButtonPro,
+              {
+                variant: "outline",
+                onClick: clearAllFilters,
+                disabled: filters.length === 0,
+                className: "flex-1",
+                children: [
+                  /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
+                  "Clear all"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(MoonUIButtonPro, { onClick: applyFilters, className: "flex-1", children: "Apply filters" })
+          ] }) })
+        ] })
+      }
+    ) })
+  ] });
+}
+function FilterConditionRow({
+  filter,
+  columns,
+  onUpdate,
+  onRemove
+}) {
+  const selectedColumn = columns.find((col) => col.id === filter.column);
+  const columnDef = selectedColumn?.columnDef;
+  const columnType = columnDef?.meta?.filterType || "string";
+  const availableOperators = getOperatorsForColumnType(columnType);
+  const needsValue = filter.operator !== "isNull" && filter.operator !== "isNotNull";
+  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(
+        MoonUISelectPro,
+        {
+          value: filter.column,
+          onValueChange: (value) => onUpdate({ column: value }),
+          children: [
+            /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { className: "flex-1", children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+            /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: columns.map((column) => {
+              const header = column.columnDef.header;
+              const label = typeof header === "function" ? column.id : header || column.id;
+              return /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: column.id, children: label }, column.id);
+            }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        MoonUIButtonPro,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: onRemove,
+          className: "h-8 w-8",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      MoonUISelectPro,
+      {
+        value: filter.operator,
+        onValueChange: (value) => onUpdate({ operator: value }),
+        children: [
+          /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+          /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: availableOperators.map((operator2) => /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: operator2, children: operatorLabels[operator2] }, operator2)) })
+        ]
+      }
+    ),
+    needsValue && /* @__PURE__ */ jsx("div", { children: columnType === "boolean" ? /* @__PURE__ */ jsxs(
+      MoonUISelectPro,
+      {
+        value: String(filter.value),
+        onValueChange: (value) => onUpdate({ value: value === "true" }),
+        children: [
+          /* @__PURE__ */ jsx(MoonUISelectTriggerPro, { children: /* @__PURE__ */ jsx(MoonUISelectValuePro, {}) }),
+          /* @__PURE__ */ jsxs(MoonUISelectContentPro, { children: [
+            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "true", children: "True" }),
+            /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: "false", children: "False" })
+          ] })
+        ]
+      }
+    ) : columnType === "number" ? /* @__PURE__ */ jsx(
+      MoonUIInputPro,
+      {
+        type: "number",
+        value: filter.value || "",
+        onChange: (e) => onUpdate({ value: e.target.value }),
+        placeholder: "Enter value..."
+      }
+    ) : /* @__PURE__ */ jsx(
+      MoonUIInputPro,
+      {
+        value: filter.value || "",
+        onChange: (e) => onUpdate({ value: e.target.value }),
+        placeholder: "Enter value..."
+      }
+    ) })
+  ] });
+}
 function DataTable({
   columns,
   data,
@@ -52766,6 +53098,7 @@ function DataTable({
   const [globalFilter, setGlobalFilter] = t__default.useState("");
   const [isPaginationLoading, setIsPaginationLoading] = t__default.useState(false);
   const [internalExpandedRows, setInternalExpandedRows] = t__default.useState(/* @__PURE__ */ new Set());
+  const [filterDrawerOpen, setFilterDrawerOpen] = t__default.useState(false);
   const expandedRows = controlledExpandedRows || internalExpandedRows;
   const actualPageSize = defaultPageSize || pageSize;
   const stableData = t__default.useMemo(() => data, [data]);
@@ -52876,10 +53209,19 @@ function DataTable({
             }
           )
         ] }),
-        filterable && /* @__PURE__ */ jsxs(MoonUIButtonPro, { variant: "outline", size: "sm", children: [
-          /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
-          "Filters"
-        ] }),
+        filterable && /* @__PURE__ */ jsxs(
+          MoonUIButtonPro,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => setFilterDrawerOpen(true),
+            children: [
+              /* @__PURE__ */ jsx("span", { suppressHydrationWarning: true, children: /* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }) }),
+              "Filters",
+              columnFilters.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground", children: columnFilters.length })
+            ]
+          }
+        ),
         selectable && bulkActions.length > 0 && /* @__PURE__ */ jsx(
           DataTableBulkActions,
           {
@@ -53080,7 +53422,15 @@ function DataTable({
           )
         ] })
       ] })
-    ] })
+    ] }),
+    filterable && /* @__PURE__ */ jsx(
+      DataTableFilterDrawer,
+      {
+        table,
+        open: filterDrawerOpen,
+        onOpenChange: setFilterDrawerOpen
+      }
+    )
   ] });
 }
 function getExpandableColumn(expandedRows, onToggle) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "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",

package/src/components/data-table/data-table-filter-drawer.tsx

@@ -0,0 +1,442 @@
+"use client"
+
+import React, { useState, useMemo } from 'react'
+import { Column, Table } from '@tanstack/react-table'
+import { X, Filter, Trash2, Plus } from 'lucide-react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { Switch } from '../ui/switch'
+import { Separator } from '../ui/separator'
+import { cn } from '../../lib/utils'
+import { motion, AnimatePresence } from 'framer-motion'
+
+export interface FilterCondition {
+  column: string
+  operator: FilterOperator
+  value: any
+}
+
+export type FilterOperator = 
+  | 'equals' 
+  | 'notEquals' 
+  | 'contains' 
+  | 'notContains' 
+  | 'startsWith' 
+  | 'endsWith'
+  | 'greaterThan'
+  | 'lessThan'
+  | 'greaterThanOrEqual'
+  | 'lessThanOrEqual'
+  | 'between'
+  | 'in'
+  | 'notIn'
+  | 'isNull'
+  | 'isNotNull'
+
+export interface DataTableFilterDrawerProps<TData> {
+  table: Table<TData>
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  position?: 'left' | 'right'
+  width?: string
+  filters?: FilterCondition[]
+  onFiltersChange?: (filters: FilterCondition[]) => void
+  customFilters?: React.ReactNode
+}
+
+const operatorLabels: Record<FilterOperator, string> = {
+  equals: 'Equals',
+  notEquals: 'Not equals',
+  contains: 'Contains',
+  notContains: 'Not contains',
+  startsWith: 'Starts with',
+  endsWith: 'Ends with',
+  greaterThan: 'Greater than',
+  lessThan: 'Less than',
+  greaterThanOrEqual: 'Greater than or equal',
+  lessThanOrEqual: 'Less than or equal',
+  between: 'Between',
+  in: 'In',
+  notIn: 'Not in',
+  isNull: 'Is empty',
+  isNotNull: 'Is not empty',
+}
+
+function getOperatorsForColumnType(columnType?: string): FilterOperator[] {
+  switch (columnType) {
+    case 'number':
+      return ['equals', 'notEquals', 'greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual', 'between', 'isNull', 'isNotNull']
+    case 'date':
+      return ['equals', 'notEquals', 'greaterThan', 'lessThan', 'greaterThanOrEqual', 'lessThanOrEqual', 'between', 'isNull', 'isNotNull']
+    case 'boolean':
+      return ['equals', 'notEquals', 'isNull', 'isNotNull']
+    case 'select':
+      return ['equals', 'notEquals', 'in', 'notIn', 'isNull', 'isNotNull']
+    default: // string
+      return ['equals', 'notEquals', 'contains', 'notContains', 'startsWith', 'endsWith', 'isNull', 'isNotNull']
+  }
+}
+
+export function DataTableFilterDrawer<TData>({
+  table,
+  open,
+  onOpenChange,
+  position = 'right',
+  width = '400px',
+  filters: externalFilters,
+  onFiltersChange,
+  customFilters,
+}: DataTableFilterDrawerProps<TData>) {
+  const [internalFilters, setInternalFilters] = useState<FilterCondition[]>([])
+  const [matchAll, setMatchAll] = useState(true)
+
+  const filters = externalFilters || internalFilters
+  const setFilters = onFiltersChange || setInternalFilters
+
+  // Get filterable columns
+  const filterableColumns = useMemo(() => {
+    return table.getAllColumns().filter(column => {
+      // Skip special columns
+      if (column.id === 'select' || column.id === 'actions' || column.id === 'expander') {
+        return false
+      }
+      // Only include columns that can be filtered
+      return column.getCanFilter()
+    })
+  }, [table])
+
+  const addFilter = () => {
+    const firstColumn = filterableColumns[0]
+    if (!firstColumn) return
+
+    const newFilter: FilterCondition = {
+      column: firstColumn.id,
+      operator: 'contains',
+      value: '',
+    }
+    setFilters([...filters, newFilter])
+  }
+
+  const updateFilter = (index: number, updates: Partial<FilterCondition>) => {
+    const newFilters = [...filters]
+    newFilters[index] = { ...newFilters[index], ...updates }
+    setFilters(newFilters)
+  }
+
+  const removeFilter = (index: number) => {
+    setFilters(filters.filter((_, i) => i !== index))
+  }
+
+  const clearAllFilters = () => {
+    setFilters([])
+    table.resetColumnFilters()
+  }
+
+  const applyFilters = () => {
+    // Reset all column filters first
+    table.resetColumnFilters()
+
+    // Apply each filter
+    filters.forEach(filter => {
+      const column = table.getColumn(filter.column)
+      if (!column) return
+
+      // Apply filter based on operator
+      switch (filter.operator) {
+        case 'equals':
+          column.setFilterValue(filter.value)
+          break
+        case 'notEquals':
+          column.setFilterValue((value: any) => value !== filter.value)
+          break
+        case 'contains':
+          column.setFilterValue((value: any) => 
+            String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          )
+          break
+        case 'notContains':
+          column.setFilterValue((value: any) => 
+            !String(value).toLowerCase().includes(String(filter.value).toLowerCase())
+          )
+          break
+        case 'startsWith':
+          column.setFilterValue((value: any) => 
+            String(value).toLowerCase().startsWith(String(filter.value).toLowerCase())
+          )
+          break
+        case 'endsWith':
+          column.setFilterValue((value: any) => 
+            String(value).toLowerCase().endsWith(String(filter.value).toLowerCase())
+          )
+          break
+        case 'greaterThan':
+          column.setFilterValue((value: any) => Number(value) > Number(filter.value))
+          break
+        case 'lessThan':
+          column.setFilterValue((value: any) => Number(value) < Number(filter.value))
+          break
+        case 'greaterThanOrEqual':
+          column.setFilterValue((value: any) => Number(value) >= Number(filter.value))
+          break
+        case 'lessThanOrEqual':
+          column.setFilterValue((value: any) => Number(value) <= Number(filter.value))
+          break
+        case 'isNull':
+          column.setFilterValue((value: any) => value == null || value === '')
+          break
+        case 'isNotNull':
+          column.setFilterValue((value: any) => value != null && value !== '')
+          break
+        // Add more operators as needed
+      }
+    })
+
+    onOpenChange(false)
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/20 z-40"
+            onClick={() => onOpenChange(false)}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Drawer */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            initial={{ x: position === 'right' ? '100%' : '-100%' }}
+            animate={{ x: 0 }}
+            exit={{ x: position === 'right' ? '100%' : '-100%' }}
+            transition={{ type: 'spring', damping: 30, stiffness: 300 }}
+            className={cn(
+              "fixed top-0 bottom-0 z-50 bg-background border-l shadow-xl",
+              position === 'right' ? 'right-0' : 'left-0'
+            )}
+            style={{ width }}
+          >
+            <div className="flex flex-col h-full">
+              {/* Header */}
+              <div className="flex items-center justify-between p-4 border-b">
+                <div className="flex items-center gap-2">
+                  <Filter className="h-5 w-5" />
+                  <h2 className="text-lg font-semibold">Filters</h2>
+                  {filters.length > 0 && (
+                    <span className="text-sm text-muted-foreground">
+                      ({filters.length} active)
+                    </span>
+                  )}
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onOpenChange(false)}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 overflow-y-auto p-4">
+                {/* Match mode */}
+                <div className="mb-6">
+                  <Label className="text-sm font-medium mb-2 block">
+                    Match conditions
+                  </Label>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant={matchAll ? 'primary' : 'outline'}
+                      size="sm"
+                      onClick={() => setMatchAll(true)}
+                      className="flex-1"
+                    >
+                      Match all
+                    </Button>
+                    <Button
+                      variant={!matchAll ? 'primary' : 'outline'}
+                      size="sm"
+                      onClick={() => setMatchAll(false)}
+                      className="flex-1"
+                    >
+                      Match any
+                    </Button>
+                  </div>
+                </div>
+
+                <Separator className="mb-6" />
+
+                {/* Custom filters */}
+                {customFilters && (
+                  <>
+                    {customFilters}
+                    <Separator className="my-6" />
+                  </>
+                )}
+
+                {/* Filter conditions */}
+                <div className="space-y-4">
+                  {filters.map((filter, index) => (
+                    <FilterConditionRow
+                      key={index}
+                      filter={filter}
+                      columns={filterableColumns}
+                      onUpdate={(updates) => updateFilter(index, updates)}
+                      onRemove={() => removeFilter(index)}
+                    />
+                  ))}
+                </div>
+
+                {/* Add filter button */}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={addFilter}
+                  className="w-full mt-4"
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add filter
+                </Button>
+              </div>
+
+              {/* Footer */}
+              <div className="p-4 border-t space-y-2">
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={clearAllFilters}
+                    disabled={filters.length === 0}
+                    className="flex-1"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Clear all
+                  </Button>
+                  <Button onClick={applyFilters} className="flex-1">
+                    Apply filters
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}
+
+interface FilterConditionRowProps<TData> {
+  filter: FilterCondition
+  columns: Column<TData, any>[]
+  onUpdate: (updates: Partial<FilterCondition>) => void
+  onRemove: () => void
+}
+
+function FilterConditionRow<TData>({
+  filter,
+  columns,
+  onUpdate,
+  onRemove,
+}: FilterConditionRowProps<TData>) {
+  const selectedColumn = columns.find(col => col.id === filter.column)
+  const columnDef = selectedColumn?.columnDef as any
+  const columnType = columnDef?.meta?.filterType || 'string'
+  const availableOperators = getOperatorsForColumnType(columnType)
+
+  const needsValue = filter.operator !== 'isNull' && filter.operator !== 'isNotNull'
+
+  return (
+    <div className="space-y-2 p-3 border rounded-lg bg-muted/30">
+      {/* Column selector */}
+      <div className="flex items-center gap-2">
+        <Select
+          value={filter.column}
+          onValueChange={(value) => onUpdate({ column: value })}
+        >
+          <SelectTrigger className="flex-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {columns.map(column => {
+              const header = column.columnDef.header
+              const label = typeof header === 'function' ? column.id : header || column.id
+              
+              return (
+                <SelectItem key={column.id} value={column.id}>
+                  {label}
+                </SelectItem>
+              )
+            })}
+          </SelectContent>
+        </Select>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onRemove}
+          className="h-8 w-8"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Operator selector */}
+      <Select
+        value={filter.operator}
+        onValueChange={(value) => onUpdate({ operator: value as FilterOperator })}
+      >
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {availableOperators.map(operator => (
+            <SelectItem key={operator} value={operator}>
+              {operatorLabels[operator]}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {/* Value input */}
+      {needsValue && (
+        <div>
+          {columnType === 'boolean' ? (
+            <Select
+              value={String(filter.value)}
+              onValueChange={(value) => onUpdate({ value: value === 'true' })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="true">True</SelectItem>
+                <SelectItem value="false">False</SelectItem>
+              </SelectContent>
+            </Select>
+          ) : columnType === 'number' ? (
+            <Input
+              type="number"
+              value={filter.value || ''}
+              onChange={(e) => onUpdate({ value: e.target.value })}
+              placeholder="Enter value..."
+            />
+          ) : (
+            <Input
+              value={filter.value || ''}
+              onChange={(e) => onUpdate({ value: e.target.value })}
+              placeholder="Enter value..."
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/data-table/index.tsx

@@ -44,6 +44,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { DataTableColumnToggle } from './data-table-column-toggle'
 import { DataTableBulkActions, type BulkAction } from './data-table-bulk-actions'
 import { exportData, type ExportFormat, getVisibleColumns } from './data-table-export'
+import { DataTableFilterDrawer, type FilterCondition } from './data-table-filter-drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -192,6 +193,7 @@ export function DataTable<TData, TValue>({
   const [globalFilter, setGlobalFilter] = React.useState('')
   const [isPaginationLoading, setIsPaginationLoading] = React.useState(false)
   const [internalExpandedRows, setInternalExpandedRows] = React.useState<Set<string>>(new Set())
+  const [filterDrawerOpen, setFilterDrawerOpen] = React.useState(false)
 
   // Use controlled or internal expanded state
   const expandedRows = controlledExpandedRows || internalExpandedRows
@@ -339,9 +341,18 @@ export function DataTable<TData, TValue>({
           )}
           
           {filterable && (
-            <Button variant="outline" size="sm">
+            <Button 
+              variant="outline" 
+              size="sm"
+              onClick={() => setFilterDrawerOpen(true)}
+            >
               <span suppressHydrationWarning><Filter className="mr-2 h-4 w-4" /></span>
               Filters
+              {columnFilters.length > 0 && (
+                <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
+                  {columnFilters.length}
+                </span>
+              )}
             </Button>
           )}
           
@@ -586,6 +597,15 @@ export function DataTable<TData, TValue>({
           </div>
         </div>
       )}
+
+      {/* Filter Drawer */}
+      {filterable && (
+        <DataTableFilterDrawer
+          table={table}
+          open={filterDrawerOpen}
+          onOpenChange={setFilterDrawerOpen}
+        />
+      )}
     </div>
   )
 }
@@ -736,3 +756,4 @@ TableRow.displayName = 'TableRow'
 export { type ColumnDef } from "@tanstack/react-table";
 export type { BulkAction } from './data-table-bulk-actions';
 export type { ExportFormat } from './data-table-export';
+export type { FilterCondition, FilterOperator } from './data-table-filter-drawer';