@ackplus/react-tanstack-data-table 1.0.34 → 1.1.1

package/{src → dist}/lib/components/headers/draggable-header.js

@@ -1,42 +1,80 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DraggableHeaderMemo = void 0;
 exports.DraggableHeader = DraggableHeader;
-const tslib_1 = require("tslib");
 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 = tslib_1.__importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const slot_helpers_1 = require("../../utils/slot-helpers");
 function DraggableHeader(props) {
-    const { header, enableSorting = true, draggable = false, onColumnReorder, containerSx, sortIconProps, alignment, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["header", "enableSorting", "draggable", "onColumnReorder", "containerSx", "sortIconProps", "alignment", "slots", "slotProps"]);
+    const { header, enableSorting = true, draggable = false, onColumnReorder, containerSx, sortIconProps, alignment, slots, slotProps, ...otherProps } = props;
     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);
+    // Extract slot-specific props with enhanced merging
     const sortIconAscSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'sortIconAsc');
     const sortIconDescSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'sortIconDesc');
     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;
+    // 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 = (0, react_1.useMemo)(() => {
         return alignment === 'left' ? 'flex-start' : alignment === 'right' ? 'flex-end' : 'center';
     }, [alignment]);
     const findScrollableContainer = (0, react_1.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) {
-                const headerExists = table.querySelector('th');
+                // Check if this table contains a header with our ID
+                const headerExists = table.querySelector('th'); // fallback
                 if (headerExists) {
                     searchElement = table;
                     break;
@@ -44,10 +82,12 @@ function DraggableHeader(props) {
             }
         }
         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);
@@ -68,6 +108,7 @@ function DraggableHeader(props) {
         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);
@@ -126,12 +167,14 @@ function DraggableHeader(props) {
         const mergedSortIconProps = (0, slot_helpers_1.mergeSlotProps)({
             fontSize: 'small',
         }, sortIconProps || {});
+        // Only show icons when column is actually sorted
         if (sortDirection === 'asc') {
-            return ((0, jsx_runtime_1.jsx)(SortIconAscSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)(mergedSortIconProps, sortIconAscSlotProps))));
+            return ((0, jsx_runtime_1.jsx)(SortIconAscSlot, { ...(0, slot_helpers_1.mergeSlotProps)(mergedSortIconProps, sortIconAscSlotProps) }));
         }
         if (sortDirection === 'desc') {
-            return ((0, jsx_runtime_1.jsx)(SortIconDescSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)(mergedSortIconProps, sortIconDescSlotProps))));
+            return ((0, jsx_runtime_1.jsx)(SortIconDescSlot, { ...(0, slot_helpers_1.mergeSlotProps)(mergedSortIconProps, sortIconDescSlotProps) }));
         }
+        // Don't show any icon when not sorted
         return null;
     };
     const handleDragEnd = () => {
@@ -146,10 +189,12 @@ function DraggableHeader(props) {
         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)
@@ -167,13 +212,13 @@ function DraggableHeader(props) {
             return;
         const currentSort = header.column.getIsSorted();
         if (currentSort === false) {
-            header.column.toggleSorting(false);
+            header.column.toggleSorting(false); // asc
         }
         else if (currentSort === 'asc') {
-            header.column.toggleSorting(true);
+            header.column.toggleSorting(true); // desc
         }
         else {
-            header.column.clearSorting();
+            header.column.clearSorting(); // none
         }
     };
     const getCursor = () => {
@@ -183,18 +228,36 @@ function DraggableHeader(props) {
             return 'pointer';
         return 'default';
     };
+    // Merge all props for maximum flexibility
     const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
         ref: headerElementRef,
-        sx: Object.assign({ 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': {
+        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': {
+            },
+            '.header-content': {
                 display: 'block',
                 flex: 1,
                 minWidth: 0,
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
                 textOverflow: 'ellipsis',
-            } }, containerSx),
+            },
+            ...containerSx,
+        },
         draggable: draggable,
         onDragStart: handleDragStart,
         onDrag: handleDrag,
