@chainsys/sab-react-grid 1.0.1

package/dist/esm/SabReactTable.js

@@ -0,0 +1,1163 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useReactTable, getCoreRowModel, getSortedRowModel, getGroupedRowModel, getExpandedRowModel, getPaginationRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React, { useState, useEffect, useLayoutEffect, useRef, useCallback, memo, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { DataFormatter, ActionFormatter, formatDateValue, renderDateCell, isIsoDateLike } from './utils/tableFormatters';
+import { exportTableToExcel, exportTableToCSV } from './utils/exportUtils';
+import { resizeColumnsByCellContent } from './utils/tableColumnResizeUtils';
+import Flatpickr from "react-flatpickr";
+import "flatpickr/dist/themes/material_green.css";
+/** Resolve column header label at render time from table + columns so grouping zone and group rows always show header (Name, Email) not id (name, email). */
+function resolveGroupingLabel(colId, table, columns, labelMap) {
+    if (colId == null || typeof colId !== 'string')
+        return String(colId ?? '');
+    const s = String(colId).trim();
+    if (!s)
+        return colId;
+    const fromMap = labelMap[s];
+    if (fromMap != null && fromMap !== '' && fromMap !== s)
+        return fromMap;
+    if (Array.isArray(columns)) {
+        const fromProp = columns.find((c) => String(c?.id ?? c?.accessorKey ?? '') === s);
+        const propHeader = fromProp && fromProp.header;
+        if (typeof propHeader === 'string')
+            return propHeader;
+    }
+    try {
+        const col = table.getColumn(s);
+        if (col) {
+            const h = col.columnDef.header;
+            if (typeof h === 'string')
+                return h;
+        }
+    }
+    catch (_) { /* ignore */ }
+    return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+}
+/**
+ * Filter Operands Configuration
+ */
+const STRING_OPERANDS = [
+    { label: 'Contains', value: 'contains', symbol: '*a*' },
+    { label: 'Not Contains', value: 'notContains', symbol: '<>' },
+    { label: 'Equals', value: 'equals', symbol: '=' },
+    { label: 'Not Equal to', value: 'notEquals', symbol: '!=' },
+    { label: 'Starts With', value: 'startsWith', symbol: 'a*' },
+    { label: 'Ends With', value: 'endsWith', symbol: '*z' },
+];
+const NUMBER_OPERANDS = [
+    { label: 'Equal to', value: 'equals', symbol: '=' },
+    { label: 'LESS_THAN', value: 'lt', symbol: '<' },
+    { label: 'Greater than', value: 'gt', symbol: '>' },
+    { label: 'LESS_THAN_OR_EQUAL_TO', value: 'lte', symbol: '<=' },
+    { label: 'GREATER_THAN_OR_EQUAL_TO', value: 'gte', symbol: '>=' },
+    { label: 'NOT_EQUAL_TO', value: 'notEquals', symbol: '!=' },
+];
+/**
+ * Advanced Filter Function
+ * Handles both object payload {value, operand} and simple string payload
+ */
+const parseCustomDate = (val) => {
+    if (val === null || val === undefined || val === '')
+        return NaN;
+    if (typeof val === 'number')
+        return val;
+    const str = String(val).trim();
+    // Handle numbers with commas first to prevent "1,000" -> NaN
+    const cleanNum = str.replace(/,/g, '');
+    if (/^-?\d+(\.\d+)?$/.test(cleanNum))
+        return Number(cleanNum);
+    // Handle DD/MM/YYYY format
+    if (str.includes('/')) {
+        const parts = str.split(/[\s/:]/);
+        if (parts.length >= 3) {
+            const d = Number(parts[0]);
+            const m = Number(parts[1]);
+            const y = Number(parts[2]);
+            if (!isNaN(d) && !isNaN(m) && !isNaN(y)) {
+                let h = 0, min = 0;
+                if (parts.length >= 5) {
+                    h = Number(parts[3]);
+                    min = Number(parts[4]);
+                    const ampm = str.toLowerCase();
+                    if (ampm.includes('pm') && h < 12)
+                        h += 12;
+                    if (ampm.includes('am') && h === 12)
+                        h = 0;
+                }
+                const date = new Date(y, m - 1, d, h, min);
+                if (!isNaN(date.getTime()))
+                    return date.getTime();
+            }
+        }
+    }
+    const fallback = new Date(str).getTime();
+    return isNaN(fallback) ? Number(str) : fallback;
+};
+const advancedFilterFn = (row, columnId, filterValue) => {
+    // 1. Handle Array (MultiSelect / Checkbox)
+    if (Array.isArray(filterValue)) {
+        if (filterValue.length === 0)
+            return true;
+        const cellValue = row.getValue(columnId);
+        if (Array.isArray(cellValue))
+            return filterValue.some(v => cellValue.includes(v));
+        return filterValue.includes(cellValue);
+    }
+    // 2. Handle Object { value, operand }
+    let value = filterValue;
+    let operand = 'contains';
+    if (filterValue && typeof filterValue === 'object' && 'value' in filterValue) {
+        value = filterValue.value;
+        operand = filterValue.operand || 'contains';
+    }
+    if (value === undefined || value === null || value === '')
+        return true;
+    const cellValue = row.getValue(columnId);
+    // Boolean Check
+    if (typeof value === 'boolean') {
+        return cellValue === value;
+    }
+    if (cellValue === undefined || cellValue === null)
+        return false;
+    const sVal = String(cellValue).toLowerCase();
+    const fVal = String(value).toLowerCase();
+    // Date/Number Parsing
+    const nCell = parseCustomDate(cellValue);
+    const nFilt = parseCustomDate(value);
+    // Helper checks
+    const isDateCompare = !isNaN(nCell) && !isNaN(nFilt) && (String(cellValue).includes('/') || String(value).includes('/'));
+    switch (operand) {
+        case 'contains': return sVal.includes(fVal);
+        case 'notContains': return !sVal.includes(fVal);
+        case 'equals': return isNaN(nCell) || isNaN(nFilt) ? sVal === fVal : (isDateCompare ? Math.abs(nCell - nFilt) < 60000 : nCell === nFilt); // 1 min tolerance for dates? or exact.
+        case 'notEquals': return isNaN(nCell) || isNaN(nFilt) ? sVal !== fVal : nCell !== nFilt;
+        case 'startsWith': return sVal.startsWith(fVal);
+        case 'endsWith': return sVal.endsWith(fVal);
+        case 'gt': return (isDateCompare || !isNaN(nCell)) && nCell > nFilt;
+        case 'lt': return (isDateCompare || !isNaN(nCell)) && nCell < nFilt;
+        case 'lte': return (isDateCompare || !isNaN(nCell)) && nCell <= nFilt;
+        case 'gte': return (isDateCompare || !isNaN(nCell)) && nCell >= nFilt;
+        default: return sVal.includes(fVal);
+    }
+};
+// --- OPTIMIZATION: Memoized Header Cell ---
+const MemoizedHeaderCell = memo(({ header, draggedColumnId, onDragStart, onDragOver, onDragEnd, onDrop, layoutMode, totalSize }) => {
+    const [showMenu, setShowMenu] = useState(false);
+    const menuRef = useRef(null);
+    const isSorted = header.column.getIsSorted();
+    const handleSort = (e, dir) => {
+        e.stopPropagation();
+        if (dir === 'clear')
+            header.column.clearSorting();
+        else
+            header.column.toggleSorting(dir === 'desc', true);
+        setShowMenu(false);
+    };
+    const handleRemoveFilter = (e) => {
+        e.stopPropagation();
+        header.column.setFilterValue(undefined);
+        setShowMenu(false);
+    };
+    useEffect(() => {
+        const hide = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target))
+                setShowMenu(false);
+        };
+        if (showMenu)
+            document.addEventListener('mousedown', hide);
+        return () => document.removeEventListener('mousedown', hide);
+    }, [showMenu]);
+    const widthStyle = (layoutMode === 'fit-window' && totalSize > 0)
+        ? `${(header.getSize() / totalSize) * 100}%`
+        : header.getSize();
+    const [menuStyle, setMenuStyle] = useState({});
+    useEffect(() => {
+        if (showMenu && menuRef.current) {
+            const rect = menuRef.current.parentElement?.getBoundingClientRect();
+            if (rect) {
+                // If cell is near left edge, align menu to left
+                if (rect.left < 200) {
+                    setMenuStyle({ left: 0, right: 'auto' });
+                }
+                else {
+                    setMenuStyle({ right: 0, left: 'auto' });
+                }
+            }
+        }
+    }, [showMenu]);
+    return (_jsxs("th", { colSpan: header.colSpan, onDragOver: (e) => onDragOver(e, header.column.id), onDrop: (e) => onDrop(e, header.column.id), className: `slick-header-th ${draggedColumnId === header.column.id ? 'dragging' : ''}`, style: {
+            width: widthStyle,
+            position: 'sticky',
+            top: 0,
+            zIndex: 35,
+            background: '#f1f5f9'
+        }, children: [_jsxs("div", { className: "slick-header-cell-inner", children: [_jsxs("div", { className: "slick-header-label", draggable: true, onDragStart: (e) => {
+                            if (e.dataTransfer) {
+                                e.dataTransfer.setData('text/plain', header.column.id);
+                                e.dataTransfer.effectAllowed = 'move';
+                            }
+                            onDragStart(header.column.id);
+                        }, onDragEnd: onDragEnd, onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined, style: { cursor: header.column.getCanSort() ? 'pointer' : 'default' }, title: typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : undefined, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (isSorted === 'asc' ? ' ▴' : isSorted === 'desc' ? ' ▾' : '')] }), !header.column.columnDef.meta?.hideMenu && (_jsx("div", { className: `slick-header-actions ${showMenu ? 'visible' : ''}`, onClick: (e) => { e.stopPropagation(); setShowMenu(!showMenu); }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }) })), showMenu && (_jsxs("div", { ref: menuRef, className: "slick-header-dropdown-menu", style: menuStyle, children: [header.column.getCanSort() && isSorted !== 'asc' && (_jsxs("div", { className: "dropdown-item", onClick: (e) => handleSort(e, 'asc'), children: [_jsx("div", { className: "round-icon-bg action-icon mini-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M11 5h10" }), _jsx("path", { d: "M11 9h7" }), _jsx("path", { d: "M11 13h4" }), _jsx("path", { d: "M3 17l3 3 3-3" }), _jsx("path", { d: "M6 18V4" })] }) }), _jsx("span", { children: "Sort Ascending" })] })), header.column.getCanSort() && isSorted !== 'desc' && (_jsxs("div", { className: "dropdown-item", onClick: (e) => handleSort(e, 'desc'), children: [_jsx("div", { className: "round-icon-bg action-icon mini-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M11 5h10" }), _jsx("path", { d: "M11 9h7" }), _jsx("path", { d: "M11 13h4" }), _jsx("path", { d: "M3 7l3-3 3 3" }), _jsx("path", { d: "M6 20V6" })] }) }), _jsx("span", { children: "Sort Descending" })] })), _jsx("div", { className: "dropdown-divider" }), _jsxs("div", { className: "dropdown-item", onClick: handleRemoveFilter, children: [_jsx("div", { className: "round-icon-bg action-icon mini-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }), _jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21" })] }) }), _jsx("span", { children: "Remove Filter" })] }), header.column.getCanSort() && (_jsxs("div", { className: "dropdown-item", onClick: (e) => handleSort(e, 'clear'), children: [_jsx("div", { className: "round-icon-bg action-icon mini-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M7 15l5 5 5-5" }), _jsx("path", { d: "M7 9l5-5 5 5" })] }) }), _jsx("span", { children: "Remove Sort" })] }))] }))] }), header.column.getCanResize() && layoutMode !== 'fit-window' && (_jsx("div", { className: "slick-resizer", onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onClick: (e) => e.stopPropagation() }))] }, header.id));
+}, (prevProps, nextProps) => {
+    // Re-render when header changes (important for column reordering to work)
+    if (prevProps.header !== nextProps.header)
+        return false;
+    return (prevProps.draggedColumnId === nextProps.draggedColumnId &&
+        prevProps.layoutMode === nextProps.layoutMode &&
+        prevProps.totalSize === nextProps.totalSize &&
+        prevProps.onDragStart === nextProps.onDragStart &&
+        prevProps.onDragOver === nextProps.onDragOver &&
+        prevProps.onDragEnd === nextProps.onDragEnd &&
+        prevProps.onDrop === nextProps.onDrop);
+});
+// Placeholder for text/number and dropdown filter fields
+const FILTER_PLACEHOLDER = '🔎︎';
+// Placeholder for date, datetime, and time filter fields only (used as Flatpickr placeholder text)
+// const FILTER_PLACEHOLDER_DATE = '📅'
+// Calendar icon SVG for date/datetime/time filter placeholder (light gray, shown when empty)
+const FilterCalendarIcon = () => (_jsx("span", { className: "filter-date-placeholder-icon", "aria-hidden": true, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }), _jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }), _jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })] }) }));
+// --- OPTIMIZATION: Memoized Filter Cell ---
+const MemoizedFilterCell = memo(({ header, filterValue, draggedId, layoutMode, totalSize, columnMeta }) => {
+    const meta = (columnMeta ?? header.column.columnDef.meta);
+    const colId = String(header.column.id || header.column.columnDef?.accessorKey || '');
+    const inferredDateFromId = /^(created|updated|date|time|dob|birth)/i.test(colId);
+    const filterType = meta?.filterType || (inferredDateFromId ? 'date' : 'text');
+    const filterOptions = meta?.filterOptions || [];
+    // State for all types
+    const [showPopover, setShowPopover] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState(null);
+    const containerRef = useRef(null);
+    const operandSelectorRef = useRef(null);
+    const operandDropdownRef = useRef(null);
+    const textInputRef = useRef(null);
+    const flatpickrInstanceRef = useRef(null);
+    const isNumber = meta?.dataType === 'number' || meta?.dataType === 'decimal' || meta?.dataType === 'currency' || filterType === 'number';
+    const isDate = ['date', 'datetime', 'time'].includes(meta?.dataType || '') || ['date', 'datetime', 'time'].includes(filterType || '') || inferredDateFromId;
+    const operands = (isNumber || isDate) ? NUMBER_OPERANDS : STRING_OPERANDS;
+    // Stable options for Flatpickr to prevent re-init on re-render
+    const flatpickrOptions = useMemo(() => ({
+        enableTime: true,
+        dateFormat: "d/m/Y h:i K",
+        time_24hr: false,
+        closeOnSelect: false,
+        allowInput: true,
+        clickOpens: true,
+        position: 'auto',
+        static: false,
+        monthSelectorType: 'static',
+        onReady: (_d, _str, instance) => {
+            if (instance)
+                flatpickrInstanceRef.current = instance;
+            if (instance?.calendarContainer) {
+                instance.calendarContainer.addEventListener('mousedown', (e) => e.stopPropagation());
+            }
+        }
+    }), []);
+    // Raw value from table state
+    const rawValue = filterValue;
+    // Derived external value based on type
+    const getSafeValue = () => {
+        if (['multiselect', 'checkbox'].includes(filterType)) {
+            return Array.isArray(rawValue) ? rawValue : [];
+        }
+        if (filterType === 'boolean') {
+            return rawValue; // boolean | undefined
+        }
+        // Text/Number: { value, operand }
+        if (typeof rawValue === 'object' && rawValue !== null && 'value' in rawValue) {
+            return rawValue;
+        }
+        return { value: rawValue || '', operand: (isNumber || isDate) ? (isDate ? 'equals' : 'equals') : 'contains' };
+    };
+    const extValue = getSafeValue();
+    // Local state for persistence (Text/Number uses object, others use direct value)
+    // We initialize from extValue.
+    const [localValue, setLocalValue] = useState(extValue);
+    // SYNC LOGIC: Always sync to support external clear
+    useEffect(() => {
+        setLocalValue(getSafeValue());
+    }, [rawValue]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Compute dropdown position when opening (useLayoutEffect so portal has position in same frame - dropdown opens reliably)
+    useLayoutEffect(() => {
+        if (showPopover && operandSelectorRef.current) {
+            const rect = operandSelectorRef.current.getBoundingClientRect();
+            setDropdownPosition({ left: rect.left, top: rect.bottom + 4 });
+        }
+        else if (!showPopover) {
+            setDropdownPosition(null);
+        }
+    }, [showPopover]);
+    // Close popover on outside click (ignore clicks inside filter wrapper and portaled operand dropdown). Use capture + slight delay so same mousedown that opened doesn't close.
+    useEffect(() => {
+        if (!showPopover)
+            return;
+        const hide = (e) => {
+            const target = e.target;
+            const inContainer = containerRef.current?.contains(target);
+            const inDropdown = operandDropdownRef.current?.contains(target);
+            if (!inContainer && !inDropdown)
+                setShowPopover(false);
+        };
+        const t = setTimeout(() => document.addEventListener('mousedown', hide), 0);
+        return () => { clearTimeout(t); document.removeEventListener('mousedown', hide); };
+    }, [showPopover]);
+    // Handlers
+    const handleClear = (e) => {
+        e?.stopPropagation();
+        if (['multiselect', 'checkbox'].includes(filterType)) {
+            setLocalValue([]);
+            header.column.setFilterValue(undefined);
+        }
+        else if (filterType === 'boolean') {
+            setLocalValue(undefined); // or null
+            header.column.setFilterValue(undefined);
+        }
+        else {
+            // Text/Number
+            const resetVal = { ...localValue, value: '' };
+            setLocalValue(resetVal);
+            header.column.setFilterValue(undefined);
+        }
+    };
+    const updateTextNumber = (val) => {
+        const next = { ...localValue, value: val };
+        setLocalValue(next);
+        if (!val) {
+            // We don't clear local operand, just value
+            header.column.setFilterValue(undefined);
+        }
+        else {
+            header.column.setFilterValue(next);
+        }
+    };
+    const updateOperand = (op) => {
+        const next = { ...localValue, operand: op };
+        setLocalValue(next);
+        if (next.value)
+            header.column.setFilterValue(next);
+    };
+    // Render Helpers
+    const renderTextNumber = () => {
+        const currentOp = operands.find(o => o.value === localValue.operand);
+        const operandDropdownContent = showPopover && dropdownPosition && (_jsx("div", { ref: operandDropdownRef, role: "listbox", className: "operand-dropdown operand-dropdown-portal", style: {
+                position: 'fixed',
+                left: dropdownPosition.left,
+                top: dropdownPosition.top,
+                zIndex: 10002,
+            }, children: operands.map(op => (_jsxs("div", { role: "option", className: `operand-item ${localValue.operand === op.value ? 'active' : ''}`, onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); updateOperand(op.value); setShowPopover(false); }, children: [_jsx("span", { className: "op-symbol", children: op.symbol }), _jsx("span", { className: "op-label", children: op.label })] }, op.value))) }));
+        return (_jsxs("div", { className: "slick-premium-filter-container slick-premium-filter-container-operand-visible", children: [_jsxs("div", { ref: operandSelectorRef, role: "button", tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": showPopover, className: "slick-filter-prefix operand-selector", onMouseDown: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setShowPopover(prev => !prev);
+                    }, onClick: (e) => e.stopPropagation(), children: [currentOp?.symbol ? (_jsx("span", { className: "prefix-operand-symbol", children: currentOp.symbol })) : _jsx("span", { className: "prefix-operand-placeholder" }), _jsx("span", { className: "operand-selector-chevron", "aria-hidden": true, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) })] }), typeof document !== 'undefined' && operandDropdownContent && createPortal(operandDropdownContent, document.body), _jsxs("div", { className: "slick-filter-search-area", onClick: (e) => {
+                        if (e.target !== e.currentTarget)
+                            return;
+                        if (isDate)
+                            flatpickrInstanceRef.current?.open();
+                        else
+                            textInputRef.current?.focus();
+                    }, children: [isDate ? (_jsxs(_Fragment, { children: [!localValue.value && _jsx(FilterCalendarIcon, {}), _jsx(Flatpickr, { className: "slick-premium-filter-input", value: localValue.value || '', onChange: ([date]) => {
+                                        if (date) {
+                                            const day = String(date.getDate()).padStart(2, '0');
+                                            const month = String(date.getMonth() + 1).padStart(2, '0');
+                                            const year = date.getFullYear();
+                                            let hours = date.getHours();
+                                            const minutes = String(date.getMinutes()).padStart(2, '0');
+                                            const ampm = hours >= 12 ? 'PM' : 'AM';
+                                            hours = hours % 12;
+                                            hours = hours ? hours : 12;
+                                            const strHours = String(hours).padStart(2, '0');
+                                            const formatted = `${day}/${month}/${year} ${strHours}:${minutes} ${ampm}`;
+                                            updateTextNumber(formatted);
+                                        }
+                                        else {
+                                            updateTextNumber('');
+                                        }
+                                    }, options: flatpickrOptions }, header.id + "_flatpickr")] })) : (_jsxs(_Fragment, { children: [_jsx("input", { ref: textInputRef, className: "slick-premium-filter-input", value: localValue.value || '', onChange: e => updateTextNumber(e.target.value), placeholder: FILTER_PLACEHOLDER }), localValue.value && (_jsx("div", { className: "filter-clear-btn", onClick: handleClear, title: "Clear filter", children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] })), localValue.value && isDate && (_jsx("div", { className: "filter-clear-btn", onClick: handleClear, children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }), _jsx("style", { children: `
+                    .slick-premium-filter-container .slick-filter-prefix.operand-selector,
+                    .slick-premium-filter-container .slick-filter-prefix.search-selector { width: 36px; min-width: 36px; justify-content: center; background: #f1f5f9; border-right: 1px solid #e2e8f0; display: flex; align-items: center; border-radius: 6px 0 0 6px; }
+                    .slick-premium-filter-container .operand-selector { width: 42px; min-width: 42px; }
+                    .operand-selector-chevron { display: flex; align-items: center; margin-left: 1px; color: #64748b; flex-shrink: 0; }
+                    .operand-selector:hover .operand-selector-chevron { color: #3b82f6; } 
+                    .slick-filter-dropdown-btn { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; overflow: hidden; }
+                    .dropdown-text-container { flex: 1; overflow: hidden; display: flex; align-items: center; }
+                    .dropdown-text { font-size: 12.5px; color: #334155; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
+                    .slick-premium-filter-input { padding-right: 24px !important; }
+                    .slick-premium-filter-input::placeholder { color: #94a3b8; opacity: 0.9; }
+                    .filter-date-placeholder-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #94a3b8 !important; pointer-events: none; display: flex; align-items: center; z-index: 1; }
+                    .filter-date-placeholder-icon svg { color: #94a3b8 !important; stroke: #94a3b8 !important; }
+                    .slick-filter-search-area { position: relative; }
+                    .flatpickr-input { width: 100%; min-width: 0; background: transparent; border: none; font-size: 12px; height: 100%; outline: none; color: #334155; font-weight: 500; font-family: inherit; overflow: hidden; text-overflow: ellipsis; padding-left: 28px !important; box-sizing: border-box; }
+                    .flatpickr-wrapper { width: 100%; }
+                    .filter-clear-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; width: 16px; height: 16px; border-radius: 50%; transition: all 0.2s; background: rgba(255,255,255,0.8); }
+                    .filter-clear-btn:hover { color: #ef4444; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+
+                    /* Flatpickr Overrides - Plain white/blue theme; hide dropdown arrow so only grey calendar placeholder shows in filter */
+                    .flatpickr-calendar.arrowBottom:before,
+                    .flatpickr-calendar.arrowBottom:after,
+                    .flatpickr-calendar.arrowTop:before,
+                    .flatpickr-calendar.arrowTop:after { display: none !important; }
+                    .flatpickr-calendar { z-index: 10001 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; font-family: 'Inter', sans-serif !important; }
+                    .flatpickr-months { background: #fff !important; border-radius: 12px 12px 0 0 !important; }
+                    .flatpickr-month { background: #fff !important; color: #334155 !important; }
+                    .flatpickr-current-month { color: #334155 !important; }
+                    .flatpickr-current-month .flatpickr-monthDropdown-months { background: #fff !important; color: #334155 !important; }
+                    .flatpickr-weekdays { background: #fff !important; }
+                    span.flatpickr-weekday { background: #fff !important; color: #64748b !important; font-weight: 600; }
+                    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
+                        background: #3b82f6 !important;
+                        border-color: #3b82f6 !important;
+                        color: #fff !important;
+                    }
+                    .flatpickr-day:hover { background: #eff6ff !important; border-color: #eff6ff !important; color: #1e40af !important; }
+                    .flatpickr-day.today { border-color: #3b82f6 !important; }
+                    .flatpickr-day.today:hover { background: #eff6ff !important; }
+                    .numInputWrapper:hover { background: #f8fafc !important; }
+                    .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #f1f5f9 !important; }
+                    .flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #64748b !important; }
+                    .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #3b82f6 !important; }
+                ` })] }));
+    };
+    const renderCheckboxList = (isBoolean = false) => {
+        let options = filterOptions;
+        if (isBoolean) {
+            options = [{ label: 'True', value: true }, { label: 'False', value: false }];
+            if (filterOptions.length > 0)
+                options = filterOptions;
+        }
+        const selected = Array.isArray(localValue) ? localValue : [];
+        const count = selected.length;
+        const totalOpts = options.length;
+        // Display Text
+        const selectedLabels = options
+            .filter((o) => selected.includes(o.value))
+            .map((o) => o.label);
+        const displayText = selectedLabels.join(', ');
+        // Toggle Item
+        const toggleItem = (val) => {
+            const current = Array.isArray(localValue) ? localValue : [];
+            const exists = current.includes(val);
+            const next = exists ? current.filter(v => v !== val) : [...current, val];
+            setLocalValue(next);
+            header.column.setFilterValue(next.length ? next : undefined);
+        };
+        // Select All
+        const toggleAll = () => {
+            const current = Array.isArray(localValue) ? localValue : [];
+            if (current.length === totalOpts) {
+                setLocalValue([]);
+                header.column.setFilterValue(undefined);
+            }
+            else {
+                const all = options.map((o) => o.value);
+                setLocalValue(all);
+                header.column.setFilterValue(all);
+            }
+        };
+        return (_jsxs("div", { className: `slick-premium-filter-container dropdown-trigger ${count > 0 ? 'has-selection' : ''}`, onClick: () => setShowPopover(!showPopover), children: [_jsx("div", { className: "slick-filter-prefix search-selector", role: "button", tabIndex: 0, title: "Click to select value(s)", onClick: (e) => { e.stopPropagation(); setShowPopover(true); }, onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setShowPopover(true);
+                    } }, children: _jsx("span", { className: "filter-placeholder-char", "aria-hidden": true, children: FILTER_PLACEHOLDER }) }), _jsxs("div", { className: "slick-filter-dropdown-btn", children: [_jsx("div", { className: "dropdown-text-container", children: _jsx("span", { className: "dropdown-text", title: displayText, children: displayText }) }), _jsx("div", { className: "dropdown-icons", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }) })] }), showPopover && (_jsxs("div", { className: "operand-dropdown check-list", children: [_jsxs("div", { className: "operand-item select-all", onClick: (e) => { e.stopPropagation(); toggleAll(); }, children: [_jsx("div", { className: `checkbox-box ${count === totalOpts ? 'checked' : ''}`, children: count === totalOpts && _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) }), _jsx("span", { className: "op-label", children: "Select All" })] }), _jsx("div", { className: "list-scroll-area", children: options.map((opt) => {
+                                const isSel = selected.includes(opt.value);
+                                return (_jsxs("div", { className: `operand-item ${isSel ? 'active' : ''}`, onClick: (e) => { e.stopPropagation(); toggleItem(opt.value); }, children: [_jsx("div", { className: `checkbox-box ${isSel ? 'checked' : ''}`, children: isSel && _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) }), _jsx("span", { className: "op-label", children: opt.label })] }, String(opt.value)));
+                            }) }), _jsx("div", { className: "filter-popup-footer", children: _jsx("button", { className: "filter-ok-btn", onClick: (e) => { e.stopPropagation(); setShowPopover(false); }, children: "Ok" }) })] }))] }));
+    };
+    const widthStyle = (layoutMode === 'fit-window' && totalSize > 0)
+        ? `${(header.getSize() / totalSize) * 100}%`
+        : header.getSize();
+    // Show filter for every column except Actions (by id or meta.actions)
+    const isActionColumn = header.column.id === 'actions' || !!(meta?.actions);
+    const canFilter = !isActionColumn;
+    return (_jsx("td", { className: `slick-filter-td ${draggedId === header.column.id ? 'dragging' : ''}`, style: {
+            width: widthStyle,
+            minWidth: 0,
+            maxWidth: widthStyle,
+            position: 'sticky',
+            top: 32, // Height of the header row (min-height 36px + 8px top + 8px bottom padding)
+            zIndex: 33,
+            background: canFilter ? '#f8fafc' : 'transparent',
+            padding: canFilter ? '6px 12px' : '0',
+            borderRight: canFilter ? '1px solid #f1f5f9' : 'none',
+            borderBottom: '1px solid #e2e8f0',
+            cursor: 'default',
+            overflow: 'visible'
+        }, children: canFilter && (_jsxs("div", { ref: containerRef, className: "filter-wrapper", style: { width: '100%', minWidth: 0, maxWidth: '100%', overflow: 'visible', boxSizing: 'border-box' }, children: [(filterType === 'text' || filterType === 'number' || filterType === 'date' || filterType === 'datetime' || filterType === 'time' || isDate) && renderTextNumber(), ['multiselect', 'checkbox'].includes(filterType) && renderCheckboxList(false), ['dropdown', 'select', 'radio', 'boolean'].includes(filterType) && renderCheckboxList(filterType === 'boolean'), !(filterType === 'text' || filterType === 'number' || filterType === 'date' || filterType === 'datetime' || filterType === 'time' || isDate) && !['multiselect', 'checkbox', 'dropdown', 'select', 'radio', 'boolean'].includes(filterType) && renderTextNumber()] })) }, `filter-${header.id}`));
+}, (prevProps, nextProps) => {
+    // Re-render when header, filterValue, or columnMeta changes
+    if (prevProps.header !== nextProps.header || prevProps.filterValue !== nextProps.filterValue || prevProps.columnMeta !== nextProps.columnMeta)
+        return false;
+    return (prevProps.draggedId === nextProps.draggedId &&
+        prevProps.layoutMode === nextProps.layoutMode &&
+        prevProps.totalSize === nextProps.totalSize);
+});
+// --- OPTIMIZATION: Memoized Data Row ---
+const MemoizedRow = memo(({ row, visibleCount, onRowClick, onActionClick, setContextMenu, getGroupingLabel, layoutMode, totalSize, columnMetaById }) => {
+    if (row.getIsGrouped()) {
+        const colId = row.groupingColumnId ?? '';
+        const colLabel = getGroupingLabel(colId);
+        const value = String(row.groupingValue);
+        return (_jsx("tr", { className: "slick-group-row", children: _jsx("td", { colSpan: visibleCount, children: _jsxs("div", { className: `slick-group-header-row ${row.getIsExpanded() ? 'expanded' : ''}`, onClick: row.getToggleExpandedHandler(), style: { paddingLeft: `${row.depth * 20 + 16}px` }, children: [_jsx("span", { className: "slick-group-chevron", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) }), _jsxs("span", { className: "slick-group-title", children: [_jsxs("strong", { className: "group-col-label", children: [colLabel, ":"] }), " ", value === 'undefined' || value === 'null' ? 'NULL' : value] }), _jsxs("span", { className: "slick-group-count", children: ["(", row.subRows.length, " items)"] })] }) }) }));
+    }
+    // Use table order: getVisibleCells() respects state.columnOrder and matches getHeaderGroups() order.
+    const cells = row.getVisibleCells();
+    return (_jsx("tr", { className: "slick-data-row", onClick: () => onRowClick && onRowClick(row.original), style: { cursor: onRowClick ? 'pointer' : 'default' }, children: cells.map(cell => (_jsx(MemoizedCell, { cell: cell, onActionClick: onActionClick, setContextMenu: setContextMenu, layoutMode: layoutMode, totalSize: totalSize, columnMetaById: columnMetaById }, cell.id))) }));
+}, (prevProps, nextProps) => {
+    // Re-render when row or columnOrder changes (important for column reordering)
+    // columnOrder is accessed from props object, not destructured in component body
+    if (prevProps.row !== nextProps.row || prevProps.columnOrder !== nextProps.columnOrder)
+        return false;
+    return (prevProps.visibleCount === nextProps.visibleCount &&
+        prevProps.layoutMode === nextProps.layoutMode &&
+        prevProps.totalSize === nextProps.totalSize &&
+        prevProps.onRowClick === nextProps.onRowClick &&
+        prevProps.onActionClick === nextProps.onActionClick &&
+        prevProps.setContextMenu === nextProps.setContextMenu &&
+        prevProps.getGroupingLabel === nextProps.getGroupingLabel &&
+        prevProps.columnMetaById === nextProps.columnMetaById);
+});
+// Data types that should be right-aligned (numbers, dates); all others (text, textarea, email, etc.) left-aligned
+const RIGHT_ALIGN_DATA_TYPES = ['number', 'decimal', 'currency', 'date', 'datetime', 'time', 'percentage'];
+/** Infer dataType from column id/accessorKey when meta.dataType is not set (so alignment works without column meta) */
+function inferDataTypeFromColumn(column) {
+    const def = column.columnDef;
+    const key = String(column.id || def?.accessorKey || '').toLowerCase();
+    if (!key)
+        return 'text';
+    if (key === 'id' || key === 'ids')
+        return 'number';
+    if (key === 'email')
+        return 'email';
+    const numericKeys = ['salary', 'amount', 'price', 'quantity', 'count', 'total', 'rate', 'number', 'num', 'qty', 'revenue', 'cost', 'balance'];
+    if (numericKeys.some(n => key.includes(n) || key === n))
+        return 'number';
+    const dateOnlyKeys = ['date', 'founded', 'dob', 'birth'];
+    if (dateOnlyKeys.some(d => key.includes(d) || key === d))
+        return 'date';
+    const dateTimeKeys = ['created', 'updated', 'time', 'open', 'close', 'willopen', 'willclose'];
+    if (dateTimeKeys.some(d => key.includes(d) || key === d))
+        return 'datetime';
+    return 'text';
+}
+// --- OPTIMIZATION: Memoized Cell Rendering ---
+const MemoizedCell = memo(({ cell, onActionClick, setContextMenu, layoutMode, totalSize, columnMetaById }) => {
+    const widthStyle = (layoutMode === 'fit-window' && totalSize > 0)
+        ? `${(cell.column.getSize() / totalSize) * 100}%`
+        : cell.column.getSize();
+    const colId = cell.column.id;
+    const accessorKey = cell.column.columnDef?.accessorKey;
+    const originalMeta = columnMetaById?.[colId] ?? (accessorKey ? columnMetaById?.[accessorKey] : undefined);
+    const meta = (originalMeta ?? cell.column.columnDef.meta);
+    const dataType = meta?.dataType ?? inferDataTypeFromColumn(cell.column);
+    const rawValue = cell.getValue();
+    const inferredDataType = inferDataTypeFromColumn(cell.column);
+    const isDateColumn = dataType === 'date' || dataType === 'datetime' || dataType === 'time';
+    const isInferredDateColumn = inferredDataType === 'date' || inferredDataType === 'datetime' || inferredDataType === 'time';
+    const valueLooksLikeIso = isIsoDateLike(rawValue);
+    const dateMode = isDateColumn
+        ? dataType
+        : valueLooksLikeIso && isInferredDateColumn
+            ? inferredDataType
+            : null;
+    const dateFormatOpts = meta?.formatOptions ? { dateFormat: meta.formatOptions.dateFormat, datetimeFormat: meta.formatOptions.datetimeFormat, timeFormat: meta.formatOptions.timeFormat } : undefined;
+    const cellTitle = dateMode ? (formatDateValue(rawValue, dateMode, dateFormatOpts) ?? String(rawValue ?? '')) : String(rawValue ?? '');
+    const formatterMeta = originalMeta ?? cell.column.columnDef.meta;
+    const useDateCell = dateMode !== null;
+    const textAlign = (RIGHT_ALIGN_DATA_TYPES.includes(dataType) || useDateCell) ? 'right' : 'left';
+    return (_jsx("td", { onContextMenu: (e) => {
+            e.preventDefault();
+            setContextMenu({
+                x: e.clientX,
+                y: e.clientY,
+                content: String(cell.getValue() ?? ''),
+                colId: cell.column.id,
+                isGroupable: !!cell.column.columnDef.enableGrouping
+            });
+        }, style: {
+            width: widthStyle,
+            textAlign,
+        }, children: _jsx("div", { className: "slick-cell-content", title: cellTitle, style: { textAlign }, children: cell.column.columnDef.cell
+                ? flexRender(cell.column.columnDef.cell, cell.getContext())
+                : (formatterMeta?.actions ?? cell.column.columnDef.meta?.actions)
+                    ? ActionFormatter(cell.getContext(), onActionClick)
+                    : useDateCell
+                        ? renderDateCell(rawValue, dateMode, dateFormatOpts)
+                        : DataFormatter(cell.getContext(), formatterMeta) }) }));
+});
+export function SabReactTable({ data, columns, title = 'Table_List', onSortedDataChange, defaultPageSize = 50, pageSizeOptions = [10, 20, 50, 100, 500, 1000], groupingLabels = {}, onRowClick, onActionClick, initialLayoutMode = 'fit-content' }) {
+    // UI States
+    const [sorting, setSorting] = useState([]);
+    const [columnSizing, setColumnSizing] = useState({});
+    const [grouping, setGrouping] = useState([]);
+    const [expanded, setExpanded] = useState({});
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: defaultPageSize });
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState(() => {
+        const initialMap = {};
+        columns.forEach(col => {
+            const id = (col.id || col.accessorKey);
+            if (id && col.meta?.initialHidden) {
+                initialMap[id] = false;
+            }
+        });
+        return initialMap;
+    });
+    // Initialize with column ids so header + filter + row cells all use same order from first render
+    const [columnOrder, setColumnOrder] = useState(() => columns.map(c => (c.id || c.accessorKey)).filter(Boolean));
+    // Sync column order when column set changes (add/remove) but preserve user reorder
+    useEffect(() => {
+        const currentIds = columns.map(c => (c.id || c.accessorKey)).filter(Boolean);
+        setColumnOrder(prev => {
+            const prevSet = new Set(prev);
+            if (prev.length !== currentIds.length || !currentIds.every(id => prevSet.has(id)))
+                return currentIds;
+            return prev;
+        });
+    }, [columns]);
+    const [layoutMode, setLayoutMode] = useState(initialLayoutMode);
+    // UI Feedback States
+    const [showCommands, setShowCommands] = useState(false);
+    const [commandMenuPos, setCommandMenuPos] = useState(null);
+    const [showFilters, setShowFilters] = useState(false);
+    const [showPaginationState] = useState(true);
+    const [showGroupingZone, setShowGroupingZone] = useState(false);
+    const [contextMenu, setContextMenu] = useState(null);
+    const [expandedSections, setExpandedSections] = useState({
+        quickActions: false, layoutMode: false, dataOptions: false, columns: false, groupingOptions: false, dataExport: false
+    });
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const contextMenuRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const tableRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const table = useReactTable({
+        data, columns,
+        state: { sorting, columnSizing, grouping, expanded, pagination, columnFilters, columnVisibility, columnOrder },
+        onSortingChange: setSorting,
+        onColumnSizingChange: setColumnSizing,
+        onGroupingChange: setGrouping,
+        onExpandedChange: setExpanded,
+        onPaginationChange: setPagination,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnOrderChange: setColumnOrder,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        filterFns: { advanced: advancedFilterFn },
+        defaultColumn: {
+            filterFn: advancedFilterFn,
+            enableGrouping: true,
+            enableColumnFilter: true,
+            size: 80,
+            minSize: 40
+        },
+        columnResizeMode: 'onChange',
+        enableColumnResizing: true,
+        enableGrouping: true,
+        enableExpanding: true,
+        enableColumnFilters: true,
+        enableMultiSort: true,
+        isMultiSortEvent: () => true,
+        autoResetPageIndex: true,
+    });
+    tableRef.current = table;
+    const { rows } = table.getRowModel();
+    const totalSize = table.getTotalSize();
+    const filteredTotalCount = table.getFilteredRowModel().rows.length;
+    const pageCount = table.getPageCount();
+    // Use table as single source of truth. Filter to visible columns only so when user hides a column, entire column (header + filter + cells) hides.
+    const headerGroups = useMemo(() => table.getHeaderGroups(), [table, columnOrder, columnVisibility]);
+    const visibleHeaderGroups = useMemo(() => headerGroups.map(hg => ({
+        ...hg,
+        headers: hg.headers.filter(h => h.column.getIsVisible())
+    })), [headerGroups]);
+    const visibleCount = visibleHeaderGroups[0]?.headers.length ?? 0;
+    // Resolve grouping labels so chips and group rows show column header name (e.g. "Name", "Email") not column id (e.g. "name", "email")
+    const resolvedGroupingLabels = useMemo(() => {
+        const map = {};
+        const idStr = (x) => (x != null ? String(x) : '');
+        // 1) Build from columns prop first (original header string before any table normalization)
+        columns.forEach((col) => {
+            const id = col.id ?? col.accessorKey;
+            if (id == null)
+                return;
+            const header = col.header;
+            const label = typeof header === 'string' ? header : idStr(id);
+            map[idStr(id)] = label;
+            const acc = col.accessorKey;
+            if (acc != null && idStr(acc) !== idStr(id))
+                map[idStr(acc)] = label;
+        });
+        // 2) Fill or overwrite from table columns (e.g. generated ids, or when prop gave fallback id)
+        table.getAllLeafColumns().forEach((col) => {
+            const id = col.id;
+            const sid = idStr(id);
+            const def = col.columnDef;
+            const header = def.header;
+            const tableLabel = typeof header === 'string' ? header : idStr(id);
+            const existing = map[sid];
+            if (existing != null && existing !== sid)
+                return;
+            map[sid] = tableLabel;
+            const acc = def.accessorKey;
+            if (acc != null && idStr(acc) !== sid)
+                map[idStr(acc)] = tableLabel;
+        });
+        return { ...map, ...groupingLabels };
+    }, [table, columns, groupingLabels]);
+    const getGroupingLabel = useCallback((colId) => resolveGroupingLabel(colId, table, columns, resolvedGroupingLabels), [table, columns, resolvedGroupingLabels]);
+    // Column meta from columns prop keyed by both id and accessorKey so date/datetime/time filter is always found
+    const columnMetaById = useMemo(() => {
+        const map = {};
+        columns.forEach((col) => {
+            if (!col.meta)
+                return;
+            const id = col.id ?? col.accessorKey;
+            const accessorKey = col.accessorKey;
+            if (id)
+                map[String(id)] = col.meta;
+            if (accessorKey && String(accessorKey) !== String(id))
+                map[String(accessorKey)] = col.meta;
+        });
+        return map;
+    }, [columns]);
+    // --- Virtualization ---
+    const rowVirtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => tableContainerRef.current,
+        estimateSize: useCallback(() => 40, []),
+        overscan: 10,
+    });
+    const virtualRows = rowVirtualizer.getVirtualItems();
+    const rowTotalHeight = rowVirtualizer.getTotalSize();
+    const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start || 0 : 0;
+    const paddingBottom = virtualRows.length > 0 ? rowTotalHeight - (virtualRows[virtualRows.length - 1]?.end || 0) : 0;
+    // --- ResizeObserver: track container width for fit-to-content (debounced for large resize) ---
+    useEffect(() => {
+        const el = tableContainerRef.current;
+        if (!el)
+            return;
+        let rafId;
+        let timeoutId;
+        const scheduleUpdate = () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                rafId = requestAnimationFrame(() => {
+                    setContainerWidth(el.clientWidth);
+                });
+            }, 100);
+        };
+        const ro = new ResizeObserver(scheduleUpdate);
+        ro.observe(el);
+        setContainerWidth(el.clientWidth);
+        return () => {
+            ro.disconnect();
+            clearTimeout(timeoutId);
+            if (rafId)
+                cancelAnimationFrame(rafId);
+        };
+    }, []);
+    // --- Shared helper: build resize defs and getCellDisplayText for layout effects (avoids duplication) ---
+    const getResizeParams = useCallback((t) => {
+        const visibleColumns = t.getVisibleLeafColumns();
+        const resizeDefs = visibleColumns.map(col => ({
+            id: col.id,
+            header: typeof col.columnDef.header === 'string' ? col.columnDef.header : col.id,
+            isCheckboxOrSelector: col.id === 'cspfm_assignment_checkbox' || String(col.id).endsWith('_checkbox_selector') || col.id === 'cspfm_sno',
+            isAction: col.id === 'cspfm_multi_line_action' || !!col.columnDef.meta?.actions
+        }));
+        const rowsForResize = t.getRowModel().rows
+            .filter(r => !r.getIsGrouped())
+            .map(r => r.original);
+        const getCellDisplayText = (row, columnId) => {
+            const col = columns.find(c => (c.id || c.accessorKey) === columnId);
+            if (!col)
+                return '';
+            const key = col.accessorKey ?? col.id;
+            return String((key ? row[key] : undefined) ?? '');
+        };
+        return { resizeDefs, rowsForResize, getCellDisplayText };
+    }, [columns]);
+    // --- Fit-to-content: compute column sizes from header + cell content (current page only for performance), then distribute extra space ---
+    useEffect(() => {
+        if (layoutMode !== 'fit-content' || containerWidth <= 0)
+            return;
+        const t = tableRef.current;
+        if (!t)
+            return;
+        const { resizeDefs, rowsForResize, getCellDisplayText } = getResizeParams(t);
+        const sizing = resizeColumnsByCellContent({
+            containerWidth,
+            columns: resizeDefs,
+            rows: rowsForResize,
+            getCellDisplayText,
+            distributeExtraSpace: true
+        });
+        setColumnSizing(sizing);
+    }, [layoutMode, containerWidth, data, columns, grouping, getResizeParams]);
+    // --- Fit-to-default: same as Angular - with data use content-based widths (no space distribution); with no data use default column widths ---
+    useEffect(() => {
+        if (layoutMode !== 'fit-default')
+            return;
+        const t = tableRef.current;
+        if (!t)
+            return;
+        const { resizeDefs, rowsForResize, getCellDisplayText } = getResizeParams(t);
+        if (rowsForResize.length > 0) {
+            const sizing = resizeColumnsByCellContent({
+                containerWidth: containerWidth || 1,
+                columns: resizeDefs,
+                rows: rowsForResize,
+                getCellDisplayText,
+                distributeExtraSpace: false
+            });
+            setColumnSizing(sizing);
+        }
+        else {
+            setColumnSizing({});
+        }
+    }, [layoutMode, containerWidth, data, columns, grouping, getResizeParams]);
+    // --- Handlers ---
+    useEffect(() => {
+        if (!onSortedDataChange)
+            return;
+        const sortedRows = table.getPrePaginationRowModel().rows.filter(r => !r.getIsGrouped()).map(r => r.original);
+        onSortedDataChange(sortedRows);
+    }, [data, sorting, grouping, expanded, columnFilters, onSortedDataChange, table]);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (menuRef.current && !menuRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target))
+                setShowCommands(false);
+            if (contextMenuRef.current && !contextMenuRef.current.contains(e.target))
+                setContextMenu(null);
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const toggleCommands = useCallback((e) => {
+        e.stopPropagation();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const menuWidth = 310;
+        const menuHeight = 450;
+        const padding = 10;
+        let left = rect.left;
+        if (left + menuWidth > window.innerWidth) {
+            left = window.innerWidth - menuWidth - padding;
+        }
+        if (left < padding) {
+            left = padding;
+        }
+        let top;
+        const spaceBelow = window.innerHeight - rect.bottom - padding;
+        const spaceAbove = rect.top - padding;
+        if (spaceBelow >= menuHeight) {
+            top = rect.bottom + 8;
+        }
+        else if (spaceAbove >= menuHeight) {
+            top = rect.top - menuHeight - 8;
+        }
+        else {
+            top = Math.max(padding, window.innerHeight - menuHeight - padding);
+        }
+        top = Math.max(padding, Math.min(top, window.innerHeight - menuHeight - padding));
+        setCommandMenuPos({ top, left });
+        setShowCommands(s => !s);
+    }, []);
+    const handleExport = useCallback((format) => {
+        const visibleColumns = table.getVisibleLeafColumns();
+        // Get filtered and sorted rows, excluding group header rows
+        const allRows = table.getFilteredRowModel().flatRows;
+        const leafRows = allRows
+            .filter(r => !r.getIsGrouped()) // Exclude group header rows
+            .map(r => {
+            const rowData = {};
+            visibleColumns.forEach(col => {
+                const header = typeof col.columnDef.header === 'string' ? col.columnDef.header : col.id;
+                rowData[header] = r.getValue(col.id);
+            });
+            return rowData;
+        });
+        const fileName = (title || 'Export').toLowerCase().replace(/\s+/g, '_');
+        if (format === 'excel')
+            exportTableToExcel(leafRows, fileName, title);
+        else
+            exportTableToCSV(leafRows, fileName);
+        setShowCommands(false);
+    }, [table, title]);
+    const toggleGrouping = useCallback((colId) => setGrouping(prev => prev.includes(colId) ? prev.filter(g => g !== colId) : [...prev, colId]), []);
+    const clearGrouping = useCallback(() => { setGrouping([]); setExpanded({}); }, []);
+    const handleCopy = useCallback(() => { if (contextMenu?.content)
+        navigator.clipboard.writeText(contextMenu.content); setContextMenu(null); }, [contextMenu]);
+    const expandAllGroups = useCallback(() => { table.toggleAllRowsExpanded(true); setContextMenu(null); }, [table]);
+    const collapseAllGroups = useCallback(() => { table.toggleAllRowsExpanded(false); setContextMenu(null); }, [table]);
+    const clearAllFilters = useCallback(() => table.setColumnFilters([]), [table]);
+    const clearAllSorting = useCallback(() => table.setSorting([]), [table]);
+    const toggleMenuSection = useCallback((section) => {
+        setExpandedSections(prev => {
+            const isExpanding = !prev[section];
+            if (isExpanding) {
+                const next = {};
+                Object.keys(prev).forEach(k => { next[k] = k === section; });
+                return next;
+            }
+            return { ...prev, [section]: false };
+        });
+    }, []);
+    // Drag-Drop Columns
+    const [draggedColumnId, setDraggedColumnId] = useState(null);
+    const handleDragStart = useCallback((id) => setDraggedColumnId(id), []);
+    const handleDragEnd = useCallback(() => setDraggedColumnId(null), []);
+    const handleDragOver = useCallback((e, _targetColumnId) => {
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+    }, []);
+    const handleDrop = useCallback((e, targetColumnId) => {
+        e.preventDefault();
+        const sourceId = e.dataTransfer.getData('text/plain') || draggedColumnId;
+        if (sourceId && sourceId !== targetColumnId) {
+            setColumnOrder(prev => {
+                // Use current table column order when prev is empty so drop always has effect
+                const order = prev.length > 0 ? prev : (tableRef.current ? tableRef.current.getVisibleLeafColumns().map(c => c.id) : []);
+                const newOrder = [...order];
+                const draggedIdx = newOrder.indexOf(sourceId);
+                const targetIdx = newOrder.indexOf(targetColumnId);
+                if (draggedIdx !== -1 && targetIdx !== -1) {
+                    newOrder.splice(draggedIdx, 1);
+                    newOrder.splice(targetIdx, 0, sourceId);
+                    return newOrder;
+                }
+                return prev.length > 0 ? prev : order;
+            });
+        }
+        setDraggedColumnId(null);
+    }, [draggedColumnId]);
+    const handleGroupDrop = useCallback((e) => {
+        e.preventDefault();
+        const colId = e.dataTransfer.getData('text/plain') || draggedColumnId;
+        if (colId && !grouping.includes(colId)) {
+            toggleGrouping(colId);
+        }
+        setDraggedColumnId(null);
+    }, [draggedColumnId, grouping, toggleGrouping]);
+    const isGrouped = grouping.length > 0;
+    const isGroupingZoneVisible = isGrouped || showGroupingZone;
+    const isFloatingDrag = !!draggedColumnId && !isGrouped && !showGroupingZone;
+    return (_jsxs("div", { className: `slick-enterprise-table ${layoutMode}`, "data-sab-grid": "true", onContextMenu: (e) => e.preventDefault(), children: [_jsx("div", { className: `slick-grouping-zone-wrapper ${isGroupingZoneVisible ? 'expanded' : 'collapsed'} ${isFloatingDrag ? 'floating' : ''}`, children: isGroupingZoneVisible && (_jsxs("div", { className: `slick-grouping-zone ${draggedColumnId && isGroupingZoneVisible ? 'dropping-target' : ''} ${isGrouped ? 'active' : ''}`, onDragOver: (e) => { e.preventDefault(); if (e.dataTransfer)
+                        e.dataTransfer.dropEffect = 'move'; }, onDragEnter: (e) => e.preventDefault(), onDrop: handleGroupDrop, children: [!isGrouped && showGroupingZone && _jsx("div", { className: "group-drop-hint", children: "Drop column here to group" }), _jsx("div", { className: "slick-group-chips-container", children: grouping.map(colId => (_jsxs("div", { className: "slick-group-chip", children: [_jsx("span", { className: "chip-label", children: resolveGroupingLabel(colId, table, columns, resolvedGroupingLabels) }), _jsx("button", { className: "chip-remove", onClick: () => toggleGrouping(colId), children: "\u00D7" })] }, colId))) }), isGrouped && _jsx("button", { className: "clear-all-groups-btn-premium", onClick: clearGrouping, children: "Clear All" })] })) }), _jsx("div", { className: "slick-toolbar", children: _jsxs("div", { className: "slick-toolbar-content", children: [_jsxs("div", { className: "slick-toolbar-left-group", children: [_jsx("div", { className: "slick-title-icon", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" }), _jsx("line", { x1: "15", y1: "3", x2: "15", y2: "21" }), _jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }), _jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15" })] }) }), _jsx("span", { className: "slick-table-title", children: title }), _jsx("div", { className: "slick-command-separator", children: "|" }), _jsx("div", { className: "hamburger-trigger-area", ref: triggerRef, children: _jsx("button", { className: "slick-command-btn circular", onClick: toggleCommands, title: "Context menu", children: _jsx("span", { className: "slick-icon-touch-target", "aria-hidden": true, children: _jsxs("span", { className: "slick-icon-css slick-icon-hamburger", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) }) }) })] }), _jsxs("div", { className: "slick-toolbar-right-group", children: [showPaginationState && (_jsxs("div", { className: "slick-pagination-controls-integrated", children: [_jsx("span", { className: "slick-items-label", children: "Items per page :" }), _jsx("select", { value: pagination.pageSize, onChange: e => { table.setPageSize(Number(e.target.value)); setPagination(prev => ({ ...prev, pageSize: Number(e.target.value) })); }, className: "slick-pagesize-select compact", children: pageSizeOptions.map(n => _jsx("option", { value: n, children: n }, n)) }), _jsxs("span", { className: "slick-stat-range", children: [pagination.pageIndex * pagination.pageSize + 1, " - ", Math.min((pagination.pageIndex + 1) * pagination.pageSize, filteredTotalCount), " of ", filteredTotalCount] }), _jsxs("span", { className: "slick-page-info", children: [pagination.pageIndex + 1, "/", pageCount || 1, " Page"] }), _jsxs("div", { className: "slick-nav-buttons", children: [_jsx("button", { className: "slick-icon-action mini nav-arrow", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: "\u2039" }), _jsx("button", { className: "slick-icon-action mini nav-arrow", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: "\u203A" })] })] })), _jsx("button", { className: `slick-icon-action filter-toggle ${showFilters ? 'active' : ''}`, onClick: () => setShowFilters(s => !s), title: "Toggle filters", children: _jsx("span", { className: "slick-icon-touch-target", "aria-hidden": true, children: _jsxs("span", { className: "slick-icon-css slick-icon-filter", "aria-hidden": true, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) }) })] })] }) }), _jsx("div", { className: `slick-grid-container ${visibleCount === 1 ? 'single-column-mode' : ''}`, ref: tableContainerRef, children: _jsxs("table", { className: "slick-table", style: {
+                        width: layoutMode === 'fit-content' ? 'max-content' : '100%',
+                        minWidth: '100%',
+                        // fixed layout so column widths come only from header + row data (resizeColumnsByCellContent); filter panel content is excluded
+                        tableLayout: 'fixed'
+                    }, children: [_jsx("thead", { children: visibleHeaderGroups.map(hg => (_jsxs(React.Fragment, { children: [_jsx("tr", { className: `slick-header-row ${draggedColumnId ? 'dragging-active' : ''}`, children: hg.headers.map(h => (_jsx(MemoizedHeaderCell, { header: h, draggedColumnId: draggedColumnId, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDrop: handleDrop, layoutMode: layoutMode, totalSize: totalSize }, h.id))) }), showFilters && (_jsx("tr", { className: "slick-filter-row", children: hg.headers.map(h => (_jsx(MemoizedFilterCell, { header: h, filterValue: h.column.getFilterValue(), draggedId: draggedColumnId, layoutMode: layoutMode, totalSize: totalSize, columnMeta: columnMetaById[h.column.id] ?? columnMetaById[h.column.columnDef?.accessorKey] }, h.id))) }))] }, hg.id))) }), _jsxs("tbody", { children: [paddingTop > 0 && _jsx("tr", { children: _jsx("td", { style: { height: `${paddingTop}px` } }) }), virtualRows.map(vr => (_jsx(MemoizedRow, { row: rows[vr.index], visibleCount: visibleCount, onRowClick: onRowClick, onActionClick: onActionClick, setContextMenu: setContextMenu, getGroupingLabel: getGroupingLabel, layoutMode: layoutMode, totalSize: totalSize, columnOrder: columnOrder, columnMetaById: columnMetaById }, rows[vr.index].id))), paddingBottom > 0 && _jsx("tr", { children: _jsx("td", { style: { height: `${paddingBottom}px` } }) })] })] }) }), showCommands && commandMenuPos && (_jsxs("div", { ref: menuRef, className: "slick-fixed-cmd-menu consolidated-menu", style: {
+                    top: commandMenuPos.top,
+                    left: commandMenuPos.left,
+                    position: 'fixed',
+                    maxHeight: `calc(100vh - ${commandMenuPos.top + 16}px)`,
+                    overflowY: 'auto'
+                }, children: [_jsxs("div", { className: `menu-collapsible-section ${expandedSections.quickActions ? 'expanded' : ''}`, children: [_jsxs("div", { className: "menu-header clickable", onClick: () => toggleMenuSection('quickActions'), children: [_jsx("span", { children: "QUICK ACTIONS" }), _jsx("span", { className: "expand-icon", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", style: { transform: expandedSections.quickActions ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] }), expandedSections.quickActions && (_jsxs("div", { className: "section-content", children: [_jsxs("div", { className: "menu-action-item", onClick: () => { clearAllFilters(); setShowCommands(false); }, children: [_jsx("div", { className: "round-icon-bg action-icon", children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }) }) }), _jsx("span", { children: "Clear All Filters" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { clearAllSorting(); setShowCommands(false); }, children: [_jsx("div", { className: "round-icon-bg action-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("circle", { cx: "12", cy: "12", r: "3" }), _jsx("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" })] }) }), _jsx("span", { children: "Clear All Sorting" })] })] }))] }), _jsx("div", { className: "menu-divider" }), _jsxs("div", { className: `menu-collapsible-section ${expandedSections.dataExport ? 'expanded' : ''}`, children: [_jsxs("div", { className: "menu-header clickable", onClick: () => toggleMenuSection('dataExport'), children: [_jsx("span", { children: "DATA EXPORT" }), _jsx("span", { className: "expand-icon", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", style: { transform: expandedSections.dataExport ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] }), expandedSections.dataExport && (_jsxs("div", { className: "section-content", children: [_jsxs("div", { className: "menu-action-item", onClick: () => handleExport('excel'), children: [_jsx("div", { className: "round-icon-bg action-icon", style: { background: '#10b981', color: '#fff' }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10 9 9 9 8 9" })] }) }), _jsx("span", { children: "Export to Excel" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => handleExport('csv'), children: [_jsx("div", { className: "round-icon-bg action-icon", style: { background: '#f59e0b', color: '#fff' }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" })] }) }), _jsx("span", { children: "Export to CSV" })] })] }))] }), _jsx("div", { className: "menu-divider" }), _jsxs("div", { className: `menu-collapsible-section ${expandedSections.layoutMode ? 'expanded' : ''}`, children: [_jsxs("div", { className: "menu-header clickable", onClick: () => toggleMenuSection('layoutMode'), children: [_jsx("span", { children: "LAYOUT MODE" }), _jsx("span", { className: "expand-icon", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", style: { transform: expandedSections.layoutMode ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] }), expandedSections.layoutMode && (_jsxs("div", { className: "section-content", children: [_jsxs("div", { className: "menu-action-item", onClick: () => { setLayoutMode('fit-default'); setShowCommands(false); }, children: [_jsx("div", { className: `radio-circle ${layoutMode === 'fit-default' ? 'checked' : ''}`, children: _jsx("div", { className: "dot" }) }), _jsx("span", { children: "Fit to Default" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { setLayoutMode('fit-window'); setShowCommands(false); }, children: [_jsx("div", { className: `radio-circle ${layoutMode === 'fit-window' ? 'checked' : ''}`, children: _jsx("div", { className: "dot" }) }), _jsx("span", { children: "Fit to Window" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { setLayoutMode('fit-content'); setShowCommands(false); }, children: [_jsx("div", { className: `radio-circle ${layoutMode === 'fit-content' ? 'checked' : ''}`, children: _jsx("div", { className: "dot" }) }), _jsx("span", { children: "Fit to Content" })] })] }))] }), _jsx("div", { className: "menu-divider" }), _jsxs("div", { className: `menu-collapsible-section ${expandedSections.columns ? 'expanded' : ''}`, children: [_jsxs("div", { className: "menu-header clickable", onClick: () => toggleMenuSection('columns'), children: [_jsx("span", { children: "COLUMNS" }), _jsx("span", { className: "expand-icon", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", style: { transform: expandedSections.columns ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] }), expandedSections.columns && (_jsx("div", { className: "section-content", children: _jsx("div", { className: "menu-columns-scroll consolidated", children: (() => {
+                                        const allCols = table.getAllLeafColumns();
+                                        const visibleCols = allCols.filter(c => c.getIsVisible());
+                                        const visibleCount = visibleCols.length;
+                                        return allCols.map(column => {
+                                            const isVisible = column.getIsVisible();
+                                            const isLastVisible = isVisible && visibleCount === 1;
+                                            return (_jsx("div", { className: "menu-column-list-item-pro", children: _jsxs("div", { className: "column-checkbox-part", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        if (isLastVisible)
+                                                            return;
+                                                        column.toggleVisibility();
+                                                    }, style: { cursor: 'pointer' }, children: [_jsx("input", { type: "checkbox", checked: isVisible, readOnly: true }), _jsx("span", { className: "col-label-text", children: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id })] }) }, column.id));
+                                        });
+                                    })() }) }))] }), _jsx("div", { className: "menu-divider" }), _jsxs("div", { className: `menu-collapsible-section ${expandedSections.groupingOptions ? 'expanded' : ''}`, children: [_jsxs("div", { className: "menu-header clickable", onClick: () => toggleMenuSection('groupingOptions'), children: [_jsx("span", { children: "GROUPING OPTIONS" }), _jsx("span", { className: "expand-icon", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", style: { transform: expandedSections.groupingOptions ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] }), expandedSections.groupingOptions && (_jsxs("div", { className: "section-content", children: [_jsxs("div", { className: "menu-action-item", onClick: () => { setShowGroupingZone(!showGroupingZone); setShowCommands(false); }, children: [_jsx("div", { className: "round-icon-bg action-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" }), _jsx("line", { x1: "15", y1: "3", x2: "15", y2: "21" })] }) }), _jsxs("span", { children: [showGroupingZone ? 'Hide' : 'Enable', " Group By"] })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { clearGrouping(); setShowCommands(false); }, children: [_jsx("div", { className: "round-icon-bg action-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M21 4H8l-7 8 7 8h13a2 2 0 002-2V6a2 2 0 00-2-2z" }), _jsx("line", { x1: "18", y1: "9", x2: "12", y2: "15" }), _jsx("line", { x1: "12", y1: "9", x2: "18", y2: "15" })] }) }), _jsx("span", { children: "Clear All Grouping" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { expandAllGroups(); setShowCommands(false); }, children: [_jsx("div", { className: "round-icon-bg action-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M15 9l6-6" }), _jsx("path", { d: "M9 15l-6 6" }), _jsx("path", { d: "M3 15h6v6" }), _jsx("path", { d: "M21 9h-6V3" })] }) }), _jsx("span", { children: "Expand All Groups" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { collapseAllGroups(); setShowCommands(false); }, children: [_jsx("div", { className: "round-icon-bg action-icon", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M4 14h6v6" }), _jsx("path", { d: "M20 10h-6V4" }), _jsx("path", { d: "M14 10l7-7" }), _jsx("path", { d: "M3 21l7-7" })] }) }), _jsx("span", { children: "Collapse All Groups" })] })] }))] })] })), contextMenu && (_jsxs("div", { ref: contextMenuRef, className: "slick-fixed-cmd-menu consolidated-menu context-premium", style: {
+                    top: contextMenu.y + 350 > window.innerHeight ? contextMenu.y - 350 : contextMenu.y,
+                    left: Math.min(contextMenu.x, window.innerWidth - 320),
+                    position: 'fixed',
+                    maxHeight: '350px',
+                    overflowY: 'auto'
+                }, children: [_jsx("div", { className: "menu-header-main", children: "QUICK ACTIONS" }), _jsxs("div", { className: "menu-action-item", onClick: handleCopy, children: [_jsx("div", { className: "round-icon-bg action-icon", style: { background: '#f8fafc', color: '#64748b' }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })] }) }), _jsx("span", { children: "Copy Selection" })] }), isGrouped && (_jsxs(_Fragment, { children: [_jsx("div", { className: "menu-divider" }), _jsxs("div", { className: "menu-action-item", onClick: () => { collapseAllGroups(); setContextMenu(null); }, children: [_jsx("div", { className: "round-icon-bg action-icon", style: { background: '#f8fafc', color: '#64748b' }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M4 14h6v6" }), _jsx("path", { d: "M20 10h-6V4" }), _jsx("path", { d: "M14 10l7-7" }), _jsx("path", { d: "M3 21l7-7" })] }) }), _jsx("span", { children: "Collapse All Groups" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { expandAllGroups(); setContextMenu(null); }, children: [_jsx("div", { className: "round-icon-bg action-icon", style: { background: '#f8fafc', color: '#64748b' }, children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [_jsx("path", { d: "M15 9l6-6" }), _jsx("path", { d: "M9 15l-6 6" }), _jsx("path", { d: "M3 15h6v6" }), _jsx("path", { d: "M21 9h-6V3" })] }) }), _jsx("span", { children: "Expand All Groups" })] }), _jsxs("div", { className: "menu-action-item", onClick: () => { clearGrouping(); setContextMenu(null); }, children: [_jsx("div", { className: "round-icon-bg action-icon", style: { background: '#f8fafc', color: '#64748b' }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) }), _jsx("span", { children: "Clear All Grouping" })] })] }))] })), _jsx("style", { children: `
+                .slick-enterprise-table { width: 100%; font-family: 'Inter', system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
+                .slick-grouping-zone { margin: 12px 20px 0; padding: 10px 18px; border: 1.5px dashed #cbd5e1; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; background: #fdfdfd; transition: all 0.2s; min-height: 48px; position: relative; }
+                .slick-grouping-zone.dropping-target { border-color: #3b82f6; background: #f0f7ff; border-style: solid; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
+                .group-drop-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; color: #3b82f6; font-weight: 600; pointer-events: none; }
+                .slick-group-chips-container { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+                .slick-group-chip { background: #fff; border: 1px solid #3b82f6; border-radius: 20px; padding: 4px 12px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1); }
+                .chip-label { font-size: 12.5px; font-weight: 700; color: #1e40af; }
+                .chip-remove { background: transparent; border: none; color: #3b82f6; font-size: 18px; font-weight: 700; cursor: pointer; padding: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
+                .chip-remove:hover { background: #3b82f6; color: #fff; }
+                .clear-all-groups-btn-premium { background: #ef4444; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
+                .clear-all-groups-btn-premium:hover { background: #dc2626; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); }
+                .slick-group-row td { padding: 0 !important; background: #fff !important; border-bottom: 1px solid #e2e8f0; }
+                .slick-group-header-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; background: #f8fafc; border-left: 4px solid transparent; transition: all 0.2s; font-size: 12.5px; font-weight: 700; color: #334155; }
+                .slick-group-header-row.expanded { background: #f1f7ff; border-left-color: #3b82f6; border-bottom: 1px solid #dbeafe; }
+                .slick-group-chevron { display: flex; align-items: center; color: #64748b; transition: transform 0.2s; }
+                .slick-group-header-row.expanded .slick-group-chevron { transform: rotate(90deg); color: #3b82f6; }
+                .slick-group-title { font-size: 12.5px; font-weight: 700; color: #334155; }
+                .slick-group-title .group-col-label { font-size: 12.5px; font-weight: 700; color: #334155; }
+                .slick-group-count { font-size: 12px; color: #3b82f6; font-weight: 600; background: #eff6ff; padding: 2px 8px; border-radius: 12px; }
+                .slick-toolbar { border-bottom: 1px solid #f1f5f9; background: #f8fafc; padding: 0 16px; height: 48px; display: flex; align-items: center; }
+                .slick-toolbar-content { width: 100%; display: flex; justify-content: space-between; align-items: center; }
+                .slick-toolbar-left-group { display: flex; align-items: center; gap: 12px; }
+                .slick-toolbar-right-group { display: flex; align-items: center; gap: 16px; }
+                .slick-title-icon { color:black; background: #ecfdf5; padding: 6px; border-radius: 8px; display: flex; align-items: center; }
+                .slick-table-title { font-weight: 700; color: #334155; font-size: 14.5px; }
+                .slick-command-separator { color: #e2e8f0; font-weight: 300; margin: 0 4px; }
+                .slick-command-btn.circular { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e2e8f0; background: #eff6ff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #3b82f6; transition: all 0.2s; }
+                .slick-command-btn.circular:hover { border-color: #3b82f6; color: #1d4ed8; background: #dbeafe; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12); }
+                /* CSS-only toolbar/filter icons (span-based, no SVG) so consumers can target reliably */
+                .slick-icon-touch-target { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; color: inherit; }
+                .slick-icon-css.slick-icon-hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 12px; color: currentColor; }
+                .slick-icon-css.slick-icon-hamburger span { display: block; height: 2px; background: currentColor; border-radius: 1px; width: 100%; }
+                /* Three-bar filter icon (top longest, middle shorter, bottom shortest) – CSS-only */
+                .slick-icon-css.slick-icon-filter { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 16px; height: 12px; color: currentColor; gap: 3px; }
+                .slick-icon-css.slick-icon-filter span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
+                .slick-icon-css.slick-icon-filter span:nth-child(1) { width: 100%; }
+                .slick-icon-css.slick-icon-filter span:nth-child(2) { width: 65%; }
+                .slick-icon-css.slick-icon-filter span:nth-child(3) { width: 40%; }
+                .slick-icon-css.slick-icon-search { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 50%; position: relative; box-sizing: border-box; color: currentColor; }
+                .slick-icon-css.slick-icon-search::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 6px; height: 2px; background: currentColor; transform: rotate(45deg); transform-origin: right center; border-radius: 1px; }
+                .slick-icon-css.slick-icon-calendar { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 2px; position: relative; box-sizing: border-box; color: currentColor; }
+                .slick-icon-css.slick-icon-calendar::before { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 4px; height: 2px; background: currentColor; border-radius: 1px; }
+                .slick-icon-css.slick-icon-calendar::after { content: ''; position: absolute; top: 2px; left: 1px; right: 1px; height: 1px; background: currentColor; border-radius: 0; }
+
+                .slick-pagination-controls-integrated { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #64748b; font-weight: 500; }
+                .slick-pagesize-select { border: 1px solid #e2e8f0; border-radius: 6px; padding: 2px 8px; font-size: 12px; outline: none; background: #fff; cursor: pointer; }
+                .slick-nav-buttons { display: flex; align-items: center; border-left: 1px solid #e2e8f0; padding-left: 12px; margin-left: 4px; gap: 4px; }
+                .slick-icon-action { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #e2e8f0; background: #eff6ff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #3b82f6; transition: all 0.2s; }
+                .slick-icon-action:hover:not(:disabled) { border-color: #3b82f6; color: #1d4ed8; background: #dbeafe; }
+                .slick-icon-action:disabled { opacity: 0.4; cursor: not-allowed; }
+                .slick-icon-action.mini { width: 28px; height: 28px; font-size: 18px; }
+                .slick-icon-action.filter-toggle { border-color: #e2e8f0; background: #eff6ff; color: #3b82f6; }
+                .slick-icon-action.filter-toggle.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+                .slick-icon-action.filter-toggle:not(.active):hover { background: #dbeafe; color: #1d4ed8; border-color: #3b82f6; }
+                .consolidated-menu { width: 310px; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,0.18); z-index: 10000; padding: 10px 0; max-height: 520px; overflow-y: auto; }
+                .menu-header-main { padding: 10px 18px 12px; font-size: 14px; font-weight: 700; color: #334155; border-bottom: 1px solid #f1f5f9; margin-bottom: 8px; }
+                .menu-action-item { padding: 8px 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
+                .menu-action-item:hover { background: #f8fafc; }
+                .menu-action-item span { font-size: 14px; font-weight: 600; color: #1e293b; }
+                .round-icon-bg.action-icon { width: 34px; height: 34px; border-radius: 50%; background: #eff6ff; display: flex; align-items: center; justify-content: center; color: #3b82f6; }
+                .round-icon-bg.action-icon.mini-icon { width: 26px; height: 26px; }
+                .menu-header.clickable { display: flex; justify-content: space-between; align-items: center; cursor: pointer; margin: 0 8px; padding: 10px 12px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; }
+                .menu-header.clickable:hover { background: #f8fafc; }
+                .menu-collapsible-section.expanded .menu-header.clickable { color: #3b82f6; background: #f0f7ff; }
+                .expand-icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+
+                .slick-grid-container { width: 100%; overflow: auto; height: calc(100vh - 420px); min-height: 420px; }
+                .slick-table { border-collapse: separate; border-spacing: 0; min-width: 100%; table-layout: fixed; }
+                /* Column headers fixed (sticky) by default - do not scroll with body */
+                .slick-header-th { border-bottom: 2px solid #dde3ed; border-right: 1px solid #e8ecf2; background: #f0f4f8; position: sticky; top: 0; z-index: 35; }
+                .slick-header-cell-inner { padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: #334155; display: flex; align-items: center; justify-content: flex-start; gap: 4px; position: relative; min-height: 24px; }
+                .slick-header-label { flex: 1; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
+                .slick-header-actions { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 1px; border-radius: 4px; color: #94a3b8; width: 20px; height: 20px; opacity: 0; visibility: hidden; transition: opacity 0.2s; flex-shrink: 0; }
+                .slick-header-th:hover .slick-header-actions, .slick-header-actions.visible { opacity: 1; visibility: visible; }
+                .slick-header-actions:hover { background: #e2e8f0; color: #3b82f6; }
+                .slick-header-actions svg, .slick-header-label svg { pointer-events: none; }
+                
+                .slick-header-dropdown-menu { position: absolute; top: 100%; right: 0; width: 220px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 1000; padding: 6px 0; margin-top: 4px; }
+                .dropdown-item { padding: 8px 16px; font-size: 13px; font-weight: 500; color: #475569; display: flex; align-items: center; gap: 10px; cursor: pointer; }
+                .dropdown-item:hover { background: #f8fafc; color: #3b82f6; }
+                .dropdown-divider { height: 1px; background: #f1f5f9; margin: 4px 0; }
+
+                .slick-data-row:nth-child(even) { background: #fdfdfd; }
+                .slick-data-row:hover { background: #e8f4fd; }
+                .slick-data-row td { border-bottom: 1px solid #edf0f5; border-right: 1px solid #edf0f5; padding: 7px 10px; font-size: 13px; vertical-align: middle; }
+                
+                /* Single Column Professional Mode */
+                .single-column-mode .slick-table { border: 1px solid #e2e8f0; border-radius: 4px; overflow: visible; margin: 4px; width: calc(100% - 8px); }
+                .single-column-mode .slick-header-th { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; font-weight: 700; color: #334155; }
+                .single-column-mode .slick-data-row td { border-bottom: 1px solid #f1f5f9; background: #fff; }
+                .single-column-mode .slick-data-row:hover td { background: #f8fafc; }
+                .single-column-mode .slick-header-cell-inner { padding: 8px 12px; }
+                .slick-cell-content { font-size: 13px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+                
+                .slick-filter-prefix { width: 24px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-right: 1px solid #e2e8f0; cursor: pointer; border-radius: 6px 0 0 6px; }
+                .filter-placeholder-char { font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
+                .prefix-dot-trigger { width: 10px; height: 4px; border-radius: 50%; background: #94a3b8; }
+                .prefix-operand-symbol { font-size: 13px; font-weight: 700; color: #000; display: flex; align-items: center; justify-content: center; width: 100%; }
+                .prefix-operand-symbol.placeholder { color: #cbd5e1; }
+                .prefix-operand-placeholder { display: block; width: 14px; height: 14px; }
+                .slick-filter-search-area { flex: 1; min-width: 0; display: flex; align-items: center; position: relative; padding-left: 8px; overflow: hidden; cursor: text; }
+                .active-operand-overlay { position: absolute; bottom: -2px; right: -4px; font-size: 8px; font-weight: 900; background: #3b82f6; color: #fff; border-radius: 3px; padding: 0 2px; line-height: 1; }
+                .operand-selector { cursor: pointer; position: relative; user-select: none; }
+                .operand-selector-chevron { display: flex; align-items: center; color: #64748b; }
+                .operand-selector:hover .operand-selector-chevron { color: #3b82f6; }
+                .operand-dropdown { position: absolute; top: 100%; left: 0; min-width: 140px; width: max-content; max-width: 280px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 2000; padding: 6px 0; margin-top: 4px; }
+                .operand-item { padding: 8px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
+                .operand-item:hover { background: #f0f7ff; }
+                .operand-item.active { background: #eff6ff; border-left: 3px solid #3b82f6; }
+                .op-symbol { width: 14px; font-weight: 800; color: #3b82f6; font-size: 15px; text-align: center; }
+                .op-label { font-size: 11px; color: #475569; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; }
+
+                .slick-premium-filter-container { display: flex; height: 32px; min-width: 0; max-width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; overflow: visible; transition: all 0.2s; position: relative; }
+                .slick-premium-filter-container:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
+                .slick-premium-filter-input { flex: 1; min-width: 0; border: none; outline: none; padding: 0; font-size: 12.5px; color: #334155; background: transparent; overflow: hidden; text-overflow: ellipsis; }
+                
+                .menu-header-sec { padding: 8px 18px 4px; font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
+                .menu-context-groups-list { max-height: 200px; overflow-y: auto; padding: 4px 0; }
+                .round-icon-bg.action-icon.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
+                .slick-header-th.dragging { opacity: 0.35; background: #e0f2fe !important; border: 2px dashed #0ea5e9; }
+                .slick-header-th .slick-header-label { user-select: none; pointer-events: auto !important; }
+                .slick-header-th .slick-header-actions, .slick-header-th .slick-header-dropdown-menu, .filter-wrapper { pointer-events: auto; }
+                /* Prevent child pointer interferences during reordering, but keep the TH accessible for dragover/drop */
+                .slick-header-row.dragging-active .slick-header-th:not(.dragging) * { pointer-events: none !important; }
+                .slick-grouping-zone-wrapper { transition: all 0.3s ease; overflow: hidden; position: relative; }
+                .slick-grouping-zone-wrapper.collapsed { height: 0; margin-top: 0; }
+                .slick-grouping-zone-wrapper.expanded { height: auto; min-height: 48px; }
+                .slick-grouping-zone-wrapper.floating { position: absolute; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 2px solid #3b82f6; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+                .slick-resizer { position: absolute; right: 0; top: 0; height: 100%; width: 5px; background: rgba(0,0,0,0.05); cursor: col-resize; z-index: 40; }
+                .slick-resizer:hover { background: #3b82f6; width: 3px; }
+                .slick-resizer:hover { background: #3b82f6; width: 6px; }
+                .muted-action { opacity: 0.4; pointer-events: none; }
+                .slick-edit-input { width: 100%; padding: 4px 10px; border: 1px solid #3b82f6; border-radius: 4px; outline: none; }
+                .menu-column-list-item-pro { padding: 8px 16px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; }
+                .column-checkbox-part { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; }
+                .col-label-text { font-size: 13.5px; font-weight: 600; color: #334155; }
+                .menu-divider { height: 1px; background: #f1f5f9; margin: 4px 0; }
+                /* Toolbar icons: ensure visible when consumed from NPM (override host app button/global styles) */
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-command-btn.circular,
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-icon-action { background-color: #eff6ff !important; color: #3b82f6 !important; border-color: #e2e8f0 !important; }
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-command-btn.circular:hover,
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-icon-action:hover:not(:disabled) { background-color: #dbeafe !important; color: #1d4ed8 !important; border-color: #3b82f6 !important; }
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-icon-action.filter-toggle { background-color: #eff6ff !important; color: #3b82f6 !important; }
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-icon-action.filter-toggle:not(.active):hover { background-color: #dbeafe !important; color: #1d4ed8 !important; }
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-icon-action.filter-toggle.active { background-color: #3b82f6 !important; color: #fff !important; border-color: #3b82f6 !important; }
+                /* Force toolbar icons to be visible (CSS span icons; override host app button styles) */
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-command-btn.circular .slick-icon-css,
+                .slick-enterprise-table[data-sab-grid] .slick-toolbar .slick-icon-action .slick-icon-css { color: inherit !important; }
+                
+                /* New Filter Styles */
+                .filter-clear-btn { cursor: pointer; color: #94a3b8; width: 24px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
+                .filter-clear-btn:hover { color: #ef4444; }
+                .slick-filter-dropdown-btn { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-size: 12.5px; color: #334155; cursor: pointer; }
+                .dropdown-text-container { min-width: 0; flex: 1; }
+                .dropdown-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
+                .dropdown-icons { display: flex; align-items: center; gap: 6px; color: #94a3b8; }
+                .mini-clear-btn { cursor: pointer; display: flex; align-items: center; }
+                .mini-clear-btn:hover { color: #ef4444; }
+                /* Filter panel: fixed default size so column width is not affected */
+                .slick-filter-row td { min-height: 40px; vertical-align: middle; }
+                .operand-dropdown.check-list { width: 220px; min-width: 220px; max-width: 220px; max-height: 260px; overflow-y: auto; }
+                
+                .checkbox-box { width: 16px; height: 16px; border: 1.5px solid #cbd5e1; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.2s; background: #fff; }
+                .checkbox-box.checked { background: #3b82f6; border-color: #3b82f6; }
+                
+                .radio-circle { width: 16px; height: 16px; border: 1.5px solid #cbd5e1; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; margin-right: 2px; }
+                .radio-circle .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.2s; }
+                .radio-circle.checked { border-color: #3b82f6; }
+                .radio-circle.checked .dot { background: #3b82f6; transform: scale(1); }
+                .operand-item.active .radio-circle { border-color: #3b82f6; }
+                .operand-item.active .radio-circle .dot { background: #3b82f6; transform: scale(1); }
+                .filter-popup-footer { padding: 8px 12px; border-top: 1px solid #f1f5f9; display: flex; justify-content: center; }
+                .filter-ok-btn { font-size: 13px; font-weight: 600; color: #fff; background: #0ea5e9; border: none; padding: 6px 20px; border-radius: 6px; cursor: pointer; transition: background 0.2s; }
+                .filter-ok-btn:hover { background: #0284c7; }
+            ` })] }));
+}
+//# sourceMappingURL=SabReactTable.js.map