react-restyle-components 0.4.25 → 0.4.27

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

@@ -1,58 +1,81 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { styled, css } from 'styled-components';
 import { tokens } from '../../utils/designTokens';
 // Styled components for filters
 const FilterContainer = styled.div `
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
 `;
 const FilterInputBase = styled.input `
   width: 100%;
-  height: 28px;
-  padding: 0 8px;
-  font-size: 12px;
-  border: 1px solid ${tokens.outline || '#d1d5db'};
-  border-radius: 4px;
+  height: 22px;
+  padding: 0 5px;
+  font-size: 10px;
+  color: #000000;
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border-radius: 2px;
   background: white;
-  
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: ${tokens.primary || '#94a3b8'};
+  }
+
   &:focus {
     outline: none;
     border-color: ${tokens.primary || '#3b82f6'};
+    box-shadow: 0 0 0 1px
+      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
   }
-  
+
   &::placeholder {
-    color: ${tokens.onSurface ? `${tokens.onSurface}40` : '#9ca3af'};
+    color: ${tokens.onSurface ? `${tokens.onSurface}50` : '#94a3af'};
+    font-size: 9px;
   }
 `;
 const FilterSelectBase = styled.select `
   width: 100%;
-  height: 28px;
-  padding: 0 8px;
-  font-size: 12px;
-  border: 1px solid ${tokens.outline || '#d1d5db'};
-  border-radius: 4px;
+  height: 22px;
+  padding: 0 5px;
+  font-size: 10px;
+  color: #000000;
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border-radius: 2px;
   background: white;
   cursor: pointer;
-  
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: ${tokens.primary || '#94a3b8'};
+  }
+
   &:focus {
     outline: none;
     border-color: ${tokens.primary || '#3b82f6'};
+    box-shadow: 0 0 0 1px
+      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
   }
 `;
 const ComparatorSelect = styled.select `
-  width: 50px;
-  height: 28px;
-  padding: 0 4px;
-  font-size: 11px;
-  border: 1px solid ${tokens.outline || '#d1d5db'};
-  border-radius: 4px;
+  width: 38px;
+  height: 22px;
+  padding: 0 2px;
+  font-size: 9px;
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border-radius: 2px;
   background: white;
   cursor: pointer;
   flex-shrink: 0;
-  
+  text-align: center;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: ${tokens.primary || '#94a3b8'};
+  }
+
   &:focus {
     outline: none;
     border-color: ${tokens.primary || '#3b82f6'};
@@ -60,30 +83,37 @@ const ComparatorSelect = styled.select `
 `;
 const DateInput = styled.input `
   flex: 1;
-  height: 28px;
-  padding: 0 8px;
-  font-size: 12px;
-  border: 1px solid ${tokens.outline || '#d1d5db'};
-  border-radius: 4px;
+  height: 22px;
+  padding: 0 4px;
+  font-size: 10px;
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border-radius: 2px;
   background: white;
-  min-width: 100px;
-  
+  min-width: 80px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    border-color: ${tokens.primary || '#94a3b8'};
+  }
+
   &:focus {
     outline: none;
     border-color: ${tokens.primary || '#3b82f6'};
+    box-shadow: 0 0 0 1px
+      ${tokens.primary ? `${tokens.primary}20` : '#3b82f620'};
   }
 `;
 const ToggleButton = styled.button `
