@ackplus/react-tanstack-data-table 1.0.19-beta-0.6

package/lib/components/droupdown/menu-dropdown.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Popover } from '@mui/material';
+import { cloneElement, useCallback, useMemo, useState, } from 'react';
+export function MenuDropdown({ children, anchor, label, component, sx, ...props }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isOpen = useMemo(() => Boolean(anchorEl), [anchorEl]);
+    const handleClick = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = useCallback((event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        setAnchorEl(null);
+    }, []);
+    const anchorNode = useMemo(() => {
+        if (anchor) {
+            let node = anchor;
+            if (typeof anchor === 'function') {
+                node = anchor({ isOpen: isOpen });
+            }
+            return cloneElement(node, {
+                onClick: handleClick,
+            });
+        }
+        return _jsx(Button, { onClick: handleClick, children: label });
+    }, [
+        anchor,
+        handleClick,
+        isOpen,
+        label,
+    ]);
+    const DropDownComponent = (component || Popover);
+    return (_jsxs(_Fragment, { children: [anchorNode, _jsx(DropDownComponent, { anchorEl: anchorEl, open: isOpen, onClose: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, ...props, children: typeof children === 'function' ?
+                    children({
+                        handleClose,
+                        open: isOpen,
+                    }) :
+                    children })] }));
+}

package/lib/components/export-progress-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-progress-dialog.d.ts","sourceRoot":"","sources":["../../../src/lib/components/export-progress-dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAGxD,UAAU,yBAAyB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAChC;AAED,wBAAgB,oBAAoB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,UAAkB,GACrB,EAAE,yBAAyB,2CAkK3B"}

