feat(DataTableToolbar): add reusable toolbar component for Meshery UI migration

src/__testing__/DataTableToolbar.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { DataTableToolbar } from '../custom/DataTableToolbar';
+import { SistentThemeProvider } from '../theme';
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<SistentThemeProvider>{ui}</SistentThemeProvider>);
+
+describe('DataTableToolbar', () => {
+  it('renders primaryActions content', () => {
+    renderWithTheme(<DataTableToolbar primaryActions={<button>Add</button>} />);
+    expect(screen.getByRole('button', { name: 'Add' })).toBeTruthy();
+  });
+
+  it('renders secondaryActions content', () => {
+    renderWithTheme(<DataTableToolbar secondaryActions={<button>Export</button>} />);
+    expect(screen.getByRole('button', { name: 'Export' })).toBeTruthy();
+  });
+
+  it('renders search slot', () => {
+    renderWithTheme(<DataTableToolbar search={<input placeholder="Search" />} />);
+    expect(screen.getByPlaceholderText('Search')).toBeTruthy();
+  });
+
+  it('renders filter slot', () => {
+    renderWithTheme(<DataTableToolbar filter={<div>Filter</div>} />);
+    expect(screen.getByText('Filter')).toBeTruthy();
+  });
+
+  it('renders columnVisibility slot', () => {
+    renderWithTheme(<DataTableToolbar columnVisibility={<div>Columns</div>} />);
+    expect(screen.getByText('Columns')).toBeTruthy();
+  });
+
+  it('renders viewSwitch slot', () => {
+    renderWithTheme(<DataTableToolbar viewSwitch={<div>Grid/Table</div>} />);
+    expect(screen.getByText('Grid/Table')).toBeTruthy();
+  });
+
+  it('renders all slots simultaneously', () => {
+    renderWithTheme(
+      <DataTableToolbar
+        primaryActions={<button>Add</button>}
+        search={<input placeholder="Search" />}
+        filter={<div>Filter</div>}
+      />
+    );
+    expect(screen.getByRole('button', { name: 'Add' })).toBeTruthy();
+    expect(screen.getByPlaceholderText('Search')).toBeTruthy();
+    expect(screen.getByText('Filter')).toBeTruthy();
+  });
+
+  it('renders without any props (empty state)', () => {
+    const { container } = renderWithTheme(<DataTableToolbar />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it('applies custom sx styles', () => {
+    const { container } = renderWithTheme(<DataTableToolbar sx={{ marginTop: '32px' }} />);
+    const root = container.firstChild as HTMLElement;
+    expect(root).toHaveStyle('margin-top: 32px');
+  });
+});

src/custom/DataTableToolbar/DataTableToolbar.tsx

@@ -0,0 +1,61 @@
+import { Box } from '../../base';
+import { styled } from '../../theme';
+import type { DataTableToolbarProps } from './DataTableToolbar.types';
+
+const ToolbarRoot = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: theme.spacing(4),
+  minHeight: theme.spacing(8),
+  padding: theme.spacing(1.5),
+  backgroundColor: theme.palette.background.card,
+  borderRadius: theme.spacing(1),
+  boxShadow: theme.shadows[2],
+
+  [theme.breakpoints.down('sm')]: {
+    height: 'auto',
+    flexWrap: 'wrap',
+    padding: theme.spacing(1),
+    gap: theme.spacing(1)
+  }
+}));
+
+const Section = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1)
+}));
+
+export function DataTableToolbar({
+  primaryActions,
+  secondaryActions,
+  search,
+  filter,
+  columnVisibility,
+  viewSwitch,
+  sx
+}: DataTableToolbarProps): JSX.Element {
+  const hasLeftContent = Boolean(primaryActions) || Boolean(secondaryActions);
+  const hasRightContent =
+    Boolean(filter) || Boolean(search) || Boolean(columnVisibility) || Boolean(viewSwitch);
+
+  return (
+    <ToolbarRoot sx={sx}>
+      {hasLeftContent && (
+        <Section>
+          {primaryActions}
+          {secondaryActions}
+        </Section>
+      )}
+      {hasRightContent && (
+        <Section>
+          {filter}
+          {search}
+          {columnVisibility}
+          {viewSwitch}
+        </Section>
+      )}
+    </ToolbarRoot>
+  );
+}

src/custom/DataTableToolbar/DataTableToolbar.types.ts

@@ -0,0 +1,24 @@
+import type { SxProps, Theme } from '@mui/material';
+
+export interface DataTableToolbarProps {
+  /** Left side: primary action buttons (Add, Create, Import) */
+  primaryActions?: React.ReactNode;
+
+  /** Left side next to primary: secondary actions (Export, bulk delete) */
+  secondaryActions?: React.ReactNode;
+
+  /** Right side: SearchBar component */
+  search?: React.ReactNode;
+
+  /** Right side: UniversalFilter component */
+  filter?: React.ReactNode;
+
+  /** Right side: Column visibility control */
+  columnVisibility?: React.ReactNode;
+
+  /** Right side: Grid/table view toggle */
+  viewSwitch?: React.ReactNode;
+
+  /** Custom styles for migration compatibility */
+  sx?: SxProps<Theme>;
+}

src/custom/DataTableToolbar/index.tsx

@@ -0,0 +1,2 @@
+export { DataTableToolbar } from './DataTableToolbar';
+export type { DataTableToolbarProps } from './DataTableToolbar.types';

src/custom/index.tsx

@@ -14,6 +14,7 @@ import {
 } from './CustomColumnVisibilityControl/CustomColumnVisibilityControl';
 import { CustomImage } from './CustomImage';
 import { CustomTooltip, InfoTooltip } from './CustomTooltip';
+import { DataTableToolbar } from './DataTableToolbar';
 import {
   CustomDialog,
   StyledDialogActions,
@@ -94,6 +95,7 @@ export {
   CustomImage,
   CustomTooltip,
   DataTableEllipsisMenu,
+  DataTableToolbar,
   EmptyState,
   EmptyStateCard,
   ErrorBoundary,
@@ -154,6 +156,7 @@ export type {
   CustomColumn,
   CustomColumnVisibilityControlProps,
   CustomDialogProps,
+  DataTableToolbarProps,
   FlipCardProps,
   IPopperListener,
   ResponsiveDataTableProps,