-  height: 28px;
-  padding: 0 8px;
-  font-size: 11px;
-  font-weight: 500;
-  border: 1px solid ${tokens.outline || '#d1d5db'};
-  border-radius: 4px;
+  height: 22px;
+  padding: 0 5px;
+  font-size: 9px;
+  font-weight: normal;
+  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border-radius: 2px;
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
-  
+
   ${({ $active }) => $active
     ? css `
           background: ${tokens.primary || '#3b82f6'};
@@ -93,45 +123,282 @@ const ToggleButton = styled.button `
     : css `
           background: white;
           color: ${tokens.onSurface || '#374151'};
+
+          &:hover {
+            background: #f8fafc;
+            border-color: ${tokens.primary || '#94a3b8'};
+          }
         `}
 `;
 /**
- * Text filter component
+ * Internal Text filter component with options support
  */
-export const TextFilter = ({ column, value, onChange, }) => {
-    return (_jsx(FilterInputBase, { type: "text", value: value || '', onChange: (e) => onChange(e.target.value), placeholder: column.filterPlaceholder || `Filter ${column.text}...` }));
+const TextFilterComponent = ({ column, value, onChange, options }) => {
+    const { placeholder, className, style, defaultValue, delay = 0, getFilter, onFilter, id, disabled, } = options || {};
+    const [internalValue, setInternalValue] = useState(value || defaultValue || '');
+    const timeoutRef = useRef(null);
+    const isFirstRender = useRef(true);
+    const internalValueRef = useRef(internalValue);
+    // Keep ref in sync with state
+    useEffect(() => {
+        internalValueRef.current = internalValue;
+    }, [internalValue]);
+    // Sync with external value changes
+    useEffect(() => {
+        if (!isFirstRender.current) {
+            setInternalValue(value || '');
+        }
+        isFirstRender.current = false;
+    }, [value]);
+    // Provide filter instance via getFilter callback - only on mount
+    useEffect(() => {
+        if (getFilter) {
+            getFilter({
+                get value() {
+                    return internalValueRef.current;
+                },
+                setValue: (newValue) => {
+                    setInternalValue(newValue);
+                    onChange(newValue || null);
+                    onFilter?.(newValue);
+                },
+                clear: () => {
+                    setInternalValue('');
+                    onChange(null);
+                    onFilter?.('');
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getFilter]);
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        setInternalValue(newValue);
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+                onChange(newValue || null);
+                onFilter?.(newValue);
+            }, delay);
+        }
+        else {
+            onChange(newValue || null);
+            onFilter?.(newValue);
+        }
+    }, [onChange, onFilter, delay]);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    // If custom className is provided, use plain input to allow full CSS control
+    if (className) {
+        return (_jsx("input", { type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, className: className, style: {
+                width: '100%',
+                ...style,
+            }, disabled: disabled }));
+    }
+    return (_jsx(FilterInputBase, { type: "text", id: id, value: internalValue, onChange: handleChange, placeholder: placeholder || column.filterPlaceholder || `Filter ${column.text}...`, style: style, disabled: disabled }));
 };
+export function TextFilter(optionsOrProps) {
+    // Check if it's being used as a factory function (options object without column/value/onChange)
+    if (!('column' in optionsOrProps) &&
+        !('value' in optionsOrProps) &&
+        !('onChange' in optionsOrProps)) {
+        // Factory function usage - return a component
+        const options = optionsOrProps;
+        const FilterWithOptions = (props) => (_jsx(TextFilterComponent, { ...props, options: options }));
+        FilterWithOptions.displayName = 'TextFilter';
+        return FilterWithOptions;
+    }
+    // Direct component usage
+    const props = optionsOrProps;
+    return _jsx(TextFilterComponent, { ...props });
+}
 /**
- * Number filter component with comparator
+ * Internal Number filter component with options support
  */
-export const NumberFilter = ({ column, value, onChange, }) => {
-    const [number, setNumber] = useState(value?.number || '');
-    const [comparator, setComparator] = useState(value?.comparator || '=');
+const NumberFilterComponent = ({ column, value, onChange, options }) => {
+    const { placeholder, className, style, defaultValue, delay = 0, defaultComparator = '=', allowDecimal = true, getFilter, onFilter, id, disabled, hideComparator, comparators = ['=', '!=', '>', '>=', '<', '<='], } = options || {};
+    const [number, setNumber] = useState(value?.number || defaultValue?.number || '');
+    const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
+    const timeoutRef = useRef(null);
+    const numberRef = useRef(number);
+    const comparatorRef = useRef(comparator);
+    // Keep refs in sync with state
+    useEffect(() => {
+        numberRef.current = number;
+        comparatorRef.current = comparator;
+    }, [number, comparator]);
+    // Sync with external value changes
+    useEffect(() => {
+        if (value) {
+            setNumber(value.number || '');
+            setComparator(value.comparator || defaultComparator);
+        }
+    }, [value, defaultComparator]);
+    // Provide filter instance via getFilter callback - only on mount
+    useEffect(() => {
+        if (getFilter) {
+            getFilter({
+                get value() {
+                    return numberRef.current
+                        ? { number: numberRef.current, comparator: comparatorRef.current }
+                        : null;
+                },
+                setValue: (newValue) => {
+                    if (newValue) {
+                        setNumber(newValue.number);
+                        setComparator(newValue.comparator);
+                        onChange(newValue);
+                        onFilter?.(newValue);
+                    }
+                    else {
+                        setNumber('');
+                        onChange(null);
+                        onFilter?.(null);
+                    }
+                },
+                clear: () => {
+                    setNumber('');
+                    setComparator(defaultComparator);
+                    onChange(null);
+                    onFilter?.(null);
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getFilter]);
     const handleChange = useCallback((newNumber, newComparator) => {
         setNumber(newNumber);
         setComparator(newComparator);
-        if (newNumber) {
-            onChange({ number: newNumber, comparator: newComparator });
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        const newValue = newNumber
+            ? { number: newNumber, comparator: newComparator }
+            : null;
+        if (delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+                onChange(newValue);
+                onFilter?.(newValue);
+            }, delay);
         }
         else {
-            onChange(null);
+            onChange(newValue);
+            onFilter?.(newValue);
         }
-    }, [onChange]);
-    return (_jsxs(FilterContainer, { children: [_jsxs(ComparatorSelect, { value: comparator, onChange: (e) => handleChange(number, e.target.value), children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: "!=", children: "\u2260" }), _jsx("option", { value: ">", children: ">" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" }), _jsx("option", { value: "<=", children: "\u2264" })] }), _jsx(FilterInputBase, { type: "text", value: number, onChange: (e) => {
-                    const val = e.target.value;
-                    if (/^[0-9.,]*$/.test(val)) {
-                        handleChange(val, comparator);
-                    }
-                }, placeholder: column.filterPlaceholder || 'Number...' })] }));
+    }, [onChange, onFilter, delay]);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const comparatorSymbols = {
+        '=': '=',
+        '!=': '≠',
+        '>': '>',
+        '>=': '≥',
+        '<': '<',
+        '<=': '≤',
+    };
+    const inputProps = {
+        type: 'text',
+        id,
+        value: number,
+        onChange: (e) => {
+            const val = e.target.value;
+            const pattern = allowDecimal ? /^[0-9.,]*$/ : /^[0-9]*$/;
+            if (pattern.test(val)) {
+                handleChange(val, comparator);
+            }
+        },
+        placeholder: placeholder || column.filterPlaceholder || 'Number...',
+        disabled,
+    };
+    return (_jsxs(FilterContainer, { children: [!hideComparator && (_jsx(ComparatorSelect, { value: comparator, onChange: (e) => handleChange(number, e.target.value), disabled: disabled, children: comparators.map((comp) => (_jsx("option", { value: comp, children: comparatorSymbols[comp] || comp }, comp))) })), className ? (_jsx("input", { ...inputProps, className: className, style: { flex: 1, width: '100%', ...style } })) : (_jsx(FilterInputBase, { ...inputProps, style: { flex: 1, ...style } }))] }));
 };
+export function NumberFilter(optionsOrProps) {
+    if (!('column' in optionsOrProps) &&
+        !('value' in optionsOrProps) &&
+        !('onChange' in optionsOrProps)) {
+        const options = optionsOrProps;
+        const FilterWithOptions = (props) => (_jsx(NumberFilterComponent, { ...props, options: options }));
+        FilterWithOptions.displayName = 'NumberFilter';
+        return FilterWithOptions;
+    }
+    const props = optionsOrProps;
+    return _jsx(NumberFilterComponent, { ...props });
+}
 /**
- * Date filter component
+ * Internal Date filter component with options support
  */
-export const DateFilter = ({ column, value, onChange, }) => {
-    const [startDate, setStartDate] = useState(value?.startDate || '');
-    const [endDate, setEndDate] = useState(value?.endDate || '');
-    const [diffFlag, setDiffFlag] = useState(value?.diffFlag || false);
-    const [comparator, setComparator] = useState(value?.comparator || '=');
+const DateFilterComponent = ({ column, value, onChange, options }) => {
+    const { className, style, defaultValue, defaultComparator = '=', defaultRangeMode = false, getFilter, onFilter, id, disabled, minDate, maxDate, } = options || {};
+    const [startDate, setStartDate] = useState(value?.startDate || defaultValue?.startDate || '');
+    const [endDate, setEndDate] = useState(value?.endDate || defaultValue?.endDate || '');
+    const [diffFlag, setDiffFlag] = useState(value?.diffFlag ?? defaultValue?.diffFlag ?? defaultRangeMode);
+    const [comparator, setComparator] = useState(value?.comparator || defaultValue?.comparator || defaultComparator);
+    const stateRef = useRef({ startDate, endDate, diffFlag, comparator });
+    // Keep ref in sync with state
+    useEffect(() => {
+        stateRef.current = { startDate, endDate, diffFlag, comparator };
+    }, [startDate, endDate, diffFlag, comparator]);
+    // Sync with external value changes
+    useEffect(() => {
+        if (value) {
+            setStartDate(value.startDate || '');
+            setEndDate(value.endDate || '');
+            setDiffFlag(value.diffFlag ?? defaultRangeMode);
+            setComparator(value.comparator || defaultComparator);
+        }
+    }, [value, defaultRangeMode, defaultComparator]);
+    // Provide filter instance via getFilter callback - only on mount
+    useEffect(() => {
+        if (getFilter) {
+            getFilter({
+                get value() {
+                    const { startDate: s, endDate: e, diffFlag: d, comparator: c, } = stateRef.current;
+                    return s || e
+                        ? { startDate: s, endDate: e, diffFlag: d, comparator: c }
+                        : null;
+                },
+                setValue: (newValue) => {
+                    if (newValue) {
+                        setStartDate(newValue.startDate || '');
+                        setEndDate(newValue.endDate || '');
+                        setDiffFlag(newValue.diffFlag ?? defaultRangeMode);
+                        setComparator(newValue.comparator || defaultComparator);
+                        onChange(newValue);
+                        onFilter?.(newValue);
+                    }
+                    else {
+                        setStartDate('');
+                        setEndDate('');
+                        onChange(null);
+                        onFilter?.(null);
+                    }
+                },
+                clear: () => {
+                    setStartDate('');
+                    setEndDate('');
+                    setDiffFlag(defaultRangeMode);
+                    setComparator(defaultComparator);
+                    onChange(null);
+                    onFilter?.(null);
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getFilter]);
     const handleChange = useCallback((updates) => {
         const newValue = {
             startDate,
@@ -150,19 +417,90 @@ export const DateFilter = ({ column, value, onChange, }) => {
             setComparator(updates.comparator);
         if (newValue.startDate || newValue.endDate) {
             onChange(newValue);
+            onFilter?.(newValue);
         }
         else {
             onChange(null);
+            onFilter?.(null);
         }
-    }, [startDate, endDate, diffFlag, comparator, onChange]);
-    return (_jsxs(FilterContainer, { children: [_jsx(ToggleButton, { "$active": diffFlag, onClick: () => handleChange({ diffFlag: !diffFlag }), title: "Date range mode", children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs(ComparatorSelect, { value: comparator, onChange: (e) => handleChange({ comparator: e.target.value }), children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx(DateInput, { type: "date", value: startDate, onChange: (e) => handleChange({ startDate: e.target.value }) }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: '#6b7280', fontSize: 12 }, children: "to" }), _jsx(DateInput, { type: "date", value: endDate, onChange: (e) => handleChange({ endDate: e.target.value }) })] }))] }));
+    }, [startDate, endDate, diffFlag, comparator, onChange, onFilter]);
+    return (_jsxs(FilterContainer, { className: className, style: style, children: [_jsx(ToggleButton, { "$active": diffFlag, onClick: () => handleChange({ diffFlag: !diffFlag }), title: "Date range mode", disabled: disabled, children: diffFlag ? 'Range' : 'Single' }), !diffFlag && (_jsxs(ComparatorSelect, { value: comparator, onChange: (e) => handleChange({ comparator: e.target.value }), disabled: disabled, children: [_jsx("option", { value: "=", children: "=" }), _jsx("option", { value: ">=", children: "\u2265" }), _jsx("option", { value: "<", children: "<" })] })), _jsx(DateInput, { type: "date", id: id, value: startDate, onChange: (e) => handleChange({ startDate: e.target.value }), disabled: disabled, min: minDate, max: maxDate }), diffFlag && (_jsxs(_Fragment, { children: [_jsx("span", { style: { color: '#6b7280', fontSize: 12 }, children: "to" }), _jsx(DateInput, { type: "date", value: endDate, onChange: (e) => handleChange({ endDate: e.target.value }), disabled: disabled, min: minDate, max: maxDate })] }))] }));
 };
+export function DateFilter(optionsOrProps) {
+    if (!('column' in optionsOrProps) &&
+        !('value' in optionsOrProps) &&
+        !('onChange' in optionsOrProps)) {
+        const options = optionsOrProps;
+        const FilterWithOptions = (props) => (_jsx(DateFilterComponent, { ...props, options: options }));
+        FilterWithOptions.displayName = 'DateFilter';
+        return FilterWithOptions;
+    }
+    const props = optionsOrProps;
+    return _jsx(DateFilterComponent, { ...props });
+}
 /**
- * Select filter component
+ * Internal Select filter component with options support
  */
-export const SelectFilter = ({ column, value, onChange, }) => {
-    return (_jsxs(FilterSelectBase, { value: value || '', onChange: (e) => onChange(e.target.value || null), children: [_jsx("option", { value: "", children: "All" }), column.filterOptions?.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
+const SelectFilterComponent = ({ column, value, onChange, options }) => {
+    const { placeholder = 'All', className, style, defaultValue, options: customOptions, getFilter, onFilter, id, disabled, } = options || {};
+    const [selectedValue, setSelectedValue] = useState(value || defaultValue || '');
+    const selectedValueRef = useRef(selectedValue);
+    // Keep ref in sync with state
+    useEffect(() => {
+        selectedValueRef.current = selectedValue;
+    }, [selectedValue]);
+    // Sync with external value changes
+    useEffect(() => {
+        setSelectedValue(value || '');
+    }, [value]);
+    // Provide filter instance via getFilter callback - only on mount
+    useEffect(() => {
+        if (getFilter) {
+            getFilter({
+                get value() {
+                    return selectedValueRef.current || null;
+                },
+                setValue: (newValue) => {
+                    setSelectedValue(newValue || '');
+                    onChange(newValue);
+                    onFilter?.(newValue);
+                },
+                clear: () => {
+                    setSelectedValue('');
+                    onChange(null);
+                    onFilter?.(null);
+                },
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getFilter]);
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value || null;
+        setSelectedValue(e.target.value);
+        onChange(newValue);
+        onFilter?.(newValue);
+    }, [onChange, onFilter]);
+    // Use custom options if provided, otherwise fall back to column.filterOptions
+    const selectOptions = customOptions || column.filterOptions || [];
+    const selectContent = (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: placeholder }), selectOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }));
+    // If custom className is provided, use plain select to allow full CSS control
+    if (className) {
+        return (_jsx("select", { id: id, value: selectedValue, onChange: handleChange, className: className, style: { width: '100%', ...style }, disabled: disabled, children: selectContent }));
+    }
+    return (_jsx(FilterSelectBase, { id: id, value: selectedValue, onChange: handleChange, style: style, disabled: disabled, children: selectContent }));
 };
+export function SelectFilter(optionsOrProps) {
+    if (!('column' in optionsOrProps) &&
+        !('value' in optionsOrProps) &&
+        !('onChange' in optionsOrProps)) {
+        const options = optionsOrProps;
+        const FilterWithOptions = (props) => (_jsx(SelectFilterComponent, { ...props, options: options }));
+        FilterWithOptions.displayName = 'SelectFilter';
+        return FilterWithOptions;
+    }
+    const props = optionsOrProps;
+    return _jsx(SelectFilterComponent, { ...props });
+}
 /**
  * Get filter component based on type
  */

package/lib/src/core-components/src/components/Table/index.d.ts

@@ -2,4 +2,5 @@ export { Table, default } from './Table';
 export * from './types';
 export { useSortState, useFilterState, usePaginationState, useRowSelection, useRowExpansion, useColumnVisibility, useTableDebounce, sortData, filterData, paginateData, getNestedValue, exportToCSV, } from './hooks';
 export { TextFilter, NumberFilter, DateFilter, SelectFilter, getFilterComponent, } from './filters';
+export type { TextFilterOptions, TextFilterInstance, NumberFilterOptions, NumberFilterInstance, SelectFilterOptions, SelectFilterInstance, DateFilterOptions, DateFilterInstance, } from './filters';
 //# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,kBAAkB,GACnB,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAE,OAAO,EAAC,MAAM,SAAS,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,GACZ,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,kBAAkB,GACnB,MAAM,WAAW,CAAC;AACnB,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,WAAW,CAAC"}

package/lib/src/core-components/src/components/Table/types.d.ts

@@ -77,8 +77,8 @@ export interface TableColumn<T = any> {
     defaultSort?: SortDirection;
     /** Custom sort caret renderer */
     sortCaret?: (order: SortDirection, column: TableColumn<T>) => React.ReactNode;
-    /** Whether column is filterable */
-    filter?: boolean;
+    /** Whether column is filterable, or a custom filter component */
+    filter?: boolean | React.ComponentType<TableFilterProps>;
     /** Filter type */
     filterType?: FilterType;
     /** Filter options (for select filter) */
@@ -86,7 +86,7 @@ export interface TableColumn<T = any> {
         value: string;
         label: string;
     }>;
-    /** Custom filter component */
+    /** Custom filter component (alias for filter when using component) */
     filterComponent?: React.ComponentType<TableFilterProps>;
     /** Custom filter renderer */
     filterRenderer?: (onFilter: (value: any) => void, column: TableColumn<T>) => React.ReactNode;
@@ -121,6 +121,14 @@ export interface TableColumn<T = any> {
     csvExport?: boolean;
     /** Header CSS class */
     headerClasses?: string;
+    /** Hide header text/title (only show filter and sort) - deprecated, use isHeaderTitle instead */
+    hideHeaderText?: boolean;
+    /** Show/hide header title (default: true) */
+    isHeaderTitle?: boolean;
+    /** Show/hide header filter component (default: true) */
+    isHeaderFilterComp?: boolean;
+    /** Show/hide header sort icon (default: true) */
+    isHeaderSort?: boolean;
     /** Cell CSS class */
     classes?: string | ((cell: any, row: T, rowIndex: number, colIndex: number) => string);
     /** Header style */
@@ -334,6 +342,14 @@ export interface TableProps<T = any> {
     defaultFilters?: TableFilterState;
     /** Controlled filters */
     filters?: TableFilterState;
+    /** Show filter row by default (when filterable is true) */
+    defaultShowFilters?: boolean;
+    /** Controlled show/hide filter row */
+    showFilters?: boolean;
+    /** Callback when filter visibility changes */
+    onShowFiltersChange?: (visible: boolean) => void;
+    /** Show filter toggle button in toolbar */
+    showFilterToggle?: boolean;
     /** Enable global search */
     searchable?: boolean;
     /** Search placeholder */
@@ -370,6 +386,8 @@ export interface TableProps<T = any> {
     hover?: boolean;
     /** Compact/dense mode */
     compact?: boolean;
+    /** Custom cell padding (e.g., '2px', '4px 6px'). Default is '2px' */
+    cellPadding?: string;
     /** Fixed header */
     stickyHeader?: boolean;
     /** Table max height (for sticky header) */