package/lib/components/export-progress-dialog.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, LinearProgress, Typography, Box, Chip, } from '@mui/material';
+export function ExportProgressDialog({ open, progress, result, onCancel, onClose, exportType = 'csv', }) {
+    const formatTime = (milliseconds) => {
+        if (milliseconds < 1000)
+            return `${milliseconds}ms`;
+        const seconds = Math.round(milliseconds / 1000);
+        if (seconds < 60)
+            return `${seconds}s`;
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = seconds % 60;
+        return `${minutes}m ${remainingSeconds}s`;
+    };
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = [
+            'Bytes',
+            'KB',
+            'MB',
+            'GB',
+        ];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+    const isCompleted = !!result;
+    const isExporting = !!progress && !isCompleted;
+    return (_jsxs(Dialog, { open: open, onClose: isExporting ? undefined : onClose, maxWidth: "sm", fullWidth: true, disableEscapeKeyDown: isExporting, children: [_jsx(DialogTitle, { children: isCompleted ? 'Export Completed' : `Exporting to ${exportType.toUpperCase()}` }), _jsxs(DialogContent, { children: [isExporting && progress ? (_jsxs(Box, { children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: ["Processing", ' ', progress.processedRows.toLocaleString(), ' ', "of", ' ', progress.totalRows.toLocaleString(), ' ', "rows"] }), _jsx(LinearProgress, { variant: "determinate", value: progress.percentage, sx: { mb: 2 } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsxs(Typography, { variant: "body2", children: [progress.percentage, "% Complete"] }), _jsx(Chip, { label: `Chunk ${progress.currentChunk} / ${progress.totalChunks}`, size: "small", variant: "outlined" })] }), progress.estimatedTimeRemaining !== undefined && (_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Estimated time remaining:", ' ', formatTime(progress.estimatedTimeRemaining)] }))] })) : null, isCompleted && result ? (_jsxs(Box, { children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: "Export completed successfully!" }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, mt: 2, children: [_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Filename:" }), ' ', result.filename] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Rows:" }), ' ', result.totalRows.toLocaleString()] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Columns:" }), ' ', result.totalColumns] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Processing time:" }), ' ', formatTime(result.processingTime)] }), result.fileSize ? (_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "File size:" }), ' ', formatFileSize(result.fileSize)] })) : null] })] })) : null] }), _jsxs(DialogActions, { children: [isExporting && onCancel ? (_jsx(Button, { onClick: onCancel, color: "secondary", children: "Cancel Export" })) : null, isCompleted && onClose ? (_jsx(Button, { onClick: onClose, color: "primary", variant: "contained", children: "Close" })) : null] })] }));
+}

package/lib/components/filters/filter-value-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-value-input.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/filters/filter-value-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAM/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD,UAAU,qBAAqB,CAAC,CAAC;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAChC,MAAM,EACN,MAAM,EACN,aAAa,GAChB,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAgK1B"}

package/lib/components/filters/filter-value-input.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, InputLabel, Select, MenuItem, TextField, Checkbox, ListItemText } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import moment from 'moment';
+import { getColumnOptions, getColumnType, getCustomFilterComponent } from '../../utils/column-helpers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+export function FilterValueInput({ filter, column, onValueChange, }) {
+    const columnType = getColumnType(column);
+    const customComponent = getCustomFilterComponent(column);
+    const options = getColumnOptions(column);
+    const operator = filter.operator;
+    // If custom component is provided, use it
+    if (customComponent) {
+        const CustomComponent = customComponent;
+        return (_jsx(CustomComponent, { value: filter.value, onChange: onValueChange, filter: filter, column: column }));
+    }
+    // Boolean type - Yes/No select
+    if (columnType === 'boolean') {
+        return (_jsxs(FormControl, { size: "small", sx: {
+                flex: 1,
+                minWidth: 120,
+            }, children: [_jsx(InputLabel, { children: "Value" }), _jsxs(Select, { value: filter.value || 'any', label: "Value", onChange: (e) => onValueChange(e.target.value), children: [_jsx(MenuItem, { value: 'any', children: "Any" }, 'any'), _jsx(MenuItem, { value: 'true', children: "True" }, 'true'), _jsx(MenuItem, { value: 'false', children: "False" }, 'false')] })] }));
+    }
+    // Select type with options
+    if (columnType === 'select' && options.length > 0) {
+        // Multi-select for 'in' and 'notIn' operators
+        if (operator === 'in' || operator === 'notIn') {
+            return (_jsxs(FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, children: [_jsx(InputLabel, { children: "Value" }), _jsx(Select, { multiple: true, value: Array.isArray(filter.value) ? filter.value : [], label: "Value", onChange: (e) => onValueChange(e.target.value), renderValue: (selected) => selected.map(val => {
+                            const opt = options.find(o => o.value === val);
+                            return opt ? opt.label : val;
+                        }).join(', '), children: options.map(option => (_jsxs(MenuItem, { value: option.value, children: [_jsx(Checkbox, { checked: Array.isArray(filter.value) && filter.value.indexOf(option.value) > -1 }), _jsx(ListItemText, { primary: option.label })] }, String(option.value)))) })] }));
+        }
+        // Single select for other operators
+        return (_jsxs(FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, children: [_jsx(InputLabel, { children: "Value" }), _jsx(Select, { value: filter.value, label: "Value", onChange: (e) => onValueChange(e.target.value), children: options.map(option => (_jsx(MenuItem, { value: option.value, children: option.label }, String(option.value)))) })] }));
+    }
+    // Date type
+    if (columnType === 'date') {
+        // Only single date picker, no 'between' support
+        return (_jsx(LocalizationProvider, { dateAdapter: AdapterMoment, children: _jsx(DatePicker, { value: filter.value ? moment(filter.value) : null, onChange: (e) => onValueChange(e?.toDate()), slotProps: {
+                    textField: {
+                        size: 'small',
+                        label: 'Value',
+                        sx: {
+                            flex: 1,
+                            minWidth: 120,
+                        },
+                    },
+                } }) }));
+    }
+    // Number type
+    if (columnType === 'number') {
+        // Only single number input, no 'between' support
+        return (_jsx(TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), type: "number", sx: {
+                flex: 1,
+                minWidth: 120,
+            } }));
+    }
+    // Default: text input
+    return (_jsx(TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), sx: {
+            flex: 1,
+            minWidth: 120,
+        } }));
+}

package/lib/components/filters/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/filters/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;CA2H5B,CAAC;AAEF,cAAc,sBAAsB,CAAC"}

package/lib/components/filters/index.js

