@sikka/hawa 0.14.3-next → 0.14.5-next

package/dist/index.d.mts

@@ -68,6 +68,21 @@ type PricingCardTypes = {
 };
 declare const PricingCard: FC<PricingCardTypes>;
 
+declare const DropdownMenuRoot: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+    end?: any;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 type ExtendedDropdownMenuContentProps = Partial<React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>> & {};
 type ExtendedDropdownMenuTriggerProps = Partial<React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>> & {};
 type SubItem$1 = {
@@ -500,15 +515,19 @@ declare const SortButton: React__default.FC<SortButtonProps>;
 type DataTableProps<DataProps = {}> = {
     direction?: DirectionType;
     columns: ColumnDef<DataProps>[];
+    enableSearch?: boolean;
+    enableHideColumns?: boolean;
+    enableGoTo?: boolean;
     data: DataProps[];
     itemsPerPage?: any[];
     showCount?: boolean;
     paginationPosition?: "top" | "bottom";
     condensed?: boolean;
     isLoading?: boolean;
-    enableGoTo?: boolean;
     defaultSort?: string;
+    translateFn?: any;
     texts?: {
+        columns?: string;
         searchPlaceholder?: string;
         item?: string;
         noData?: any;
@@ -524,7 +543,7 @@ declare module "@tanstack/table-core" {
         sortable: any;
     }
 }
-declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
+declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
 
 type DataProps = {};
 type SimpleTableProps = {
@@ -1677,4 +1696,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.d.ts

@@ -68,6 +68,21 @@ type PricingCardTypes = {
 };
 declare const PricingCard: FC<PricingCardTypes>;
 
+declare const DropdownMenuRoot: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+    end?: any;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 type ExtendedDropdownMenuContentProps = Partial<React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>> & {};
 type ExtendedDropdownMenuTriggerProps = Partial<React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>> & {};
 type SubItem$1 = {
@@ -500,15 +515,19 @@ declare const SortButton: React__default.FC<SortButtonProps>;
 type DataTableProps<DataProps = {}> = {
     direction?: DirectionType;
     columns: ColumnDef<DataProps>[];
+    enableSearch?: boolean;
+    enableHideColumns?: boolean;
+    enableGoTo?: boolean;
     data: DataProps[];
     itemsPerPage?: any[];
     showCount?: boolean;
     paginationPosition?: "top" | "bottom";
     condensed?: boolean;
     isLoading?: boolean;
-    enableGoTo?: boolean;
     defaultSort?: string;
+    translateFn?: any;
     texts?: {
+        columns?: string;
         searchPlaceholder?: string;
         item?: string;
         noData?: any;
@@ -524,7 +543,7 @@ declare module "@tanstack/table-core" {
         sortable: any;
     }
 }
-declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
+declare const DataTable: <DataProps extends {}>({ columns, data, paginationPosition, translateFn, enableHideColumns, enableSearch, enableGoTo, ...props }: DataTableProps<DataProps>) => React$1.JSX.Element;
 
 type DataProps = {};
 type SimpleTableProps = {
@@ -1677,4 +1696,4 @@ declare function useTabs(initialTab?: string): {
     handleTabChange: (index: any) => void;
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, ActionCard, AdCard, Alert, Announcement, AppLanding, AppLayout, AppLayoutSidebarItemProps, AppStores, AppTopbar, BackToTop, Badge, BadgedComponent, Breadcrumb, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CheckEmail, Checkbox, Chip, ChipColors, ChipTypes, CodeBlock, CodeConfirmation, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparingPlans, Copyrights, Count, DataTable, DestroyableCard, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DocsLayout, DocsSidebar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FeedbackEmoji, FeedbackForm, FeedbackRating, FileDropzone, HorizontalPricing, Input, InterfaceSettings, ItemCard, Label, LabelProps, LandingCard, LeadGenerator, LegalTexts, Loading, LoginForm, Logos, MenuItemType, NavMenuItem, Navbar, NavigationMenu, NavigationMenuLink, NewPasswordForm, NoPermission, NotFound, PhoneInput, PinInput, Popover, PopoverContent, PopoverTrigger, PricingCard, PricingPlans, Progress, ProgressCircle, Radio, RadioOptionsTypes, RegisterForm, ResetPasswordForm, ScrollArea, ScrollBar, ScrollIndicator, Select, SelectOptionProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SimpleTable, Skeleton, Slider, SortButton, SplitButton, Stats, StopPropagationWrapper, SubItem$1 as SubItem, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Testimonial, Textarea, TextareaProps, Toast$1 as Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, Usage, UseFocusWithinOptions, UseMediaQueryOptions, UserReferralSource, buttonVariants, reducer, toast, useBreakpoint, useClipboard, useFocusWithin, useMediaQuery, useTabs, useToast, useWindowSize };

package/dist/index.js

@@ -514,6 +514,30 @@ __export(components_exports, {
     DropdownMenu: function() {
         return DropdownMenu;
     },
+    DropdownMenuCheckboxItem: function() {
+        return DropdownMenuCheckboxItem;
+    },
+    DropdownMenuContent: function() {
+        return DropdownMenuContent;
+    },
+    DropdownMenuItem: function() {
+        return DropdownMenuItem;
+    },
+    DropdownMenuLabel: function() {
+        return DropdownMenuLabel;
+    },
+    DropdownMenuRoot: function() {
+        return DropdownMenuRoot;
+    },
+    DropdownMenuSeparator: function() {
+        return DropdownMenuSeparator;
+    },
+    DropdownMenuSubTrigger: function() {
+        return DropdownMenuSubTrigger;
+    },
+    DropdownMenuTrigger: function() {
+        return DropdownMenuTrigger;
+    },
     EmptyState: function() {
         return EmptyState;
     },
@@ -5313,12 +5337,16 @@ var Input = function(_param) {
 };
 // components/elements/DataTable.tsx
 var DataTable = function(_param) {
-    var columns = _param.columns, data = _param.data, _param_paginationPosition = _param.paginationPosition, paginationPosition = _param_paginationPosition === void 0 ? "bottom" : _param_paginationPosition, props = _object_without_properties(_param, [
+    var columns = _param.columns, data = _param.data, _param_paginationPosition = _param.paginationPosition, paginationPosition = _param_paginationPosition === void 0 ? "bottom" : _param_paginationPosition, translateFn = _param.translateFn, enableHideColumns = _param.enableHideColumns, enableSearch = _param.enableSearch, enableGoTo = _param.enableGoTo, props = _object_without_properties(_param, [
         "columns",
         "data",
-        "paginationPosition"
+        "paginationPosition",
+        "translateFn",
+        "enableHideColumns",
+        "enableSearch",
+        "enableGoTo"
     ]);
-    var _props_texts, _props_itemsPerPage, _props_texts1, _table_getRowModel_rows, _props_texts2, _props_texts3, _props_texts4, _props_texts5, _props_texts6, _props_texts7;
+    var _props_texts, _props_itemsPerPage, _props_texts1, _props_texts2, _table_getRowModel_rows, _props_texts3, _props_texts4, _props_texts5, _props_texts6, _props_texts7, _props_texts8;
     var _React40_useState = _sliced_to_array(React40.useState([
         {
             id: props.defaultSort || "",
@@ -5362,9 +5390,9 @@ var DataTable = function(_param) {
     });
     return /* @__PURE__ */ React40.createElement("div", {
         className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4"
-    }, /* @__PURE__ */ React40.createElement("div", {
-        className: "hawa-flex hawa-items-center"
-    }, /* @__PURE__ */ React40.createElement(Input, {
+    }, enableSearch || enableHideColumns && /* @__PURE__ */ React40.createElement("div", {
+        className: "hawa-flex hawa-items-center hawa-flex-row hawa-gap-4"
+    }, enableSearch && /* @__PURE__ */ React40.createElement(Input, {
         forceHideHelperText: true,
         placeholder: (_props_texts1 = props.texts) === null || _props_texts1 === void 0 ? void 0 : _props_texts1.searchPlaceholder,
         value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : "",
@@ -5373,7 +5401,32 @@ var DataTable = function(_param) {
         },
         margin: "none",
         className: "hawa-w-full md:hawa-max-w-sm"
-    })), props.isLoading ? /* @__PURE__ */ React40.createElement(Skeleton, {
+    }), enableHideColumns && /* @__PURE__ */ React40.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React40.createElement(DropdownMenuTrigger, {
+        asChild: true
+    }, /* @__PURE__ */ React40.createElement(Button, {
+        variant: "outline",
+        className: "hawa-flex hawa-flex-row hawa-gap-2"
+    }, ((_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.columns) || "Columns", /* @__PURE__ */ React40.createElement("svg", {
+        "aria-label": "Chevron down Icon",
+        stroke: "currentColor",
+        fill: "currentColor",
+        viewBox: "0 0 16 16",
+        className: "hawa-h-3 hawa-w-3 hawa-rotate-90 hawa-shrink-0 hawa-transition-transform hawa-duration-200 "
+    }, /* @__PURE__ */ React40.createElement("path", {
+        d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
+    })))), /* @__PURE__ */ React40.createElement(DropdownMenuContent, {
+        align: "end"
+    }, table.getAllColumns().filter(function(column) {
+        return column.getCanHide();
+    }).map(function(column) {
+        return /* @__PURE__ */ React40.createElement(DropdownMenuCheckboxItem, {
+            key: column.id,
+            checked: column.getIsVisible(),
+            onCheckedChange: function(value) {
+                return column.toggleVisibility(!!value);
+            }
+        }, translateFn ? translateFn(column.id) : column.id);
+    })))), props.isLoading ? /* @__PURE__ */ React40.createElement(Skeleton, {
         className: "hawa-h-[130px] hawa-w-full"
     }) : /* @__PURE__ */ React40.createElement("div", {
         className: cn("hawa-flex hawa-w-full  hawa-gap-4", paginationPosition === "top" ? "hawa-flex-col-reverse" : "hawa-flex-col")
@@ -5406,20 +5459,20 @@ var DataTable = function(_param) {
     }) : /* @__PURE__ */ React40.createElement(TableRow, null, /* @__PURE__ */ React40.createElement(TableCell, {
         colSpan: columns.length,
         className: "hawa-h-24 hawa-text-center"
-    }, (_props_texts2 = props.texts) === null || _props_texts2 === void 0 ? void 0 : _props_texts2.noData))))), /* @__PURE__ */ React40.createElement("div", {
+    }, (_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.noData))))), /* @__PURE__ */ React40.createElement("div", {
         className: "hawa-flex hawa-items-center hawa-justify-between"
     }, !props.showCount && /* @__PURE__ */ React40.createElement("div", {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm hawa-text-muted-foreground"
     }), props.showCount && /* @__PURE__ */ React40.createElement("div", {
         className: "text-sm text-muted-foreground",
         dir: props.direction
-    }, /* @__PURE__ */ React40.createElement("span", null, (_props_texts3 = props.texts) === null || _props_texts3 === void 0 ? void 0 : _props_texts3.total), " ", /* @__PURE__ */ React40.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())), table.getPageCount() !== 0 && /* @__PURE__ */ React40.createElement("div", {
+    }, /* @__PURE__ */ React40.createElement("span", null, (_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.total), " ", /* @__PURE__ */ React40.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())), table.getPageCount() !== 0 && /* @__PURE__ */ React40.createElement("div", {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 "
-    }, props.enableGoTo && /* @__PURE__ */ React40.createElement("div", {
+    }, enableGoTo && /* @__PURE__ */ React40.createElement("div", {
         className: "hawa-flex hawa-flex-row hawa-justify-center hawa-items-center hawa-gap-2"
     }, /* @__PURE__ */ React40.createElement("span", {
         className: "hawa-text-sm"
-    }, (_props_texts4 = props.texts) === null || _props_texts4 === void 0 ? void 0 : _props_texts4.goTo), /* @__PURE__ */ React40.createElement("input", {
+    }, (_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.goTo), /* @__PURE__ */ React40.createElement("input", {
         max: table.getPageCount(),
         min: 0,
         type: "number",
@@ -5463,7 +5516,7 @@ var DataTable = function(_param) {
             variant: "outline",
             size: "icon",
             className: "hawa-h-fit hawa-w-fit hawa-p-0 hawa-px-2 hawa-py-1 "
-        }, "".concat(table.getState().pagination.pageSize, " / ").concat((_props_texts5 = props.texts) === null || _props_texts5 === void 0 ? void 0 : _props_texts5.page)),
+        }, "".concat(table.getState().pagination.pageSize, " / ").concat((_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.page)),
         onItemSelect: function(e) {
             return table.setPageSize(Number(e));
         }
@@ -5471,11 +5524,11 @@ var DataTable = function(_param) {
         className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 hawa-text-sm  "
     }, /* @__PURE__ */ React40.createElement("span", {
         className: "hawa-flex hawa-items-center hawa-gap-1"
-    }, /* @__PURE__ */ React40.createElement("div", null, (_props_texts6 = props.texts) === null || _props_texts6 === void 0 ? void 0 : _props_texts6.page), /* @__PURE__ */ React40.createElement("div", {
+    }, /* @__PURE__ */ React40.createElement("div", null, (_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.page), /* @__PURE__ */ React40.createElement("div", {
         className: "hawa-flex hawa-flex-row hawa-gap-1"
     }, /* @__PURE__ */ React40.createElement("span", {
         className: "hawa-font-bold"
-    }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React40.createElement("span", null, (_props_texts7 = props.texts) === null || _props_texts7 === void 0 ? void 0 : _props_texts7.of), /* @__PURE__ */ React40.createElement("span", {
+    }, table.getState().pagination.pageIndex + 1), /* @__PURE__ */ React40.createElement("span", null, (_props_texts8 = props.texts) === null || _props_texts8 === void 0 ? void 0 : _props_texts8.of), /* @__PURE__ */ React40.createElement("span", {
         className: "hawa-font-bold"
     }, table.getPageCount())))), /* @__PURE__ */ React40.createElement(Button, {
         "aria-label": "Previous Table Page",
@@ -9720,6 +9773,14 @@ function useTabs() {
     DocsLayout: DocsLayout,
     DocsSidebar: DocsSidebar,
     DropdownMenu: DropdownMenu,
+    DropdownMenuCheckboxItem: DropdownMenuCheckboxItem,
+    DropdownMenuContent: DropdownMenuContent,
+    DropdownMenuItem: DropdownMenuItem,
+    DropdownMenuLabel: DropdownMenuLabel,
+    DropdownMenuRoot: DropdownMenuRoot,
+    DropdownMenuSeparator: DropdownMenuSeparator,
+    DropdownMenuSubTrigger: DropdownMenuSubTrigger,
+    DropdownMenuTrigger: DropdownMenuTrigger,
     EmptyState: EmptyState,
     FeedbackEmoji: FeedbackEmoji,
     FeedbackForm: FeedbackForm,

package/dist/index.mjs

@@ -5029,6 +5029,10 @@ var DataTable = ({
   columns,
   data,
   paginationPosition = "bottom",
+  translateFn,
+  enableHideColumns,
+  enableSearch,
+  enableGoTo,
   ...props
 }) => {
   const [sorting, setSorting] = React40.useState([
@@ -5069,7 +5073,7 @@ var DataTable = ({
     label: `${item} / ${pageText}`,
     value: item
   }));
-  return /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-items-center" }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, enableSearch || enableHideColumns && /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-items-center hawa-flex-row hawa-gap-4" }, enableSearch && /* @__PURE__ */ React40.createElement(
     Input,
     {
       forceHideHelperText: true,
@@ -5079,7 +5083,35 @@ var DataTable = ({
       margin: "none",
       className: "hawa-w-full md:hawa-max-w-sm"
     }
-  )), props.isLoading ? /* @__PURE__ */ React40.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React40.createElement(
+  ), enableHideColumns && /* @__PURE__ */ React40.createElement(DropdownMenuRoot, null, /* @__PURE__ */ React40.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React40.createElement(
+    Button,
+    {
+      variant: "outline",
+      className: "hawa-flex hawa-flex-row hawa-gap-2"
+    },
+    props.texts?.columns || "Columns",
+    /* @__PURE__ */ React40.createElement(
+      "svg",
+      {
+        "aria-label": "Chevron down Icon",
+        stroke: "currentColor",
+        fill: "currentColor",
+        viewBox: "0 0 16 16",
+        className: "hawa-h-3 hawa-w-3 hawa-rotate-90 hawa-shrink-0 hawa-transition-transform hawa-duration-200 "
+      },
+      /* @__PURE__ */ React40.createElement("path", { d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" })
+    )
+  )), /* @__PURE__ */ React40.createElement(DropdownMenuContent, { align: "end" }, table.getAllColumns().filter((column) => column.getCanHide()).map((column) => {
+    return /* @__PURE__ */ React40.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        key: column.id,
+        checked: column.getIsVisible(),
+        onCheckedChange: (value) => column.toggleVisibility(!!value)
+      },
+      translateFn ? translateFn(column.id) : column.id
+    );
+  })))), props.isLoading ? /* @__PURE__ */ React40.createElement(Skeleton, { className: "hawa-h-[130px] hawa-w-full" }) : /* @__PURE__ */ React40.createElement(
     "div",
     {
       className: cn(
@@ -5137,7 +5169,7 @@ var DataTable = ({
       /* @__PURE__ */ React40.createElement("span", null, props.texts?.total),
       " ",
       /* @__PURE__ */ React40.createElement("span", null, table.getFilteredRowModel().rows.length.toLocaleString())
-    ), table.getPageCount() !== 0 && /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 " }, props.enableGoTo && /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center hawa-items-center hawa-gap-2" }, /* @__PURE__ */ React40.createElement("span", { className: "hawa-text-sm" }, props.texts?.goTo), /* @__PURE__ */ React40.createElement(
+    ), table.getPageCount() !== 0 && /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-w-fit hawa-flex-row hawa-items-center hawa-gap-2 " }, enableGoTo && /* @__PURE__ */ React40.createElement("div", { className: "hawa-flex hawa-flex-row hawa-justify-center hawa-items-center hawa-gap-2" }, /* @__PURE__ */ React40.createElement("span", { className: "hawa-text-sm" }, props.texts?.goTo), /* @__PURE__ */ React40.createElement(
       "input",
       {
         max: table.getPageCount(),
@@ -9765,6 +9797,14 @@ export {
   DocsLayout,
   DocsSidebar,
   DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRoot,
+  DropdownMenuSeparator,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
   EmptyState,
   FeedbackEmoji,
   FeedbackForm,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.14.3-next",
+  "version": "0.14.5-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {