@ackplus/react-tanstack-data-table 1.0.19-beta-0.7 → 1.0.19-beta-0.8

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuDropdown = MenuDropdown;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+function MenuDropdown(_a) {
+    var { children, anchor, label, component, sx } = _a, props = tslib_1.__rest(_a, ["children", "anchor", "label", "component", "sx"]);
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const isOpen = (0, react_1.useMemo)(() => Boolean(anchorEl), [anchorEl]);
+    const handleClick = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = (0, react_1.useCallback)((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setAnchorEl(null);
+    }, []);
+    const anchorNode = (0, react_1.useMemo)(() => {
+        if (anchor) {
+            let node = anchor;
+            if (typeof anchor === 'function') {
+                node = anchor({ isOpen: isOpen });
+            }
+            return (0, react_1.cloneElement)(node, {
+                onClick: handleClick,
+            });
+        }
+        return (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClick, children: label });
+    }, [
+        anchor,
+        handleClick,
+        isOpen,
+        label,
+    ]);
+    const DropDownComponent = (component || material_1.Popover);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [anchorNode, (0, jsx_runtime_1.jsx)(DropDownComponent, Object.assign({ 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/src/lib/components/filters/filter-value-input.d.ts

@@ -0,0 +1,9 @@
+import { Column } from '@tanstack/react-table';
+import { ColumnFilterRule } from '../../features';
+interface FilterValueInputProps<T> {
+    filter: ColumnFilterRule;
+    column: Column<T, any>;
+    onValueChange: (value: any) => void;
+}
+export declare function FilterValueInput<T>({ filter, column, onValueChange, }: FilterValueInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterValueInput = FilterValueInput;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const DatePicker_1 = require("@mui/x-date-pickers/DatePicker");
+const moment_1 = tslib_1.__importDefault(require("moment"));
+const column_helpers_1 = require("../../utils/column-helpers");
+const AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+function FilterValueInput({ filter, column, onValueChange, }) {
+    const columnType = (0, column_helpers_1.getColumnType)(column);
+    const customComponent = (0, column_helpers_1.getCustomFilterComponent)(column);
+    const options = (0, column_helpers_1.getColumnOptions)(column);
+    const operator = filter.operator;
+    if (customComponent) {
+        const CustomComponent = customComponent;
+        return ((0, jsx_runtime_1.jsx)(CustomComponent, { value: filter.value, onChange: onValueChange, filter: filter, column: column }));
+    }
+    if (columnType === 'boolean') {
+        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: {
+                flex: 1,
+                minWidth: 120,
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: filter.value || 'any', label: "Value", onChange: (e) => onValueChange(e.target.value), children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'any', children: "Any" }, 'any'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'true', children: "True" }, 'true'), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: 'false', children: "False" }, 'false')] })] }));
+    }
+    if (columnType === 'select' && options.length > 0) {
+        if (operator === 'in' || operator === 'notIn') {
+            return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.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 => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: option.value, children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: Array.isArray(filter.value) && filter.value.indexOf(option.value) > -1 }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label })] }, String(option.value)))) })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { flex: 1, minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Value" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.value, label: "Value", onChange: (e) => onValueChange(e.target.value), children: options.map(option => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, children: option.label }, String(option.value)))) })] }));
+    }
+    if (columnType === 'date') {
+        return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment, children: (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { value: filter.value ? (0, moment_1.default)(filter.value) : null, onChange: (e) => onValueChange(e === null || e === void 0 ? void 0 : e.toDate()), slotProps: {
+                    textField: {
+                        size: 'small',
+                        label: 'Value',
+                        sx: {
+                            flex: 1,
+                            minWidth: 120,
+                        },
+                    },
+                } }) }));
+    }
+    if (columnType === 'number') {
+        return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), type: "number", sx: {
+                flex: 1,
+                minWidth: 120,
+            } }));
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", label: "Value", value: filter.value, onChange: (e) => onValueChange(e.target.value), sx: {
+            flex: 1,
+            minWidth: 120,
+        } }));
+}

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

@@ -0,0 +1,23 @@
+export declare const FILTER_OPERATORS: {
+    text: {
+        value: string;
+        label: string;
+    }[];
+    boolean: {
+        value: string;
+        label: string;
+    }[];
+    number: {
+        value: string;
+        label: string;
+    }[];
+    date: {
+        value: string;
+        label: string;
+    }[];
+    select: {
+        value: string;
+        label: string;
+    }[];
+};
+export * from './filter-value-input';

package/src/lib/components/filters/index.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FILTER_OPERATORS = void 0;
+const tslib_1 = require("tslib");
+exports.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',
+        },
+    ],
+};
+tslib_1.__exportStar(require("./filter-value-input"), exports);

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

@@ -0,0 +1,12 @@
+import { Header } from '@tanstack/react-table';
+import React from 'react';
+interface DraggableHeaderProps<T> {
+    header: Header<T, unknown>;
+    enableSorting?: boolean;
+    draggable?: boolean;
+    onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+}
+export declare function DraggableHeader<T>({ header, enableSorting, draggable, onColumnReorder, slots, slotProps, }: DraggableHeaderProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableHeader = DraggableHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = require("react");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, }) {
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [dragOver, setDragOver] = (0, react_1.useState)(false);
+    const autoScrollIntervalRef = (0, react_1.useRef)(null);
+    const dragStartPositionRef = (0, react_1.useRef)(null);
+    const headerElementRef = (0, react_1.useRef)(null);
+    const SortIconAscSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'sortIconAsc', icons_material_1.ArrowUpwardOutlined);
+    const SortIconDescSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'sortIconDesc', icons_material_1.ArrowDownwardOutlined);
+    const AUTO_SCROLL_THRESHOLD = 50;
+    const AUTO_SCROLL_SPEED = 10;
+    const AUTO_SCROLL_INTERVAL = 16;
+    const findScrollableContainer = (0, react_1.useCallback)((element) => {
+        let searchElement = element;
+        if (!searchElement) {
+            if (headerElementRef.current) {
+                searchElement = headerElementRef.current.closest('table');
+            }
+        }
+        if (!searchElement) {
+            const tables = Array.from(document.querySelectorAll('table'));
+            for (const table of tables) {
+                const headerExists = table.querySelector('th');
+                if (headerExists) {
+                    searchElement = table;
+                    break;
+                }
+            }
+        }
+        if (!searchElement) {
+            searchElement = document.querySelector('table');
+        }
+        if (!searchElement)
+            return null;
+        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 = (0, react_1.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;
+            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 = (0, react_1.useCallback)(() => {
+        if (autoScrollIntervalRef.current) {
+            clearInterval(autoScrollIntervalRef.current);
+            autoScrollIntervalRef.current = null;
+        }
+    }, []);
+    const checkAutoScroll = (0, react_1.useCallback)((clientX) => {
+        const container = findScrollableContainer();
+        if (!container) {
+            return;
+        }
+        const rect = container.getBoundingClientRect();
+        const distanceFromLeft = clientX - rect.left;
+        const distanceFromRight = rect.right - clientX;
+        stopAutoScroll();
+        if (distanceFromLeft < AUTO_SCROLL_THRESHOLD && container.scrollLeft > 0) {
+            startAutoScroll('left');
+        }
+        else if (distanceFromRight < AUTO_SCROLL_THRESHOLD &&
+            container.scrollLeft < container.scrollWidth - container.clientWidth) {
+            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 = (0, react_1.useCallback)((e) => {
+        if (!isDragging || !draggable)
+            return;
+        if (e.clientX > 0 && e.clientY > 0) {
+            checkAutoScroll(e.clientX);
+        }
+    }, [
+        isDragging,
+        draggable,
+        checkAutoScroll,
+    ]);
+    const getSortIcon = () => {
+        if (!enableSorting)
+            return null;
+        const sortDirection = header.column.getIsSorted();
+        if (sortDirection === 'asc') {
+            return ((0, jsx_runtime_1.jsx)(SortIconAscSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconAsc)));
+        }
+        if (sortDirection === 'desc') {
+            return ((0, jsx_runtime_1.jsx)(SortIconDescSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconDesc)));
+        }
+        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);
+        checkAutoScroll(e.clientX);
+    };
+    const handleDragLeave = () => {
+        setDragOver(false);
+    };
+    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);
+        }
+        else if (currentSort === 'asc') {
+            header.column.toggleSorting(true);
+        }
+        else {
+            header.column.clearSorting();
+        }
+    };
+    const getCursor = () => {
+        if (draggable)
+            return 'grab';
+        if (enableSorting && header.column.getCanSort())
+            return 'pointer';
+        return 'default';
+    };
+    if (!draggable && !enableSorting) {
+        return (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext());
+    }
+    return ((0, jsx_runtime_1.jsx)(material_1.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: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 1,
+            }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
+}

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