@@ -207,9 +270,10 @@ function DraggableHeader(props) {
     if (!draggable && !enableSorting) {
         return (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext());
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, mergedContainerProps, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", className: 'header-wrapper', sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ...mergedContainerProps, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", className: 'header-wrapper', sx: {
                 display: 'inline-flex',
                 gap: 1,
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", className: 'header-content', children: (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) }), getSortIcon()] }) })));
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", className: 'header-content', children: (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) }), getSortIcon()] }) }));
 }
+// Memoize component to prevent unnecessary re-renders
 exports.DraggableHeaderMemo = react_1.default.memo(DraggableHeader);

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

@@ -0,0 +1,6 @@
+/**
+ * Header components for DataTable
+ */
+export * from './table-header';
+export * from './draggable-header';
+//# sourceMappingURL=index.d.ts.map

package/dist/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/dist/lib/components/headers/index.js

@@ -0,0 +1,21 @@
+"use strict";
+/**
+ * Header components for DataTable
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./table-header"), exports);
+__exportStar(require("./draggable-header"), exports);

package/{src → dist}/lib/components/headers/table-header.d.ts

@@ -1,3 +1,13 @@
+/**
+ * TableHeader Component
+ *
+ * Unified header component that combines:
+ * - Sortable functionality
+ * - Draggable column reordering
+ * - Column resizing
+ * - Pinning support
+ */
+import { ReactElement } from 'react';
 import { TableHeadProps, TableRowProps, TableCellProps, SxProps } from '@mui/material';
 export interface TableHeaderProps extends TableHeadProps {
     draggable?: boolean;
@@ -13,4 +23,8 @@ export interface TableHeaderProps extends TableHeadProps {
     slotProps?: Record<string, any>;
     [key: string]: any;
 }
-export declare function TableHeader<T>(props: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders table headers with sorting, dragging, and resizing capabilities
+ */
+export declare function TableHeader<T>(props: TableHeaderProps): ReactElement;
+//# sourceMappingURL=table-header.d.ts.map

package/dist/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":"AAAA;;;;;;;;GAQG;AACH,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAiD,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQtI,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACpD,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;IAE5E,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAuIpE"}

package/{src → dist}/lib/components/headers/table-header.js

@@ -1,23 +1,40 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableHeader = TableHeader;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * TableHeader Component
+ *
+ * Unified header component that combines:
+ * - Sortable functionality
+ * - Draggable column reordering
+ * - Column resizing
+ * - Pinning support
+ */
+const react_1 = __importDefault(require("react"));
 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");
+/**
+ * Renders table headers with sorting, dragging, and resizing capabilities
+ */
 function TableHeader(props) {
-    const { draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, headerRowProps, headerCellProps, containerSx, resizeHandleSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["draggable", "enableColumnResizing", "enableStickyHeader", "fitToScreen", "onColumnReorder", "headerRowProps", "headerCellProps", "containerSx", "resizeHandleSx", "slots", "slotProps"]);
+    const { draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, headerRowProps, headerCellProps, containerSx, resizeHandleSx, slots, slotProps, ...otherProps } = props;
     const theme = (0, material_1.useTheme)();
     const { table } = (0, data_table_context_1.useDataTableContext)();
+    // Extract slot-specific props with enhanced merging
     const headerCellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'headerCell');
     const headerRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'headerRow');
     const headerSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'header');
     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);
+    // Merge all props for maximum flexibility
     const mergedHeaderProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: containerSx,
     }, headerSlotProps, otherProps);
@@ -30,28 +47,44 @@ function TableHeader(props) {
         const alignment = (0, utils_1.getColumnAlignment)(header.column.columnDef);
         const enableSorting = header.column.getCanSort();
         const wrapText = (_a = header.column.columnDef.wrapText) !== null && _a !== void 0 ? _a : false;
+        const canResize = enableColumnResizing && header.column.getCanResize();
         const mergedHeaderCellProps = (0, slot_helpers_1.mergeSlotProps)({
             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,
-                wrapText,
-            })),
+            sx: {
+                ...(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,
+                    wrapText,
+                }),
+            },
         }, headerCellSlotProps, headerCellProps || {});
         const mergedResizeHandleProps = (0, slot_helpers_1.mergeSlotProps)({
             onMouseDown: header.getResizeHandler(),
             onTouchStart: header.getResizeHandler(),
-            sx: Object.assign({ 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': {
+            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,
-                } }, resizeHandleSx),
+                },
+                ...resizeHandleSx,
+            },
         });
-        return ((0, jsx_runtime_1.jsxs)(HeaderCellSlot, Object.assign({}, mergedHeaderCellProps, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps, alignment: alignment }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, mergedResizeHandleProps))) : null] }), header.id));
+        return ((0, jsx_runtime_1.jsxs)(HeaderCellSlot, { ...mergedHeaderCellProps, children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps, alignment: alignment }), canResize ? ((0, jsx_runtime_1.jsx)(material_1.Box, { ...mergedResizeHandleProps })) : null] }, header.id));
     };
-    return ((0, jsx_runtime_1.jsx)(HeaderSlot, Object.assign({}, mergedHeaderProps, { children: table.getHeaderGroups().map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, Object.assign({}, mergedHeaderRowProps, { children: headerGroup.headers.map(renderHeaderCell) }), headerGroup.id))) })));
+    return ((0, jsx_runtime_1.jsx)(HeaderSlot, { ...mergedHeaderProps, children: table.getHeaderGroups().map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, { ...mergedHeaderRowProps, children: headerGroup.headers.map(renderHeaderCell) }, headerGroup.id))) }));
 }

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

@@ -1,7 +1,12 @@
-export * from './table';
+/**
+ * DataTable Components
+ *
+ * Organized component exports for the MUI TanStack DataTable
+ */
 export * from './headers';
 export * from './rows';
 export * from './toolbar';
 export * from './filters';
 export * from './pagination';
 export * from './droupdown/menu-dropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/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;AAEH,cAAc,WAAW,CAAC;AAG1B,cAAc,QAAQ,CAAC;AAGvB,cAAc,WAAW,CAAC;AAG1B,cAAc,WAAW,CAAC;AAI1B,cAAc,cAAc,CAAC;AAC7B,cAAc,2BAA2B,CAAC"}

