react-restyle-components 0.4.50 → 0.4.52

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.d.ts

@@ -1,102 +1,4 @@
-import React, { CSSProperties } from 'react';
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type ModalPosition = 'center' | 'top' | 'bottom';
-export interface ModalClassNames {
-    /** Custom className for the overlay */
-    overlay?: string;
-    /** Custom className for the modal container */
-    container?: string;
-    /** Custom className for the modal wrapper */
-    wrapper?: string;
-    /** Custom className for the modal content */
-    content?: string;
-    /** Custom className for the header */
-    header?: string;
-    /** Custom className for the title */
-    title?: string;
-    /** Custom className for the close button */
-    closeButton?: string;
-    /** Custom className for the body/children container */
-    body?: string;
-}
-export interface ModalStyles {
-    /** Custom style for the overlay */
-    overlay?: CSSProperties;
-    /** Custom style for the modal container */
-    container?: CSSProperties;
-    /** Custom style for the modal wrapper */
-    wrapper?: CSSProperties;
-    /** Custom style for the modal content */
-    content?: CSSProperties;
-    /** Custom style for the header */
-    header?: CSSProperties;
-    /** Custom style for the title */
-    title?: CSSProperties;
-    /** Custom style for the close button */
-    closeButton?: CSSProperties;
-    /** Custom style for the body/children container */
-    body?: CSSProperties;
-}
-export interface ModalProps {
-    /** Controls modal visibility */
-    visible: boolean;
-    /** Modal title text */
-    title?: string;
-    /** Additional className for the modal container */
-    className?: string;
-    /** Additional className for the modal content */
-    contentClassName?: string;
-    /** Additional className for the header */
-    headerClassName?: string;
-    /** Inline styles for the modal container */
-    style?: React.CSSProperties;
-    /** Inline styles for the modal content */
-    contentStyle?: React.CSSProperties;
-    /** Callback when modal should close */
-    onClose?: () => void;
-    /** Auto close modal after delay (in milliseconds) */
-    isAutoClose?: boolean | number;
-    /** Auto close delay in milliseconds (default: 1000) */
-    autoCloseDelay?: number;
-    /** Modal size: sm, md, lg, xl, full */
-    size?: ModalSize;
-    /** Modal vertical position */
-    position?: ModalPosition;
-    /** Show/hide close button */
-    showCloseButton?: boolean;
-    /** Custom close button element */
-    closeButton?: React.ReactNode;
-    /** Overlay background opacity (0-1) */
-    overlayOpacity?: number;
-    /** Overlay background color */
-    overlayColor?: string;
-    /** Base z-index for overlay/content stack */
-    zIndex?: number;
-    /** Click overlay to close */
-    closeOnOverlayClick?: boolean;
-    /** Close on Escape key */
-    closeOnEscape?: boolean;
-    /** Show header section */
-    showHeader?: boolean;
-    /** Header background color */
-    headerBgColor?: string;
-    /** Header text color */
-    headerTextColor?: string;
-    /** Border radius */
-    borderRadius?: string;
-    /** Max width (CSS value) */
-    maxWidth?: string;
-    /** Padding for content area */
-    contentPadding?: string;
-    /** Header padding */
-    headerPadding?: string;
-    /** Animation duration (in ms) */
-    animationDuration?: number;
-    /** Custom classNames for component parts */
-    classNames?: ModalClassNames;
-    /** Custom inline styles for component parts */
-    styles?: ModalStyles;
-    /** Modal content */
-    children: React.ReactNode;
-}
-export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, zIndex, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;
+import React from 'react';
+export type { ModalSize, ModalPosition, ModalClassNames, ModalStyles, ModalProps } from './types';
+import type { ModalProps } from './types';
+export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, isAutoCloseOutside, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, zIndex, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, zIndex = 11000, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
+export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, isAutoCloseOutside, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, zIndex = 11000, closeOnOverlayClick, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
+    // isAutoCloseOutside takes priority, then closeOnOverlayClick, default true
+    const shouldCloseOnOutsideClick = isAutoCloseOutside ?? closeOnOverlayClick ?? true;
     const [showModal, setShowModal] = useState(visible);
     const [isAnimating, setIsAnimating] = useState(false);
     useEffect(() => {
@@ -36,7 +38,7 @@ export const Modal = ({ visible, title = '', className = '', contentClassName =
         return () => document.removeEventListener('keydown', handleEscape);
     }, [showModal, closeOnEscape, onClose]);
     const handleOverlayClick = (e) => {
-        if (closeOnOverlayClick && e.target === e.currentTarget) {
+        if (shouldCloseOnOutsideClick && e.target === e.currentTarget) {
             onClose && onClose();
         }
     };

package/lib/src/core-components/src/components/Modal/BasicModal/types.d.ts

@@ -0,0 +1,103 @@
+import React, { CSSProperties } from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ModalPosition = 'center' | 'top' | 'bottom';
+export interface ModalClassNames {
+    /** Custom className for the overlay */
+    overlay?: string;
+    /** Custom className for the modal container */
+    container?: string;
+    /** Custom className for the modal wrapper */
+    wrapper?: string;
+    /** Custom className for the modal content */
+    content?: string;
+    /** Custom className for the header */
+    header?: string;
+    /** Custom className for the title */
+    title?: string;
+    /** Custom className for the close button */
+    closeButton?: string;
+    /** Custom className for the body/children container */
+    body?: string;
+}
+export interface ModalStyles {
+    /** Custom style for the overlay */
+    overlay?: CSSProperties;
+    /** Custom style for the modal container */
+    container?: CSSProperties;
+    /** Custom style for the modal wrapper */
+    wrapper?: CSSProperties;
+    /** Custom style for the modal content */
+    content?: CSSProperties;
+    /** Custom style for the header */
+    header?: CSSProperties;
+    /** Custom style for the title */
+    title?: CSSProperties;
+    /** Custom style for the close button */
+    closeButton?: CSSProperties;
+    /** Custom style for the body/children container */
+    body?: CSSProperties;
+}
+export interface ModalProps {
+    /** Controls modal visibility */
+    visible: boolean;
+    /** Modal title text */
+    title?: string;
+    /** Additional className for the modal container */
+    className?: string;
+    /** Additional className for the modal content */
+    contentClassName?: string;
+    /** Additional className for the header */
+    headerClassName?: string;
+    /** Inline styles for the modal container */
+    style?: CSSProperties;
+    /** Inline styles for the modal content */
+    contentStyle?: CSSProperties;
+    /** Callback when modal should close */
+    onClose?: () => void;
+    /** Auto close modal after delay (in milliseconds) */
+    isAutoClose?: boolean | number;
+    /** Auto close delay in milliseconds (default: 1000) */
+    autoCloseDelay?: number;
+    /** Auto close modal on outside click (default: true) */
+    isAutoCloseOutside?: boolean;
+    /** Modal size: sm, md, lg, xl, full */
+    size?: ModalSize;
+    /** Modal vertical position */
+    position?: ModalPosition;
+    /** Show/hide close button */
+    showCloseButton?: boolean;
+    /** Custom close button element */
+    closeButton?: React.ReactNode;
+    /** Overlay background opacity (0-1) */
+    overlayOpacity?: number;
+    /** Overlay background color */
+    overlayColor?: string;
+    /** Base z-index for overlay/content stack */
+    zIndex?: number;
+    /** Click overlay to close (alias for isAutoCloseOutside) */
+    closeOnOverlayClick?: boolean;
+    /** Close on Escape key */
+    closeOnEscape?: boolean;
+    /** Show header section */
+    showHeader?: boolean;
+    /** Header background color */
+    headerBgColor?: string;
+    /** Header text color */
+    headerTextColor?: string;
+    /** Border radius */
+    borderRadius?: string;
+    /** Max width (CSS value) */
+    maxWidth?: string;
+    /** Padding for content area */
+    contentPadding?: string;
+    /** Header padding */
+    headerPadding?: string;
+    /** Animation duration (in ms) */
+    animationDuration?: number;
+    /** Custom classNames for component parts */
+    classNames?: ModalClassNames;
+    /** Custom inline styles for component parts */
+    styles?: ModalStyles;
+    /** Modal content */
+    children: React.ReactNode;
+}

package/lib/src/core-components/src/components/Modal/BasicModal/types.js

@@ -0,0 +1 @@
+export {};

package/lib/src/core-components/src/components/Table/Table.js

@@ -49,6 +49,7 @@ const EmptyIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stro
 const RefreshIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M23 4v6h-6M1 20v-6h6", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const PrintIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "6", y: "14", width: "12", height: "8" })] }));
 const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 8v4M12 16h.01", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const tableFilterCache = new Map();
 export const Table = forwardRef(function TableComponent(props, ref) {
     const { id, data, columns, keyField = '_id', loading = false, loadingIndicator, pagination = true, paginationConfig, totalSize, remote = true, defaultSort, sort: controlledSort, filterable = false, defaultFilters, filters: controlledFilters, defaultShowFilters = true, showFilters: controlledShowFilters, onShowFiltersChange, showFilterToggle = true, searchable = true, searchPlaceholder = 'Search...', defaultSearchValue = '', searchValue: controlledSearchValue, searchDebounce = 300, rowSelection, expandable, editMode = 'dblclick', showEditIcon = false, onCellEdit, exportable = true, exportFileName = 'table_export', exportFormat = 'csv', columnToggle = false, isFieldSelector = true, bordered = true, striped = false, hover = true, compact = false, cellPadding, stickyHeader = false, maxHeight, rowClassName, rowStyle, classNames = {}, styles = {}, className, style, emptyText = 'No data available', onChange, onPageChange, onSortChange, onFilterChange, onSearch, onRowClick, onRowDoubleClick, onClearFilters, toolbar, hideToolbar = false, showFooter = false, caption, 
     // Quick configuration props
@@ -62,7 +63,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     // Toolbar customization
     toolbarPosition = 'top', toolbarLeft, toolbarRight, toolbarCenter, 
     // Refresh
-    refreshable = false, onRefresh, 
+    refreshable = false, onRefresh, isForceReload, 
     // Print
     printable = false, onPrint, 
     // Size
@@ -84,8 +85,15 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     // Resolve aliases
     const resolvedExportable = isExport ?? exportable;
     const resolvedExportFileName = fileName ?? exportFileName;
+    // Read cached filter/search state (survives remounts when parent changes React key)
+    const cachedFilterState = tableFilterCache.get(id);
     // Auto-detect remote mode: if totalSize <= data.length, use client-side (remote=false)
+    // Exception: if onFilter is provided, always use remote mode (server handles filtering)
     const resolvedRemote = useMemo(() => {
+        // If onFilter callback is provided, data is server-filtered - never re-filter client-side
+        if (onFilter) {
+            return true;
+        }
         // If totalSize is provided and is <= data.length, all data is loaded - use client-side
         if (totalSize !== undefined &&
             totalSize > 0 &&
@@ -94,7 +102,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         }
         // Otherwise use the prop value (default: true)
         return remote;
-    }, [remote, totalSize, data.length]);
+    }, [remote, totalSize, data.length, onFilter]);
     // Handle isSelectRow shorthand
     const resolvedRowSelection = isSelectRow
         ? {
@@ -146,8 +154,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
     const tableRef = useRef(null);
     const columnToggleRef = useRef(null);
     const prevSelectionCountRef = useRef(0);
-    // State
-    const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
+    // Cache filter component references per dataField to keep stable React element types.
+    // Without this, factory functions like TextFilter({...}) create a new component ref
+    // on every render, causing React to unmount/remount the filter and lose typed text.
+    const filterComponentCacheRef = useRef(new Map());
+    // State (use cached values if available to survive remounts from key changes)
+    const [internalSearchValue, setInternalSearchValue] = useState(cachedFilterState?.searchValue ?? defaultSearchValue);
     const [internalShowFilters, setInternalShowFilters] = useState(defaultShowFilters);
     const [columnToggleOpen, setColumnToggleOpen] = useState(false);
     const [columnSearch, setColumnSearch] = useState('');
@@ -179,6 +191,13 @@ export const Table = forwardRef(function TableComponent(props, ref) {
             // Add new columns at the end
             const added = columns.filter((c) => !existingDataFields.has(c.dataField));
             setReorderedColumns([...preserved, ...added]);
+            // Clean up filter component cache for removed columns
+            const newFieldSet = new Set(columns.map((c) => c.dataField));
+            for (const key of filterComponentCacheRef.current.keys()) {
+                if (!newFieldSet.has(key)) {
+                    filterComponentCacheRef.current.delete(key);
+                }
+            }
         }
         else {
             // Same columns but maybe different data - update column data while preserving order
@@ -226,34 +245,53 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         // Clear cache when editing target changes
         editorRendererCacheRef.current.clear();
     }, [editingCell]);
+    // Force reload: when isForceReload toggles, trigger onRefresh
+    const prevForceReloadRef = useRef(isForceReload);
+    useEffect(() => {
+        if (prevForceReloadRef.current !== isForceReload &&
+            isForceReload !== undefined) {
+            prevForceReloadRef.current = isForceReload;
+            onRefresh?.();
+        }
+    }, [isForceReload, onRefresh]);
     const searchValue = controlledSearchValue ?? internalSearchValue;
     const debouncedSearchValue = useTableDebounce(searchValue, searchDebounce);
     // Sort state
     const { sort, handleSort } = useSortState(defaultSort, controlledSort);
-    // Filter state
-    const { filters, setFilter, clearFilters } = useFilterState(defaultFilters, controlledFilters);
+    // Filter state (prefer cached filters over defaultFilters to survive remounts)
+    const { filters, setFilter, clearFilters } = useFilterState(cachedFilterState?.filters ?? defaultFilters, controlledFilters);
     // Track if onFilter should be called (only after user interaction)
     const shouldCallOnFilter = useRef(false);
     const filterTypeRef = useRef('filter');
     const onFilterRef = useRef(onFilter);
     // Track last called values to prevent duplicate calls
     const lastOnFilterCallRef = useRef(null);
-    // Track focused filter field to restore focus after data changes
-    const focusedFilterFieldRef = useRef(null);
+    // Track focused filter field to restore focus after data changes (or remounts)
+    const focusedFilterFieldRef = useRef(cachedFilterState?.focusedField ?? null);
     const tableContainerRef = useRef(null);
+    // Helper: save current filter/search/focus state to module-level cache
+    const saveFilterCache = useCallback((updates) => {
+        const current = tableFilterCache.get(id) || {
+            filters: {},
+            searchValue: '',
+            focusedField: null,
+        };
+        tableFilterCache.set(id, { ...current, ...updates });
+    }, [id]);
     // Clear focus ref when clicking outside the table
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (tableContainerRef.current &&
                 !tableContainerRef.current.contains(event.target)) {
                 focusedFilterFieldRef.current = null;
+                saveFilterCache({ focusedField: null });
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, []);
+    }, [saveFilterCache]);
     // Restore filter focus after data changes
     useEffect(() => {
         const restoreFocus = () => {
@@ -283,7 +321,18 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         };
     }, [data]);
     // Pagination state
-    const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
+    const { page, pageSize, totalPages, goToPage, goToNextPage, goToPrevPage, goToFirstPage, goToLastPage, changePageSize, setPage, } = usePaginationState(resolvedPaginationConfig?.page || 0, resolvedPaginationConfig?.pageSize || 10, totalSize ?? data.length);
+    // Reset page to 0 when data changes (e.g., after server-side onFilter response)
+    // This ensures new data is visible without re-triggering onFilter.
+    const prevDataRef = useRef(data);
+    useEffect(() => {
+        if (prevDataRef.current !== data) {
+            prevDataRef.current = data;
+            if (page !== 0) {
+                setPage(0);
+            }
+        }
+    }, [data, page, setPage]);
     // Row selection
     const { selectedKeys, isSelected, toggleRow, toggleAll, isAllSelected, isIndeterminate, } = useRowSelection(data, resolvedRowSelection?.keyField || keyField, resolvedRowSelection?.mode || 'none', resolvedRowSelection?.selectedRowKeys, resolvedRowSelection?.getCheckboxProps);
     // Row expansion
@@ -421,7 +470,9 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         shouldCallOnFilter.current = true;
         filterTypeRef.current = 'search';
         onChange?.({ type: 'search', search: value });
-    }, [resetEditingState, onSearch, onChange]);
+        // Persist to cache
+        saveFilterCache({ searchValue: value });
+    }, [resetEditingState, onSearch, onChange, saveFilterCache]);
     // Handle sort
     const handleSortClick = useCallback((column) => {
         if (!column.sort)
@@ -441,7 +492,12 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         shouldCallOnFilter.current = true;
         filterTypeRef.current = 'filter';
         onChange?.({ type: 'filter', filters: newFilters });
-    }, [filters, setFilter, onFilterChange, onChange, resetEditingState]);
+        // Persist to cache (including focused field)
+        saveFilterCache({
+            filters: newFilters,
+            focusedField: focusedFilterFieldRef.current,
+        });
+    }, [filters, setFilter, onFilterChange, onChange, resetEditingState, saveFilterCache]);
     // Handle clear all filters
     const handleClearFilters = useCallback(() => {
         resetEditingState();
@@ -453,7 +509,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         onChange?.({ type: 'filter', filters: {} });
         // Reset the tracking ref so subsequent filters can trigger onFilter
         lastOnFilterCallRef.current = null;
+        // Clear the cache so remounts also start fresh
+        tableFilterCache.delete(id);
     }, [
+        id,
         clearFilters,
         onClearFilters,
         onFilterChange,
@@ -951,6 +1010,7 @@ export const Table = forwardRef(function TableComponent(props, ref) {
         return (_jsxs(Toolbar, { className: classNames.toolbar, style: styles.toolbar, children: [_jsxs(ToolbarGroup, { children: [toolbarLeft, searchable && (_jsxs(SearchInput, { children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", value: searchValue, onChange: (e) => handleSearchChange(e.target.value), onFocus: () => {
                                         // Clear column filter focus when global search is focused
                                         focusedFilterFieldRef.current = null;
+                                        saveFilterCache({ focusedField: null });
                                     }, placeholder: searchPlaceholder })] })), searchable && (_jsx(ToolbarButton, { onClick: () => handleSearchChange(''), disabled: !searchValue, style: { opacity: searchValue ? 1 : 0.6 }, children: "Clear" })), _jsx(ToolbarButton, { onClick: handleClearFilters, disabled: !hasFilters, style: { opacity: hasFilters ? 1 : 0.6 }, children: "Clear all filters" }), resolvedExportable && hideExcelSheet !== true && (_jsxs(ToolbarButton, { onClick: handleExport, children: [_jsx(DownloadIcon, {}), exportFormat === 'excel' ? 'Export Excel' : 'Export CSV'] })), showFilterToggle && isFieldSelector && (_jsxs("div", { ref: columnToggleRef, style: { position: 'relative' }, children: [_jsx(Tooltip, { content: "Show/Hide Columns", position: "bottom", children: _jsx(ToolbarButton, { "$active": columnToggleOpen, onClick: () => setColumnToggleOpen(!columnToggleOpen), "aria-label": "Toggle column visibility", style: { padding: '0 8px' }, children: _jsx(FilterIcon, {}) }) }), columnToggleOpen && (_jsxs(ColumnTogglePanel, { children: [_jsxs(ColumnToggleHeader, { children: [_jsx("span", { children: "Show/Hide Columns" }), _jsx("button", { onClick: () => setColumnToggleOpen(false), children: _jsx(CloseIcon, {}) })] }), _jsx(ColumnToggleSearch, { children: _jsx("input", { type: "text", value: columnSearch, onChange: (e) => setColumnSearch(e.target.value), placeholder: "Search columns..." }) }), _jsxs(ColumnToggleList, { children: [_jsxs(ColumnToggleItem, { style: {
                                                         borderBottom: '1px solid #e5e7eb',
                                                         paddingBottom: 8,
@@ -1168,14 +1228,26 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                             column.filter === true ||
                                             column.filterComponent ||
                                             column.filterRenderer;
-                                        // Get the filter component
-                                        const FilterComponent = hasColumnFilter
-                                            ? (typeof column.filter === 'function'
+                                        // Get the filter component (use cached reference to prevent remounting)
+                                        let FilterComponent = null;
+                                        if (hasColumnFilter) {
+                                            const cacheKey = column.dataField;
+                                            const resolved = (typeof column.filter === 'function'
                                                 ? column.filter
                                                 : null) ||
                                                 column.filterComponent ||
-                                                getFilterComponent(column.filterType || 'text')
-                                            : null;
+                                                getFilterComponent(column.filterType || 'text');
+                                            const cached = filterComponentCacheRef.current.get(cacheKey);
+                                            if (cached && cached.displayName === resolved.displayName) {
+                                                FilterComponent = cached;
+                                            }
+                                            else {
+                                                filterComponentCacheRef.current.set(cacheKey, resolved);
+                                                FilterComponent = resolved;
+                                            }
+                                        }
+                                        // Non-null reference for JSX rendering (guarded by showFilter check below)
+                                        const ResolvedFilter = FilterComponent;
                                         const onFilter = (value) => handleFilterChange(column.dataField, value);
                                         // Get resized column style
                                         const resizeStyle = resizable
@@ -1304,7 +1376,10 @@ export const Table = forwardRef(function TableComponent(props, ref) {
                                                                         }, onClick: (e) => e.stopPropagation(), children: column.filterRenderer ? (column.filterRenderer(onFilter, column)) : (_jsx("div", { onFocusCapture: () => {
                                                                                 focusedFilterFieldRef.current =
                                                                                     column.dataField;
-                                                                            }, "data-filter-wrapper": column.dataField, style: { width: '100%' }, children: _jsx(FilterComponent, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) }, `filter-${column.dataField}`) })) }), showSort && (_jsx("div", { style: {
+                                                                                saveFilterCache({
+                                                                                    focusedField: column.dataField,
+                                                                                });
+                                                                            }, "data-filter-wrapper": column.dataField, style: { width: '100%' }, children: _jsx(ResolvedFilter, { column: column, value: filters[column.dataField], onChange: onFilter, onClear: () => handleFilterChange(column.dataField, null) }, `filter-${column.dataField}`) })) }), showSort && (_jsx("div", { style: {
                                                                             minWidth: 40,
                                                                             minHeight: 24,
                                                                             display: 'flex',