@@ -0,0 +1,2 @@
+export * from './table-header';
+export * from './draggable-header';

package/src/lib/components/headers/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./table-header"), exports);
+tslib_1.__exportStar(require("./draggable-header"), exports);

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

@@ -0,0 +1,10 @@
+export interface TableHeaderProps {
+    draggable?: boolean;
+    enableColumnResizing?: boolean;
+    enableStickyHeader?: boolean;
+    fitToScreen?: boolean;
+    onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+}
+export declare function TableHeader<T>({ draggable, enableColumnResizing, enableStickyHeader, fitToScreen, onColumnReorder, slots, slotProps, }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeader = TableHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const draggable_header_1 = require("./draggable-header");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const utils_1 = require("../../utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function TableHeader({ draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, slots, slotProps, }) {
+    const theme = (0, material_1.useTheme)();
+    const { table } = (0, data_table_context_1.useDataTableContext)();
+    const HeaderCellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'headerCell', material_1.TableCell);
+    const HeaderRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'headerRow', material_1.TableRow);
+    const HeaderSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'header', material_1.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 = (0, utils_1.getColumnAlignment)(header.column.columnDef);
+        const enableSorting = header.column.getCanSort();
+        return ((0, jsx_runtime_1.jsxs)(HeaderCellSlot, Object.assign({ align: alignment, sx: Object.assign({}, (0, utils_1.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 === null || slotProps === void 0 ? void 0 : slotProps.headerCell, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.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 ((0, jsx_runtime_1.jsx)(HeaderSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { children: table.getHeaderGroups().map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerRow, { children: headerGroup.headers.map(renderHeaderCell) }), headerGroup.id))) })));
+}

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

@@ -0,0 +1,7 @@
+export * from './table';
+export * from './headers';
+export * from './rows';
+export * from './toolbar';
+export * from './filters';
+export * from './pagination';
+export * from './droupdown/menu-dropdown';

package/src/lib/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./table"), exports);
+tslib_1.__exportStar(require("./headers"), exports);
+tslib_1.__exportStar(require("./rows"), exports);
+tslib_1.__exportStar(require("./toolbar"), exports);
+tslib_1.__exportStar(require("./filters"), exports);
+tslib_1.__exportStar(require("./pagination"), exports);
+tslib_1.__exportStar(require("./droupdown/menu-dropdown"), exports);

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

@@ -0,0 +1,11 @@
+import { TablePaginationProps } from '@mui/material';
+import { ReactNode } from 'react';
+export interface DataTablePaginationProps extends Omit<TablePaginationProps, 'count' | 'rowsPerPage' | 'page' | 'onPageChange' | 'onRowsPerPageChange'> {
+    totalRow: number;
+    footerFilter?: ReactNode | null;
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+    };
+}
+export declare const DataTablePagination: import("react").MemoExoticComponent<({ footerFilter, pagination, totalRow, ...props }: DataTablePaginationProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTablePagination = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const data_table_context_1 = require("../../contexts/data-table-context");
+exports.DataTablePagination = (0, react_1.memo)((_a) => {
+    var { footerFilter = null, pagination, totalRow } = _a, props = tslib_1.__rest(_a, ["footerFilter", "pagination", "totalRow"]);
+    const { table } = (0, data_table_context_1.useDataTableContext)();
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            justifyContent: 'space-between',
+            px: 2,
+        }, children: [footerFilter, (0, jsx_runtime_1.jsx)(material_1.TablePagination, Object.assign({ component: "div", count: totalRow, rowsPerPage: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize, page: pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex, onPageChange: (_, page) => {
+                    table.setPageIndex(page);
+                }, onRowsPerPageChange: e => {
+                    const newPageSize = Number(e.target.value);
+                    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/src/lib/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './data-table-pagination';

package/src/lib/components/pagination/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./data-table-pagination"), exports);

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

@@ -0,0 +1,13 @@
+import { Row } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+export interface DataTableRowProps<T> {
+    row: Row<T>;
+    enableHover?: boolean;
+    enableStripes?: boolean;
+    isOdd?: boolean;
+    renderSubComponent?: (row: Row<T>) => ReactNode;
+    disableStickyHeader?: boolean;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+}
+export declare function DataTableRow<T>({ row, enableHover, enableStripes, isOdd, renderSubComponent, disableStickyHeader, slots, slotProps, }: DataTableRowProps<T>): import("react/jsx-runtime").JSX.Element;