feat: enhance data-table with search, filter/setting drawers, and updated UI controls

packages/ui/src/components/actions-tools/page-actions.tsx

@@ -1,5 +1,5 @@
 import { memo, Fragment } from 'react';
-import { Group, Button, Menu, Divider, ActionIcon, Box, ButtonProps, Tooltip } from '@mantine/core';
+import { Group, Button, Menu, Divider, ActionIcon, Box, ButtonProps, Tooltip, MantineSpacing } from '@mantine/core';
 import { ChevronDown, MoreVertical } from 'lucide-react';
 import { PageActionProps } from './types';
 import { getIntentColor } from './utils';
@@ -8,13 +8,16 @@ export interface PageActionsProps {
   /** Array of configured page-level actions. */
   actions?: PageActionProps[];
   customButtonProps?: (action: PageActionProps) => ButtonProps;
+  gapActionDesktop?:MantineSpacing;
+  gapActionMobile?:MantineSpacing
 }
 
 /**
  * A responsive and flexible presentational component for page-level actions.
  * Automatically adapts layout based on screen size.
  */
-export const PageActions = memo(function PageActions({ actions = [], customButtonProps }: PageActionsProps) {
+export const PageActions = memo(function PageActions(props: PageActionsProps) {
+  const { actions = [], customButtonProps, gapActionDesktop='xs', gapActionMobile='sm' }=props;
   if (!actions || actions?.length === 0) {
     return null;
   }
@@ -33,7 +36,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
   return (
     <Box style={{ display: 'inline-flex' }}>
       {/* --- DESKTOP VIEW --- */}
-      <Group gap="xs" wrap="nowrap" visibleFrom="md">
+      <Group gap={gapActionDesktop}  wrap="nowrap" visibleFrom="md">
         {actions.map((action, index) => {
           if (action.type === 'divider') {
             return <Divider key={`divider-${index}`} orientation="vertical" mr="sm" ml="sm" />;
@@ -139,7 +142,7 @@ export const PageActions = memo(function PageActions({ actions = [], customButto
       </Group>
 
       {/* --- MOBILE VIEW --- */}
-      <Group gap="xs" wrap="nowrap" hiddenFrom="md">
+      <Group gap={gapActionMobile} wrap="nowrap" hiddenFrom="md">
         <Menu position="bottom-end" withArrow withinPortal>
           <Menu.Target>
             <ActionIcon variant="outline" size="md">