@@ -0,0 +1,125 @@
+export const FILTER_OPERATORS = {
+    text: [
+        {
+            value: 'contains',
+            label: 'Contains',
+        },
+        {
+            value: 'startsWith',
+            label: 'Starts with',
+        },
+        {
+            value: 'endsWith',
+            label: 'Ends with',
+        },
+        {
+            value: 'equals',
+            label: 'Equals',
+        },
+        {
+            value: 'notEquals',
+            label: 'Not equals',
+        },
+        {
+            value: 'isEmpty',
+            label: 'Is empty',
+        },
+        {
+            value: 'isNotEmpty',
+            label: 'Is not empty',
+        },
+    ],
+    boolean: [
+        {
+            value: 'is',
+            label: 'Is',
+        },
+    ],
+    number: [
+        {
+            value: 'equals',
+            label: 'Equals',
+        },
+        {
+            value: 'notEquals',
+            label: 'Not equals',
+        },
+        {
+            value: 'greaterThan',
+            label: 'Greater than',
+        },
+        {
+            value: 'lessThan',
+            label: 'Less than',
+        },
+        {
+            value: 'greaterThanOrEqual',
+            label: 'Greater than or equal',
+        },
+        {
+            value: 'lessThanOrEqual',
+            label: 'Less than or equal',
+        },
+        {
+            value: 'isEmpty',
+            label: 'Is empty',
+        },
+        {
+            value: 'isNotEmpty',
+            label: 'Is not empty',
+        },
+    ],
+    date: [
+        {
+            value: 'equals',
+            label: 'Equals',
+        },
+        {
+            value: 'notEquals',
+            label: 'Not equals',
+        },
+        {
+            value: 'after',
+            label: 'After',
+        },
+        {
+            value: 'before',
+            label: 'Before',
+        },
+        {
+            value: 'isEmpty',
+            label: 'Is empty',
+        },
+        {
+            value: 'isNotEmpty',
+            label: 'Is not empty',
+        },
+    ],
+    select: [
+        {
+            value: 'equals',
+            label: 'Equals',
+        },
+        {
+            value: 'notEquals',
+            label: 'Not equals',
+        },
+        {
+            value: 'in',
+            label: 'In',
+        },
+        {
+            value: 'notIn',
+            label: 'Not in',
+        },
+        {
+            value: 'isEmpty',
+            label: 'Is empty',
+        },
+        {
+            value: 'isNotEmpty',
+            label: 'Is not empty',
+        },
+    ],
+};
+export * from './filter-value-input';

package/lib/components/headers/draggable-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-header.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/headers/draggable-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAc,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAwC,MAAM,OAAO,CAAC;AAK7D,UAAU,oBAAoB,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED,wBAAgB,eAAe,CAAC,CAAC,EAAE,EAC/B,MAAM,EACN,aAAoB,EACpB,SAAiB,EACjB,eAAe,EACf,KAAK,EACL,SAAS,GACZ,EAAE,oBAAoB,CAAC,CAAC,CAAC,mRA8QzB"}