package/dist/lib/components/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * DataTable Components
+ *
+ * Organized component exports for the MUI TanStack DataTable
+ */
+// Header components
+__exportStar(require("./headers"), exports);
+// Row components
+__exportStar(require("./rows"), exports);
+// Toolbar components
+__exportStar(require("./toolbar"), exports);
+// Filter components
+__exportStar(require("./filters"), exports);
+// Pagination components
+__exportStar(require("./pagination"), exports);
+__exportStar(require("./droupdown/menu-dropdown"), exports);

package/{src → dist}/lib/components/pagination/data-table-pagination.d.ts

@@ -14,4 +14,5 @@ export interface DataTablePaginationProps extends Omit<TablePaginationProps, 'co
     slotProps?: Record<string, any>;
     [key: string]: any;
 }
-export declare const DataTablePagination: import("react").MemoExoticComponent<(props: DataTablePaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DataTablePagination: any;
+//# sourceMappingURL=data-table-pagination.d.ts.map

package/dist/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,OAAO,EAAE,MAAM,eAAe,CAAC;AACpF,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;IAEF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,KAyE9B,CAAC"}

package/{src → dist}/lib/components/pagination/data-table-pagination.js

@@ -1,28 +1,41 @@
 "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");
+// data-table-pagination.tsx
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 exports.DataTablePagination = (0, react_1.memo)((props) => {
-    const { footerFilter = null, pagination, totalRow, containerSx, paginationProps, footerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["footerFilter", "pagination", "totalRow", "containerSx", "paginationProps", "footerSx", "slots", "slotProps"]);
-    const { table } = (0, data_table_context_1.useDataTableContext)();
+    const { footerFilter = null, pagination, totalRow, containerSx, paginationProps, footerSx, ...otherProps } = props;
+    const { table, tableSize } = (0, data_table_context_1.useDataTableContext)();
+    // Extract slot-specific props with enhanced merging
+    // const paginationSlotProps = extractSlotProps(slotProps, 'pagination');
+    // Merge all props for maximum flexibility
     const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
-        sx: Object.assign({ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'space-between', px: 2 }, containerSx),
+        sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            justifyContent: 'space-between',
+            px: 2,
+            ...containerSx,
+        },
     });
     const mergedPaginationProps = (0, slot_helpers_1.mergeSlotProps)({
         component: 'div',
+        size: tableSize === 'small' ? 'small' : 'medium',
         count: totalRow,
         rowsPerPage: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize,
         page: pagination === null || pagination === void 0 ? void 0 : 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);
         },
@@ -30,6 +43,7 @@ exports.DataTablePagination = (0, react_1.memo)((props) => {
         showLastButton: true,
         labelRowsPerPage: 'Rows per page:',
         labelDisplayedRows: ({ from, to, count }) => `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
-    }, Object.assign(Object.assign({}, paginationProps), otherProps));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, mergedContainerProps, { children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(material_1.TablePagination, Object.assign({}, mergedPaginationProps))] })));
+    }, { ...paginationProps, ...otherProps });
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { ...mergedContainerProps, children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(material_1.TablePagination, { ...mergedPaginationProps })] }));
 });
+exports.DataTablePagination.displayName = 'DataTablePagination';

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

@@ -0,0 +1,5 @@
+/**
+ * Pagination components for DataTable
+ */
+export * from './data-table-pagination';
+//# sourceMappingURL=index.d.ts.map

package/dist/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/dist/lib/components/pagination/index.js

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * Pagination components for DataTable
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./data-table-pagination"), exports);

package/{src → dist}/lib/components/rows/data-table-row.d.ts

@@ -1,6 +1,15 @@
+/**
+ * DataTableRow Component
+ *
+ * Renders individual table rows with support for:
+ * - Column pinning
+ * - Row expansion
+ * - Hover effects
+ * - Striped styling
+ */
 import { TableRowProps, TableCellProps, SxProps } from '@mui/material';
 import { Row } from '@tanstack/react-table';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 export interface DataTableRowProps<T> extends TableRowProps {
     row: Row<T>;
     enableHover?: boolean;
@@ -19,4 +28,8 @@ export interface DataTableRowProps<T> extends TableRowProps {
     slotProps?: Record<string, any>;
     [key: string]: any;
 }
-export declare function DataTableRow<T>(props: DataTableRowProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual table row component with cell rendering and expansion support
+ */
+export declare function DataTableRow<T>(props: DataTableRowProps<T>): ReactElement;
+//# sourceMappingURL=data-table-row.d.ts.map

package/dist/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":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAiC,aAAa,EAAE,cAAc,EAAE,OAAO,EAAmB,MAAM,eAAe,CAAC;AACvH,OAAO,EAAc,GAAG,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMhD,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,aAAa;IACvD,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,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACjF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,gBAAgB,CAAC,EAAE,aAAa,CAAC;IACjC,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,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;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,YAAY,CAqKzE"}