@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/ui/table/UnifiedTableBody.tsx

@@ -0,0 +1,440 @@
+/**
+ * @file Unified Table Body Component with Virtual Scrolling
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.3.0
+ *
+ * A unified table body component that handles both standard and virtualized rendering
+ * based on data size. This eliminates the need for separate virtualized components
+ * while maintaining all features consistently.
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { type Table, type Row, type HeaderGroup } from '@tanstack/react-table';
+import { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
+import { EmptyState } from './EmptyState';
+import { FilterRow } from './FilterRow';
+import { MemoizedRow } from './RowComponent';
+import { renderEditField } from './EditFields';
+import { getTableCellClasses } from '../../styles';
+import { Button } from '../../../Button/Button';
+import { Input } from '../../../Input/Input';
+import { createLogger } from '../../../../utils/core/logger';
+import type {
+  AggregateConfig,
+  CellValue,
+  DataRecord,
+  DataTableAction,
+  EditableColumnDef,
+  EmptyStateConfig,
+  HierarchicalConfig,
+  RowActionsProp,
+} from '../../types';
+import { getRowIdSafe } from '../../utils/rowUtils';
+
+/** Renders the single "new row" creation row with edit cells and save/cancel buttons. */
+function CreationRow<TData extends DataRecord>({
+  headerGroups,
+  creationData,
+  onCreationDataChange,
+  onSaveCreation,
+  onCancelCreation,
+}: {
+  headerGroups: HeaderGroup<TData>[];
+  creationData: Record<string, CellValue>;
+  onCreationDataChange: (data: Record<string, CellValue>) => void;
+  onSaveCreation: () => void;
+  onCancelCreation: () => void;
+}) {
+  const headers = headerGroups[0]?.headers
+    ?.filter((h) => (typeof h.column.getIsVisible === 'function' ? h.column.getIsVisible() : true))
+    ?.filter((h) => h.column.id !== 'actions') ?? [];
+
+  return (
+    <tr>
+      {headers.map((header) => {
+        if (header.column.id === 'select') {
+          return (
+            <td
+              key={header.column.id}
+              className={getTableCellClasses({ isCompact: true, className: 'px-3 py-2' })}
+            />
+          );
+        }
+        const columnDef = header.column.columnDef as EditableColumnDef<TData>;
+        const dataKey = columnDef.editAccessorKey || (columnDef as { accessorKey?: string }).accessorKey || header.column.id;
+        const editField = renderEditField(
+          header.column,
+          creationData[dataKey] ?? creationData[header.column.id] ?? '',
+          (value) => {
+            if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+              onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
+            } else {
+              onCreationDataChange({ ...creationData, [dataKey]: value as CellValue });
+            }
+          },
+          creationData
+        );
+        return (
+          <td
+            key={header.column.id}
+            className={getTableCellClasses({ isCompact: true, className: 'px-3 py-2' })}
+          >
+            {editField || (
+              <Input
+                type="text"
+                value={String(creationData[dataKey] ?? creationData[header.column.id] ?? '')}
+                onChange={(e) => onCreationDataChange({ ...creationData, [dataKey]: e.target.value as CellValue })}
+                placeholder={`Enter ${columnDef.header || header.column.id}...`}
+                className="h-8"
+              />
+            )}
+          </td>
+        );
+      })}
+      <td className={getTableCellClasses({ isCompact: true, className: 'px-3 py-2 flex gap-1' })}>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onSaveCreation}
+          className="size-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+          title="Save new row"
+          aria-label="Save new row"
+        >
+          <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden>
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onCancelCreation}
+          className="size-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+          title="Cancel new row"
+          aria-label="Cancel new row"
+        >
+          <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden>
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </Button>
+      </td>
+    </tr>
+  );
+}
+
+/** Renders either virtualized or standard list of MemoizedRow. */
+function TableBodyRows<TData extends DataRecord>({
+  rows,
+  virtualRows,
+  effectiveShouldVirtualize,
+  editingRowId,
+  editingData,
+  onEditingDataChange,
+  onSaveEditing,
+  onCancelEditing,
+  getRowId,
+  grouping,
+  hierarchical,
+  actions,
+  rbac,
+  permissions,
+  table,
+}: {
+  rows: Row<TData>[];
+  virtualRows: VirtualItem[];
+  effectiveShouldVirtualize: boolean;
+  editingRowId: string | null;
+  editingData: Record<string, CellValue>;
+  onEditingDataChange: (data: Record<string, CellValue>) => void;
+  onSaveEditing?: () => void;
+  onCancelEditing?: () => void;
+  getRowId?: (row: TData, index: number) => string;
+  grouping: string[];
+  hierarchical?: UnifiedTableBodyProps<TData>['hierarchical'];
+  actions: DataTableAction<TData>[];
+  rbac?: UnifiedTableBodyProps<TData>['rbac'];
+  permissions?: UnifiedTableBodyProps<TData>['permissions'];
+  table: Table<TData>;
+}) {
+  const rowSelection = table.getState().rowSelection;
+  const rowActions: RowActionsProp = actions as RowActionsProp;
+
+  if (effectiveShouldVirtualize && virtualRows.length > 0) {
+    return (
+      <>
+        {virtualRows.map((virtualRow: VirtualItem) => {
+          const row = rows[virtualRow.index];
+          if (!row) return null;
+          const rowId = getRowIdSafe(row.original, row.index, getRowId as (row: DataRecord, index: number) => string);
+          const isEditing = editingRowId === rowId;
+          return (
+            <MemoizedRow
+              key={row.id}
+              row={row as unknown as Row<DataRecord>}
+              isEditing={isEditing}
+              editingData={editingData as Record<string, unknown>}
+              onEditingDataChange={onEditingDataChange as (data: Record<string, unknown>) => void}
+              onSaveEditing={onSaveEditing}
+              onCancelEditing={onCancelEditing}
+              getRowId={getRowId as (row: DataRecord, index: number) => string}
+              grouping={grouping}
+              editingRowId={editingRowId}
+              hierarchical={hierarchical}
+              rowSelection={rowSelection}
+              actions={rowActions}
+              rbac={rbac}
+              permissions={permissions}
+              style={
+                // Standard 5 exception: inline style required for TanStack Virtual row positioning
+                {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: `${virtualRow.size}px`,
+                transform: `translateY(${virtualRow.start}px)`,
+                }
+              }
+            />
+          );
+        })}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {rows.map((row) => {
+        const rowId = getRowIdSafe(row.original, row.index, getRowId as (row: DataRecord, index: number) => string);
+        const isEditing = editingRowId === rowId;
+        return (
+          <MemoizedRow
+            key={row.id}
+            row={row as unknown as Row<DataRecord>}
+            isEditing={isEditing}
+            editingData={editingData as Record<string, unknown>}
+            onEditingDataChange={onEditingDataChange as (data: Record<string, unknown>) => void}
+            onSaveEditing={onSaveEditing}
+            onCancelEditing={onCancelEditing}
+            getRowId={getRowId as (row: DataRecord, index: number) => string}
+            grouping={grouping}
+            editingRowId={editingRowId}
+            hierarchical={hierarchical}
+            rowSelection={rowSelection}
+            actions={rowActions}
+            rbac={rbac}
+            permissions={permissions}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+// Performance thresholds
+const VIRTUALIZATION_THRESHOLD = 1000;
+
+/**
+ * Props for the unified table body component
+ */
+interface UnifiedTableBodyProps<TData extends DataRecord> {
+  /** TanStack table instance */
+  table: Table<TData>;
+  /** Whether a new row is being created */
+  isCreating: boolean;
+  /** Data for the row being created */
+  creationData: Record<string, CellValue>;
+  /** Callback when creation data changes */
+  onCreationDataChange: (data: Record<string, CellValue>) => void;
+  /** Callback to save the new row */
+  onSaveCreation: () => void;
+  /** Callback to cancel row creation */
+  onCancelCreation: () => void;
+  /** ID of the row currently being edited */
+  editingRowId: string | null;
+  /** Data for the row being edited */
+  editingData: Record<string, CellValue>;
+  /** Callback when editing data changes */
+  onEditingDataChange: (data: Record<string, CellValue>) => void;
+  /** Callback to save the edited row */
+  onSaveEditing?: () => void;
+  /** Callback to cancel row editing */
+  onCancelEditing?: () => void;
+  /** Current grouping configuration */
+  grouping: string[];
+  /** Aggregate configurations for grouped data */
+  aggregates: AggregateConfig[];
+  /** Function to get unique row ID */
+  getRowId?: (row: TData, index: number) => string;
+  /** Custom empty state configuration */
+  emptyState?: EmptyStateConfig;
+  /** Whether the table is currently filtered */
+  isFiltered?: boolean;
+  /** Callback to clear all filters */
+  onClearFilters?: () => void;
+  /** Whether filtering is enabled */
+  enableFiltering?: boolean;
+  /** Whether the filter row should be visible */
+  showFilterRow?: boolean;
+  /** Table ID for persistence */
+  tableId?: string;
+  /** Data length for virtualization decision */
+  dataLength: number;
+  /** Virtual height for virtualized rendering */
+  virtualHeight?: number;
+  /** Whether to force virtualization */
+  forceVirtualization?: boolean;
+  /** Hierarchical configuration for parent/child rows */
+  hierarchical?: HierarchicalConfig & {
+    state?: {
+      isExpanded: (rowId: string) => boolean;
+      hasChildren: (rowId: string) => boolean;
+      getChildrenCount: (rowId: string) => number;
+      toggleRow: (rowId: string) => void;
+    };
+    expandAll?: () => void;
+    collapseAll?: () => void;
+    isAllExpanded?: boolean;
+    hasAnyChildren?: boolean;
+  };
+  /** Actions for action buttons */
+  actions?: DataTableAction<TData>[];
+  // MANDATORY RBAC
+  rbac?: {
+    pageId?: string;
+    pageName?: string;
+  };
+  permissions?: {
+    canRead: { can: boolean; isLoading: boolean };
+    canCreate: { can: boolean; isLoading: boolean };
+    canUpdate: { can: boolean; isLoading: boolean };
+    canDelete: { can: boolean; isLoading: boolean };
+    canExport: { can: boolean; isLoading: boolean };
+    canImport: { can: boolean; isLoading: boolean };
+  };
+}
+
+/**
+ * Unified table body component with intelligent virtualization
+ */
+export function UnifiedTableBody<TData extends DataRecord>({
+  table,
+  isCreating,
+  creationData,
+  onCreationDataChange,
+  onSaveCreation,
+  onCancelCreation,
+  editingRowId,
+  editingData,
+  onEditingDataChange,
+  onSaveEditing,
+  onCancelEditing,
+  grouping,
+  aggregates: _aggregates,
+  getRowId,
+  emptyState,
+  isFiltered,
+  onClearFilters,
+  enableFiltering = false,
+  showFilterRow = false,
+  dataLength,
+  virtualHeight: _virtualHeight = 600,
+  forceVirtualization = false,
+  hierarchical,
+  actions = [],
+  rbac,
+  permissions,
+}: UnifiedTableBodyProps<TData>) {
+  const logger = createLogger('UnifiedTableBody');
+
+  const bodyRef = useRef<HTMLTableSectionElement>(null);
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const shouldVirtualize = forceVirtualization || dataLength > VIRTUALIZATION_THRESHOLD;
+
+  const rows = table.getRowModel().rows;
+  const headerGroups = table.getHeaderGroups();
+
+  const hasScrollContainer = !!parentRef.current;
+  const effectiveShouldVirtualize = shouldVirtualize && hasScrollContainer;
+
+  const virtualizer = useVirtualizer({
+    count: effectiveShouldVirtualize ? rows.length : 0,
+    getScrollElement: () => parentRef.current || null,
+    estimateSize: () => 40,
+    overscan: 5,
+  });
+
+  const virtualRows = effectiveShouldVirtualize ? virtualizer.getVirtualItems() : [];
+
+  useEffect(() => {
+    if (shouldVirtualize && !hasScrollContainer) {
+      logger.warn('Virtualization enabled but no scroll container found. Falling back to standard rendering.', {
+        rowsLength: rows.length,
+        dataLength,
+      });
+    }
+  }, [shouldVirtualize, hasScrollContainer, rows.length, dataLength, logger]);
+
+  const renderTableContent = () => {
+    if (rows.length === 0) {
+      return (
+        <tr>
+          <td colSpan={table.getVisibleFlatColumns().length} className="px-3 py-2" role="status">
+            <EmptyState
+              title={emptyState?.title}
+              description={emptyState?.description}
+              icon={emptyState?.icon}
+              action={emptyState?.action}
+              isFiltered={isFiltered}
+              onClearFilters={onClearFilters}
+            />
+          </td>
+        </tr>
+      );
+    }
+
+    return (
+      <TableBodyRows
+        rows={rows}
+        virtualRows={virtualRows}
+        effectiveShouldVirtualize={effectiveShouldVirtualize}
+        editingRowId={editingRowId}
+        editingData={editingData}
+        onEditingDataChange={onEditingDataChange}
+        onSaveEditing={onSaveEditing}
+        onCancelEditing={onCancelEditing}
+        getRowId={getRowId}
+        grouping={grouping}
+        hierarchical={hierarchical}
+        actions={actions}
+        rbac={rbac}
+        permissions={permissions}
+        table={table}
+      />
+    );
+  };
+
+  return (
+    <tbody ref={bodyRef}>
+      {/* Unified Table Body - Same structure for both virtualized and standard */}
+      {isCreating && (
+        <CreationRow
+          headerGroups={headerGroups}
+          creationData={creationData}
+          onCreationDataChange={onCreationDataChange}
+          onSaveCreation={onSaveCreation}
+          onCancelCreation={onCancelCreation}
+        />
+      )}
+
+      {/* Filter Row */}
+      {showFilterRow && enableFiltering && <FilterRow table={table} visibleColumns={table.getHeaderGroups()[0]?.headers || []} />}
+
+      {/* Table Content */}
+      {renderTableContent()}
+    </tbody>
+  );
+}

package/src/components/DataTable/{components/__tests__ → ui/table}/cellValueUtils.test.ts

@@ -1,7 +1,7 @@
 /**
  * @file cellValueUtils Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.1.0
  *
  * Comprehensive tests for cellValueUtils covering value conversion, type handling,
@@ -9,7 +9,7 @@
  */
 
 import { describe, it, expect } from 'vitest';
-import { toCellValueRecord } from '../cellValueUtils';
+import { toCellValueRecord } from './cellValueUtils';
 import type { DataRecord } from '../../types';
 
 describe('cellValueUtils', () => {

package/src/components/DataTable/{components → ui/table}/cellValueUtils.ts

@@ -1,4 +1,4 @@
-import type { CellValue, DataRecord } from '../types';
+import type { CellValue, DataRecord } from '../../types';
 
 const isCellValue = (value: unknown): value is CellValue => {
   if (value === null || value === undefined) {

package/src/components/DataTable/{components/__tests__ → ui/toolbar}/BulkOperationsDropdown.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file BulkOperationsDropdown Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for BulkOperationsDropdown component following testing guidelines.
@@ -12,7 +12,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { BulkOperationsDropdown } from '../BulkOperationsDropdown';
+import { BulkOperationsDropdown } from './BulkOperationsDropdown';
 
 // Mock lucide-react icons - use importActual to include ChevronDown for Select
 vi.mock('lucide-react', async () => {
@@ -49,19 +49,26 @@ vi.mock('../../Button/Button', () => ({
 
 // Mock Select components - use importActual to avoid missing ChevronDown
 vi.mock('../../Select/Select', async () => {
+  const React = await import('react');
   const actual = await vi.importActual('../../Select/Select');
   return {
     ...actual,
     Select: ({ children, disabled }: any) => {
-      // Store disabled state in context or pass to children
       return (
         <form data-testid="select-root" data-disabled={disabled}>
           {children}
         </form>
       );
     },
-    SelectTrigger: ({ children, asChild, className, disabled }: any) => 
-      asChild ? children : <button data-testid="select-trigger" role="combobox" disabled={disabled} className={className}>{children}</button>,
+    SelectTrigger: ({ children, asChild, className, disabled, ...props }: any) =>
+      asChild
+        ? React.cloneElement(children as React.ReactElement, {
+            ...props,
+            'data-testid': 'select-trigger',
+            role: 'combobox',
+            className: [ (children as React.ReactElement).props?.className, className ].filter(Boolean).join(' '),
+          })
+        : <button data-testid="select-trigger" role="combobox" disabled={disabled} className={className}>{children}</button>,
     SelectContent: ({ children, className }: any) => (
       <ul data-testid="select-content" role="listbox" className={className}>{children}</ul>
     ),

package/src/components/DataTable/{components → ui/toolbar}/BulkOperationsDropdown.tsx

@@ -47,8 +47,8 @@ import {
   SelectContent, 
   SelectItem, 
   SelectTrigger 
-} from '../../Select/Select';
-import { Button } from '../../Button/Button';
+} from '../../../Select/Select';
+import { Button } from '../../../Button/Button';
 import { 
   MoreHorizontal, 
   Download, 
@@ -125,7 +125,7 @@ export function BulkOperationsDropdown({
           variant="outline" 
           size="sm"
           disabled={!hasSelection}
-          className={`min-w-[140px] h-9 px-3 py-2 text-sm font-medium ${className || ''}`}
+          className={`min-w-[140px] h-9 px-3 py-2 ${className || ''}`}
         >
           <MoreHorizontal className="size-4 mr-2 flex-shrink-0" />
           <span className="truncate">

package/src/components/DataTable/{components/__tests__ → ui/toolbar}/ColumnVisibilityDropdown.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file ColumnVisibilityDropdown Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for ColumnVisibilityDropdown component following testing guidelines.
@@ -12,7 +12,7 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { ColumnVisibilityDropdown } from '../ColumnVisibilityDropdown';
+import { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
 import type { Column } from '@tanstack/react-table';
 
 // Mock lucide-react icons - use importActual to include ChevronDown for Select
@@ -62,6 +62,7 @@ vi.mock('../../Checkbox/Checkbox', () => ({
 
 // Mock Select components - use importActual to avoid missing ChevronDown
 vi.mock('../../Select/Select', async () => {
+  const React = await import('react');
   const actual = await vi.importActual('../../Select/Select');
   return {
     ...actual,
@@ -70,8 +71,10 @@ vi.mock('../../Select/Select', async () => {
         {children}
       </form>
     ),
-    SelectTrigger: ({ children, asChild, className }: any) => 
-      asChild ? children : <button data-testid="select-trigger" role="combobox" className={className}>{children}</button>,
+    SelectTrigger: ({ children, asChild, className, ...props }: any) =>
+      asChild
+        ? React.cloneElement(children as React.ReactElement, { ...props, 'data-testid': 'select-trigger', role: 'combobox', className })
+        : <button data-testid="select-trigger" role="combobox" className={className}>{children}</button>,
     SelectContent: ({ children }: any) => (
       <ul data-testid="select-content" role="listbox">{children}</ul>
     ),

package/src/components/DataTable/{components → ui/toolbar}/ColumnVisibilityDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Column } from '@tanstack/react-table';
-import { Button } from '../../Button/Button';
+import { Button } from '../../../Button/Button';
 import { 
   Select,
   SelectContent,
@@ -8,9 +8,9 @@ import {
   SelectGroup,
   SelectSeparator,
   SelectTrigger,
-} from '../../Select/Select';
-import { Label } from '../../Label/Label';
-import { Checkbox } from '../../Checkbox/Checkbox';
+} from '../../../Select/Select';
+import { Label } from '../../../Label/Label';
+import { Checkbox } from '../../../Checkbox/Checkbox';
 import { Settings2, Eye, EyeOff } from 'lucide-react';
 
 /**
@@ -53,7 +53,7 @@ export function ColumnVisibilityDropdown<TData>({
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 px-2 text-xs flex-1"
+            className="h-7 px-2 flex-1"
             onClick={() => {
               toggleableColumns.forEach(column => {
                 if (!column.getIsVisible()) {
@@ -68,7 +68,7 @@ export function ColumnVisibilityDropdown<TData>({
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 px-2 text-xs flex-1"
+            className="h-7 px-2 flex-1"
             onClick={() => {
               toggleableColumns.forEach(column => {
                 if (column.getIsVisible()) {
@@ -87,7 +87,7 @@ export function ColumnVisibilityDropdown<TData>({
             <SelectItem 
               key={column.id} 
               value={column.id}
-              className="flex items-center space-x-2 cursor-pointer px-3 py-2 text-sm hover:bg-sec-50"
+              className="flex items-center space-x-2 cursor-pointer px-3 py-2 hover:bg-sec-50"
               onClick={(e) => e.preventDefault()}
             >
                             <Label htmlFor={column.id}

package/src/components/DataTable/{components/__tests__ → ui/toolbar}/DataTableToolbar.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file DataTableToolbar Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for DataTableToolbar component following testing guidelines.
@@ -12,10 +12,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { DataTableToolbar } from '../DataTableToolbar';
+import { DataTableToolbar } from './DataTableToolbar';
 import type { DataTableFeatureConfig, DataTableRBACConfig } from '../../types';
 
-vi.mock('../GroupingDropdown', () => ({
+vi.mock('./GroupingDropdown', () => ({
   GroupingDropdown: ({ onGroupByChange, currentGroupBy }: any) => (
     <button 
       onClick={() => onGroupByChange('grouped')} 
@@ -27,7 +27,7 @@ vi.mock('../GroupingDropdown', () => ({
   ),
 }));
 
-vi.mock('../ColumnVisibilityDropdown', () => ({
+vi.mock('./ColumnVisibilityDropdown', () => ({
   ColumnVisibilityDropdown: ({ onColumnVisibilityChange }: any) => (
     <button
       onClick={() => onColumnVisibilityChange('column-id', true)}

package/src/components/DataTable/{components → ui/toolbar}/DataTableToolbar.tsx

@@ -53,12 +53,12 @@
  */
 
 import React from 'react';
-import { Input } from '../../Input/Input';
-import { Button } from '../../Button/Button';
+import { Input } from '../../../Input/Input';
+import { Button } from '../../../Button/Button';
 import { Plus, Upload, Download, Filter, Trash2 } from 'lucide-react';
 import { GroupingDropdown } from './GroupingDropdown';
 import { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
-import type { DataTableColumn, DataRecord, SimpleColumn, DataTableFeatureConfig, DataTableRBACConfig } from '../types';
+import type { DataTableColumn, DataRecord, SimpleColumn, DataTableFeatureConfig, DataTableRBACConfig } from '../../types';
 import type { Column } from '@tanstack/react-table';
 
 /**
@@ -172,7 +172,7 @@ export function DataTableToolbar<TData extends DataRecord>({
 
   return (
 
-<nav className="flex justify-end flex-wrap gap-2">
+<nav className="flex justify-end flex-wrap gap-2 print:hidden">
       {features.search && (
 
           <Input