package/lib/components/headers/draggable-header.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
+import { Box } from '@mui/material';
+import { flexRender } from '@tanstack/react-table';
+import { useState, useRef, useCallback } from 'react';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOver, setDragOver] = useState(false);
+    const autoScrollIntervalRef = useRef(null);
+    const dragStartPositionRef = useRef(null);
+    const headerElementRef = useRef(null);
+    const SortIconAscSlot = getSlotComponent(slots, 'sortIconAsc', ArrowUpwardOutlined);
+    const SortIconDescSlot = getSlotComponent(slots, 'sortIconDesc', ArrowDownwardOutlined);
+    // Auto-scroll configuration
+    const AUTO_SCROLL_THRESHOLD = 50; // Distance from edge to trigger scroll
+    const AUTO_SCROLL_SPEED = 10; // Pixels per scroll interval
+    const AUTO_SCROLL_INTERVAL = 16; // ~60fps
+    const findScrollableContainer = useCallback((element) => {
+        // Start from the provided element or try to find the current table
+        let searchElement = element;
+        if (!searchElement) {
+            // Start from the header element if available
+            if (headerElementRef.current) {
+                searchElement = headerElementRef.current.closest('table');
+            }
+        }
+        if (!searchElement) {
+            // Find the table that contains our header
+            const tables = Array.from(document.querySelectorAll('table'));
+            for (const table of tables) {
+                // Check if this table contains a header with our ID
+                const headerExists = table.querySelector('th'); // fallback
+                if (headerExists) {
+                    searchElement = table;
+                    break;
+                }
+            }
+        }
+        if (!searchElement) {
+            // Last resort: use the first table found
+            searchElement = document.querySelector('table');
+        }
+        if (!searchElement)
+            return null;
+        // Walk up the DOM tree to find the scrollable container
+        let container = searchElement;
+        while (container && container !== document.body) {
+            const styles = window.getComputedStyle(container);
+            if (styles.overflowX === 'auto' || styles.overflowX === 'scroll') {
+                return container;
+            }
+            container = container.parentElement;
+        }
+        return null;
+    }, []);
+    const startAutoScroll = useCallback((direction) => {
+        if (autoScrollIntervalRef.current) {
+            clearInterval(autoScrollIntervalRef.current);
+        }
+        const container = findScrollableContainer();
+        if (!container)
+            return;
+        autoScrollIntervalRef.current = setInterval(() => {
+            const scrollAmount = direction === 'left' ? -AUTO_SCROLL_SPEED : AUTO_SCROLL_SPEED;
+            const newScrollLeft = container.scrollLeft + scrollAmount;
+            // Check bounds
+            if (direction === 'left' && newScrollLeft <= 0) {
+                container.scrollLeft = 0;
+                clearInterval(autoScrollIntervalRef.current);
+                autoScrollIntervalRef.current = null;
+            }
+            else if (direction === 'right' && newScrollLeft >= container.scrollWidth - container.clientWidth) {
+                container.scrollLeft = container.scrollWidth - container.clientWidth;
+                clearInterval(autoScrollIntervalRef.current);
+                autoScrollIntervalRef.current = null;
+            }
+            else {
+                container.scrollLeft = newScrollLeft;
+            }
+        }, AUTO_SCROLL_INTERVAL);
+    }, [findScrollableContainer]);
+    const stopAutoScroll = useCallback(() => {
+        if (autoScrollIntervalRef.current) {
+            clearInterval(autoScrollIntervalRef.current);
+            autoScrollIntervalRef.current = null;
+        }
+    }, []);
+    const checkAutoScroll = useCallback((clientX) => {
+        const container = findScrollableContainer();
+        if (!container) {
+            return;
+        }
+        const rect = container.getBoundingClientRect();
+        const distanceFromLeft = clientX - rect.left;
+        const distanceFromRight = rect.right - clientX;
+        // Stop any existing auto-scroll
+        stopAutoScroll();
+        // Check if we should start auto-scrolling
+        if (distanceFromLeft < AUTO_SCROLL_THRESHOLD && container.scrollLeft > 0) {
+            // Near left edge and can scroll left
+            startAutoScroll('left');
+        }
+        else if (distanceFromRight < AUTO_SCROLL_THRESHOLD &&
+            container.scrollLeft < container.scrollWidth - container.clientWidth) {
+            // Near right edge and can scroll right
+            startAutoScroll('right');
+        }
+    }, [
+        findScrollableContainer,
+        startAutoScroll,
+        stopAutoScroll,
+    ]);
+    const handleDragStart = (e) => {
+        if (!draggable)
+            return;
+        setIsDragging(true);
+        dragStartPositionRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        e.dataTransfer.setData('text/plain', header.id);
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDrag = useCallback((e) => {
+        if (!isDragging || !draggable)
+            return;
+        // Only check for auto-scroll if we have valid coordinates
+        if (e.clientX > 0 && e.clientY > 0) {
+            checkAutoScroll(e.clientX);
+        }
+    }, [
+        isDragging,
+        draggable,
+        checkAutoScroll,
+    ]);
+    const getSortIcon = () => {
+        if (!enableSorting)
+            return null;
+        const sortDirection = header.column.getIsSorted();
+        // Only show icons when column is actually sorted
+        if (sortDirection === 'asc') {
+            return (_jsx(SortIconAscSlot, { fontSize: "small", ...slotProps?.sortIconAsc }));
+        }
+        if (sortDirection === 'desc') {
+            return (_jsx(SortIconDescSlot, { fontSize: "small", ...slotProps?.sortIconDesc }));
+        }
+        // Don't show any icon when not sorted
+        return null;
+    };
+    const handleDragEnd = () => {
+        setIsDragging(false);
+        setDragOver(false);
+        stopAutoScroll();
+        dragStartPositionRef.current = null;
+    };
+    const handleDragOver = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDragOver(true);
+        // Check for auto-scroll during drag over
+        checkAutoScroll(e.clientX);
+    };
+    const handleDragLeave = () => {
+        setDragOver(false);
+        // Don't stop auto-scroll on drag leave as the drag might continue outside this element
+    };
+    const handleDrop = (e) => {
+        if (!draggable)
+            return;
+        e.preventDefault();
+        const draggedColumnId = e.dataTransfer.getData('text/plain');
+        if (draggedColumnId !== header.id && onColumnReorder) {
+            onColumnReorder(draggedColumnId, header.id);
+        }
+        setDragOver(false);
+        stopAutoScroll();
+    };
+    const handleSort = () => {
+        if (!enableSorting || !header.column.getCanSort())
+            return;
+        const currentSort = header.column.getIsSorted();
+        if (currentSort === false) {
+            header.column.toggleSorting(false); // asc
+        }
+        else if (currentSort === 'asc') {
+            header.column.toggleSorting(true); // desc
+        }
+        else {
+            header.column.clearSorting(); // none
+        }
+    };
+    const getCursor = () => {
+        if (draggable)
+            return 'grab';
+        if (enableSorting && header.column.getCanSort())
+            return 'pointer';
+        return 'default';
+    };
+    if (!draggable && !enableSorting) {
+        return flexRender(header.column.columnDef.header, header.getContext());
+    }
+    return (_jsx(Box, { ref: headerElementRef, sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            cursor: getCursor(),
+            userSelect: 'none',
+            opacity: isDragging ? 0.5 : 1,
+            backgroundColor: dragOver ? 'rgba(25, 118, 210, 0.08)' : 'transparent',
+            borderLeft: dragOver ? '2px solid #1976d2' : 'none',
+            padding: dragOver ? '0 0 0 -2px' : '0',
+            width: '100%',
+            height: '100%',
+            '&:active': {
+                cursor: draggable ? 'grabbing' : 'pointer',
+            },
+        }, draggable: draggable, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: enableSorting ? handleSort : undefined, children: _jsxs(Box, { sx: {
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+            }, children: [flexRender(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
+}

package/lib/components/headers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/headers/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC"}

package/lib/components/headers/index.js

@@ -0,0 +1,5 @@
+/**
+ * Header components for DataTable
+ */
+export * from './table-header';
+export * from './draggable-header';

package/lib/components/headers/table-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/headers/table-header.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,gBAAgB;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC3B,SAAiB,EACjB,oBAA4B,EAC5B,kBAA0B,EAC1B,WAAkB,EAClB,eAAe,EACf,KAAK,EACL,SAAS,GACZ,EAAE,gBAAgB,2CAgFlB"}

package/lib/components/headers/table-header.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TableHeader Component
+ *
+ * Unified header component that combines:
+ * - Sortable functionality
+ * - Draggable column reordering
+ * - Column resizing
+ * - Pinning support
+ */
+import { TableHead, TableRow, TableCell, Box, useTheme } from '@mui/material';
+import { DraggableHeader } from './draggable-header';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getPinnedColumnStyle, getColumnAlignment } from '../../utils';
+import { getSlotComponent } from '../../utils/slot-helpers';
+/**
+ * Renders table headers with sorting, dragging, and resizing capabilities
+ */
+export function TableHeader({ draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, slots, slotProps, }) {
+    const theme = useTheme();
+    const { table } = useDataTableContext();
+    const HeaderCellSlot = getSlotComponent(slots, 'headerCell', TableCell);
+    const HeaderRowSlot = getSlotComponent(slots, 'headerRow', TableRow);
+    const HeaderSlot = getSlotComponent(slots, 'header', TableHead);
+    const renderHeaderCell = (header) => {
+        const isPinned = header.column.getIsPinned();
+        const pinnedPosition = isPinned ? header.column.getStart('left') : undefined;
+        const pinnedRightPosition = isPinned === 'right' ? header.column.getAfter('right') : undefined;
+        const alignment = getColumnAlignment(header.column.columnDef);
+        const enableSorting = header.column.getCanSort();
+        return (_jsxs(HeaderCellSlot, { align: alignment, sx: {
+                ...getPinnedColumnStyle({
+                    width: (fitToScreen && !enableColumnResizing) ? 'auto' : header.getSize(),
+                    isPinned,
+                    pinnedPosition,
+                    isLastLeftPinnedColumn: isPinned === 'left' && header.column.getIsLastColumn('left'),
+                    isFirstRightPinnedColumn: isPinned === 'right' && header.column.getIsFirstColumn('right'),
+                    pinnedRightPosition,
+                    zIndex: isPinned ? 10 : 1,
+                    disableStickyHeader: enableStickyHeader,
+                }),
+            }, ...slotProps?.headerCell, children: [_jsx(DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps }), enableColumnResizing && header.column.getCanResize() ? (_jsx(Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: {
+                        position: 'absolute',
+                        right: 0,
+                        top: '25%',
+                        height: '50%',
+                        width: '3px',
+                        cursor: 'col-resize',
+                        userSelect: 'none',
+                        touchAction: 'none',
+                        borderRadius: '4px',
+                        backgroundColor: header.column.getIsResizing() ? 'primary.main' : theme.palette.grey[300],
+                        '&:hover': {
+                            backgroundColor: theme.palette.primary.main,
+                        },
+                    } })) : null] }, header.id));
+    };
+    return (_jsx(HeaderSlot, { ...slotProps?.header, children: table.getHeaderGroups().map(headerGroup => (_jsx(HeaderRowSlot, { ...slotProps?.headerRow, children: headerGroup.headers.map(renderHeaderCell) }, headerGroup.id))) }));
+}

package/lib/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC;AAG1B,cAAc,QAAQ,CAAC;AAGvB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAI1B,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC"}

package/lib/components/index.js

@@ -0,0 +1,18 @@
+/**
+ * DataTable Components
+ *
+ * Organized component exports for the MUI TanStack DataTable
+ */
+// Main table components
+export * from './table';
+// Header components
+export * from './headers';
+// Row components
+export * from './rows';
+// Toolbar components
+export * from './toolbar';
+// Filter components
+export * from './filters';
+// Pagination components
+export * from './pagination';
+export * from './droupdown/menu-dropdown';

package/lib/components/pagination/data-table-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pagination/data-table-pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxC,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,cAAc,GAAG,qBAAqB,CAAC;IACnJ,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KACpB,CAAC;CACL;AAED,eAAO,MAAM,mBAAmB,yFAK7B,wBAAwB,6CAuCzB,CAAA"}

package/lib/components/pagination/data-table-pagination.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// data-table-pagination.tsx
+import { TablePagination, Box } from '@mui/material';
+import { memo } from 'react';
+import { useDataTableContext } from '../../contexts/data-table-context';
+export const DataTablePagination = memo(({ footerFilter = null, pagination, totalRow, ...props }) => {
+    const { table } = useDataTableContext();
+    // console.log('DataTablePagination', pagination);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            justifyContent: 'space-between',
+            px: 2,
+        }, children: [footerFilter, _jsx(TablePagination, { component: "div", count: totalRow, rowsPerPage: pagination?.pageSize, page: pagination?.pageIndex, onPageChange: (_, page) => {
+                    // Use TanStack Table's native pagination methods
+                    table.setPageIndex(page);
+                }, onRowsPerPageChange: e => {
+                    const newPageSize = Number(e.target.value);
+                    // Use TanStack Table's native pagination methods
+                    table.setPageIndex(0);
+                    table.setPageSize(newPageSize);
+                }, showFirstButton: true, showLastButton: true, labelRowsPerPage: "Rows per page:", labelDisplayedRows: ({ from, to, count }) => `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`, ...props })] }));
+});

package/lib/components/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pagination/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,yBAAyB,CAAC"}

package/lib/components/pagination/index.js

@@ -0,0 +1,4 @@
+/**
+ * Pagination components for DataTable
+ */
+export * from './data-table-pagination';

package/lib/components/rows/data-table-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-row.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/data-table-row.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAc,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAChC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IAChD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC5B,GAAG,EACH,WAAkB,EAClB,aAAqB,EACrB,KAAa,EACb,kBAAkB,EAClB,mBAA2B,EAC3B,KAAK,EACL,SAAS,GACZ,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA6DtB"}