@ackplus/react-tanstack-data-table 1.0.35 → 1.1.3

package/src/lib/components/droupdown/menu-dropdown.tsx

@@ -0,0 +1,97 @@
+import { Button, Menu, MenuProps, Popover } from '@mui/material';
+import React, {
+    cloneElement,
+    ReactElement,
+    ReactNode,
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
+
+
+type ChildrenEvent = {
+    handleClose: () => void;
+    open: boolean;
+};
+
+type AnchorEvent = {
+    isOpen: boolean;
+};
+
+export interface MenuDropdownProps
+    extends Omit<MenuProps, 'children' | 'open'> {
+    children?: ((event: ChildrenEvent) => ReactNode) | ReactNode | any;
+    anchor?: ((event: AnchorEvent) => ReactElement<any>) | ReactElement<any>;
+    label?: ReactNode;
+    component?: typeof Popover | typeof Menu;
+}
+
+export function MenuDropdown({
+    children,
+    anchor,
+    label,
+    component,
+    ...props
+}: MenuDropdownProps): ReactElement {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const isOpen = useMemo(() => Boolean(anchorEl), [anchorEl]);
+    const handleClick = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+            event.stopPropagation();
+            setAnchorEl(event.currentTarget);
+        },
+        [],
+    );
+    const handleClose = useCallback((event:any) => {
+        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 as ReactElement<any>, {
+                onClick: handleClick,
+            });
+        }
+        return <Button onClick={handleClick}>{label as any}</Button>;
+    }, [
+        anchor,
+        handleClick,
+        isOpen,
+        label,
+    ]);
+
+    const DropDownComponent = (component || Popover) as React.ComponentType<any>;
+
+    return (
+        <>
+            {anchorNode}
+            <DropDownComponent
+                anchorEl={anchorEl}
+                open={isOpen}
+                onClose={handleClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'left',
+                }}
+                {...props}
+            >
+                {typeof children === 'function' ?
+                    children({
+                        handleClose,
+                        open: isOpen,
+                    }) :
+                    children}
+            </DropDownComponent>
+        </>
+    );
+}

package/src/lib/components/filters/filter-value-input.tsx

@@ -0,0 +1,225 @@
+import React, { ReactElement } from 'react';
+import { FormControl, InputLabel, Select, MenuItem, TextField, Checkbox, ListItemText, Box, FormControlProps, TextFieldProps, SelectProps, SxProps } from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { Column } from '@tanstack/react-table';
+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';
+import { ColumnFilterRule } from '../../features';
+
+interface FilterValueInputProps<T> {
+    filter: ColumnFilterRule;
+    column: Column<T, any>;
+    onValueChange: (value: any) => void;
+    // Enhanced customization props
+    formControlProps?: FormControlProps;
+    textFieldProps?: TextFieldProps;
+    selectProps?: SelectProps;
+    datePickerProps?: any;
+    containerSx?: SxProps;
+    [key: string]: any;
+}
+
+export function FilterValueInput<T>(props: FilterValueInputProps<T>): ReactElement {
+    const {
+        filter,
+        column,
+        onValueChange,
+        formControlProps,
+        textFieldProps,
+        selectProps,
+        datePickerProps,
+        containerSx,
+        ...otherProps
+    } = props;
+
+    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 (
+            <Box sx={containerSx}>
+                <CustomComponent
+                    value={filter.value}
+                    onChange={onValueChange}
+                    filter={filter}
+                    column={column}
+                    {...otherProps}
+                />
+            </Box>
+        );
+    }
+
+    // Boolean type - Yes/No select
+    if (columnType === 'boolean') {
+        return (
+            <FormControl
+                size="small"
+                sx={{
+                    flex: 1,
+                    minWidth: 120,
+                    ...containerSx,
+                }}
+                {...formControlProps}
+            >
+                <InputLabel>Value</InputLabel>
+                <Select
+                    value={filter.value || 'any'}
+                    label="Value"
+                    onChange={(e) => onValueChange(e.target.value)}
+                    {...selectProps}
+                >
+                    <MenuItem
+                        key={'any'}
+                        value={'any'}
+                    >
+                        Any
+                    </MenuItem>
+                    <MenuItem
+                        key={'true'}
+                        value={'true'}
+                    >
+                        True
+                    </MenuItem>
+                    <MenuItem
+                        key={'false'}
+                        value={'false'}
+                    >
+                        False
+                    </MenuItem>
+                </Select>
+            </FormControl>
+        );
+    }
+
+    // Select type with options
+    if (options && options.length > 0) {
+        // Multi-select for 'in' operator
+        if (operator === 'in') {
+            const currentValue = Array.isArray(filter.value) ? filter.value : [];
+            
+            return (
+                <FormControl 
+                    size="small" 
+                    sx={{ 
+                        flex: 1, 
+                        minWidth: 120,
+                        ...containerSx,
+                    }}
+                    {...formControlProps}
+                >
+                    <InputLabel>Values</InputLabel>
+                    <Select
+                        multiple
+                        value={currentValue}
+                        label="Values"
+                        onChange={(e) => onValueChange(e.target.value)}
+                        renderValue={(selected) => (selected as string[]).join(', ')}
+                        {...selectProps}
+                    >
+                        {options.map(option => (
+                            <MenuItem key={String(option.value)} value={option.value}>
+                                <Checkbox checked={currentValue.includes(option.value)} />
+                                <ListItemText primary={option.label} />
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+            );
+        }
+        // Single select for other operators
+        return (
+            <FormControl 
+                size="small" 
+                sx={{ 
+                    flex: 1, 
+                    minWidth: 120,
+                    ...containerSx,
+                }}
+                {...formControlProps}
+            >
+                <InputLabel>Value</InputLabel>
+                <Select
+                    value={filter.value}
+                    label="Value"
+                    onChange={(e) => onValueChange(e.target.value)}
+                    {...selectProps}
+                >
+                    {options.map(option => (
+                        <MenuItem key={String(option.value)} value={option.value}>
+                            {option.label}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </FormControl>
+        );
+    }
+
+    // Date type
+    if (columnType === 'date') {
+        // Only single date picker, no 'between' support
+        return (
+            <LocalizationProvider dateAdapter={AdapterMoment}>
+                <DatePicker
+                    value={filter.value ? moment(filter.value) : null}
+                    onChange={(e) => onValueChange(e?.toDate())}
+                    slotProps={{
+                        textField: {
+                            size: 'small',
+                            label: 'Value',
+                            sx: {
+                                flex: 1,
+                                minWidth: 120,
+                                ...containerSx,
+                            },
+                            ...textFieldProps,
+                        },
+                    }}
+                    {...datePickerProps}
+                />
+            </LocalizationProvider>
+        );
+    }
+
+    // Number type
+    if (columnType === 'number') {
+        // Only single number input, no 'between' support
+        return (
+            <TextField
+                size="small"
+                label="Value"
+                value={filter.value}
+                onChange={(e) => onValueChange(e.target.value)}
+                type="number"
+                sx={{
+                    flex: 1,
+                    minWidth: 120,
+                    ...containerSx,
+                }}
+                {...textFieldProps}
+            />
+        );
+    }
+
+    // Default: text input
+    return (
+        <TextField
+            size="small"
+            label="Value"
+            value={filter.value}
+            onChange={(e) => onValueChange(e.target.value)}
+            sx={{
+                flex: 1,
+                minWidth: 120,
+                ...containerSx,
+            }}
+            {...textFieldProps}
+        />
+    );
+}

package/src/lib/components/filters/{index.js → index.ts}

@@ -1,8 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FILTER_OPERATORS = void 0;
-const tslib_1 = require("tslib");
-exports.FILTER_OPERATORS = {
+export const FILTER_OPERATORS = {
     text: [
         {
             value: 'contains',
@@ -126,4 +122,5 @@ exports.FILTER_OPERATORS = {
         },
     ],
 };
-tslib_1.__exportStar(require("./filter-value-input"), exports);
+
+export * from './filter-value-input';

package/src/lib/components/headers/draggable-header.tsx

@@ -0,0 +1,326 @@
+import { ArrowUpwardOutlined, ArrowDownwardOutlined } from '@mui/icons-material';
+import { Box, SxProps } from '@mui/material';
+import { Header, flexRender } from '@tanstack/react-table';
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
+
+interface DraggableHeaderProps<T> {
+    header: Header<T, unknown>;
+    enableSorting?: boolean;
+    draggable?: boolean;
+    onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
+    // Enhanced customization props
+    containerSx?: SxProps;
+    sortIconProps?: any;
+    alignment?: 'left' | 'center' | 'right';
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    [key: string]: any;
+}
+
+export function DraggableHeader<T>(props: DraggableHeaderProps<T>) {
+    const {
+        header,
+        enableSorting = true,
+        draggable = false,
+        onColumnReorder,
+        containerSx,
+        sortIconProps,
+        alignment,
+        slots,
+        slotProps,
+        ...otherProps
+    } = props;
+
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOver, setDragOver] = useState(false);
+    const autoScrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+    const dragStartPositionRef = useRef<{ x: number; y: number } | null>(null);
+    const headerElementRef = useRef<HTMLDivElement>(null);
+
+    // Extract slot-specific props with enhanced merging
+    const sortIconAscSlotProps = extractSlotProps(slotProps, 'sortIconAsc');
+    const sortIconDescSlotProps = extractSlotProps(slotProps, 'sortIconDesc');
+
+    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 justifyContent = useMemo(() => {
+        return alignment === 'left' ? 'flex-start' : alignment === 'right' ? 'flex-end' : 'center';
+    }, [alignment]);
+
+    const findScrollableContainer = useCallback((element?: HTMLElement): HTMLElement | null => {
+        // 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') as HTMLElement;
+            }
+        }
+
+        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') as HTMLElement;
+        }
+
+        if (!searchElement) return null;
+
+        // Walk up the DOM tree to find the scrollable container
+        let container: HTMLElement | null = 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: 'left' | 'right') => {
+        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: number) => {
+        const container = findScrollableContainer();
+        if (!container) return;
+
+        const containerRect = container.getBoundingClientRect();
+        const leftEdge = containerRect.left + AUTO_SCROLL_THRESHOLD;
+        const rightEdge = containerRect.right - AUTO_SCROLL_THRESHOLD;
+
+        if (clientX < leftEdge) {
+            startAutoScroll('left');
+        } else if (clientX > rightEdge) {
+            startAutoScroll('right');
+        } else {
+            stopAutoScroll();
+        }
+    }, [findScrollableContainer, startAutoScroll, stopAutoScroll]);
+
+    const handleDragStart = (e: React.DragEvent) => {
+        if (!draggable) return;
+
+        e.dataTransfer.setData('text/plain', header.id);
+        e.dataTransfer.effectAllowed = 'move';
+        setIsDragging(true);
+        dragStartPositionRef.current = { x: e.clientX, y: e.clientY };
+    };
+
+    const handleDrag = (e: React.DragEvent) => {
+        if (!draggable || !dragStartPositionRef.current) return;
+        checkAutoScroll(e.clientX);
+    };
+
+    const getSortIcon = () => {
+        if (!enableSorting) return null;
+        const sortDirection = header.column.getIsSorted();
+
+        const mergedSortIconProps = mergeSlotProps(
+            {
+                fontSize: 'small',
+            },
+            sortIconProps || {}
+        );
+
+        // Only show icons when column is actually sorted
+        if (sortDirection === 'asc') {
+            return (
+                <SortIconAscSlot
+                    {...mergeSlotProps(
+                        mergedSortIconProps,
+                        sortIconAscSlotProps
+                    )}
+                />
+            );
+        } if (sortDirection === 'desc') {
+            return (
+                <SortIconDescSlot
+                    {...mergeSlotProps(
+                        mergedSortIconProps,
+                        sortIconDescSlotProps
+                    )}
+                />
+            );
+        }
+        // Don't show any icon when not sorted
+        return null;
+    };
+
+    const handleDragEnd = () => {
+        setIsDragging(false);
+        setDragOver(false);
+        stopAutoScroll();
+        dragStartPositionRef.current = null;
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+        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: React.DragEvent) => {
+        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';
+    };
+
+    // Merge all props for maximum flexibility
+    const mergedContainerProps = mergeSlotProps(
+        {
+            ref: headerElementRef,
+            sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: justifyContent,
+                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%',
+                minWidth: '0',
+                '&:active': {
+                    cursor: draggable ? 'grabbing' : 'pointer',
+                },
+                '.header-content': {
+                    display: 'block',
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                },
+                ...containerSx,
+            },
+            draggable: draggable,
+            onDragStart: handleDragStart,
+            onDrag: handleDrag,
+            onDragEnd: handleDragEnd,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            onClick: enableSorting ? handleSort : undefined,
+        },
+        otherProps
+    );
+
+    if (!draggable && !enableSorting) {
+        return flexRender(header.column.columnDef.header, header.getContext());
+    }
+
+    return (
+        <Box
+            {...mergedContainerProps}
+        >
+            <Box
+                component="span"
+                className='header-wrapper'
+                sx={{
+                    display: 'inline-flex',
+                    gap: 1,
+                }}
+            >
+                <Box component="span" className='header-content'>
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                </Box>
+                {getSortIcon()}
+            </Box>
+        </Box>
+    );
+}
+
+// Memoize component to prevent unnecessary re-renders
+export const DraggableHeaderMemo = React.memo(DraggableHeader) as typeof DraggableHeader;

package/src/lib/components/headers/{index.d.ts → index.ts}

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