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

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
-  "version": "1.0.19-beta-0.6",
+  "type": "commonjs",
+  "version": "1.0.19-beta-0.8",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",
@@ -44,14 +45,5 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^5.8.2"
-  },
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "development": "./src/index.ts",
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
   }
-}
+}

package/{index.js → src/index.d.ts}

@@ -1,42 +1,19 @@
-/**
- * MUI TanStack DataTable
- *
- * A comprehensive, highly customizable data table component built with:
- * - Material-UI (MUI) for styling
- * - TanStack Table for table logic
- * - TypeScript for type safety
- *
- * Features:
- * - Column sorting, filtering, resizing, reordering, and pinning
- * - Row selection, expansion, and virtualization
- * - Pagination with customizable page sizes
- * - Global and column-specific search/filtering
- * - Export functionality (CSV, XLSX, JSON)
- * - Responsive design with mobile support
- * - Accessibility features
- * - Customizable toolbar and actions
- * - Loading states and empty data handling
- */
-// Main components - be specific to avoid conflicts
 export { DataTable } from './lib/components/table';
-// Other component exports
+export type { DataTableProps } from './lib/components/table';
 export * from './lib/components/headers';
 export * from './lib/components/rows';
 export * from './lib/components/filters';
 export * from './lib/components/pagination';
 export * from './lib/components/droupdown/menu-dropdown';
-// Individual toolbar components for custom toolbars
 export { ColumnVisibilityControl, ColumnPinningControl, ColumnResetControl, TableExportControl, TableSizeControl, BulkActionsToolbar, DataTableToolbar, } from './lib/components/toolbar';
-// Utilities and helpers
+export type { BulkActionsToolbarProps } from './lib/components/toolbar';
 export * from './lib/utils/styling-helpers';
 export * from './lib/utils/column-helpers';
 export * from './lib/utils/table-helpers';
-// Custom hooks
 export * from './lib/hooks';
 export * from './lib/types';
-// Custom features (this includes SelectMode from features)
+export type { Column, ColumnDef, Row, Table, Header, Cell, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, PaginationState, } from '@tanstack/react-table';
 export * from './lib/features';
-// Examples
 export { CustomColumnFilterExample } from './lib/examples/custom-column-filter-example';
 export { SimpleLocalExample } from './lib/examples/simple-local-example';
 export { AdvancedFeaturesExample } from './lib/examples/advanced-features-example';

package/src/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdvancedFeaturesExample = exports.SimpleLocalExample = exports.CustomColumnFilterExample = exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
+const tslib_1 = require("tslib");
+var table_1 = require("./lib/components/table");
+Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return table_1.DataTable; } });
+tslib_1.__exportStar(require("./lib/components/headers"), exports);
+tslib_1.__exportStar(require("./lib/components/rows"), exports);
+tslib_1.__exportStar(require("./lib/components/filters"), exports);
+tslib_1.__exportStar(require("./lib/components/pagination"), exports);
+tslib_1.__exportStar(require("./lib/components/droupdown/menu-dropdown"), exports);
+var toolbar_1 = require("./lib/components/toolbar");
+Object.defineProperty(exports, "ColumnVisibilityControl", { enumerable: true, get: function () { return toolbar_1.ColumnVisibilityControl; } });
+Object.defineProperty(exports, "ColumnPinningControl", { enumerable: true, get: function () { return toolbar_1.ColumnPinningControl; } });
+Object.defineProperty(exports, "ColumnResetControl", { enumerable: true, get: function () { return toolbar_1.ColumnResetControl; } });
+Object.defineProperty(exports, "TableExportControl", { enumerable: true, get: function () { return toolbar_1.TableExportControl; } });
+Object.defineProperty(exports, "TableSizeControl", { enumerable: true, get: function () { return toolbar_1.TableSizeControl; } });
+Object.defineProperty(exports, "BulkActionsToolbar", { enumerable: true, get: function () { return toolbar_1.BulkActionsToolbar; } });
+Object.defineProperty(exports, "DataTableToolbar", { enumerable: true, get: function () { return toolbar_1.DataTableToolbar; } });
+tslib_1.__exportStar(require("./lib/utils/styling-helpers"), exports);
+tslib_1.__exportStar(require("./lib/utils/column-helpers"), exports);
+tslib_1.__exportStar(require("./lib/utils/table-helpers"), exports);
+tslib_1.__exportStar(require("./lib/hooks"), exports);
+tslib_1.__exportStar(require("./lib/types"), exports);
+tslib_1.__exportStar(require("./lib/features"), exports);
+var custom_column_filter_example_1 = require("./lib/examples/custom-column-filter-example");
+Object.defineProperty(exports, "CustomColumnFilterExample", { enumerable: true, get: function () { return custom_column_filter_example_1.CustomColumnFilterExample; } });
+var simple_local_example_1 = require("./lib/examples/simple-local-example");
+Object.defineProperty(exports, "SimpleLocalExample", { enumerable: true, get: function () { return simple_local_example_1.SimpleLocalExample; } });
+var advanced_features_example_1 = require("./lib/examples/advanced-features-example");
+Object.defineProperty(exports, "AdvancedFeaturesExample", { enumerable: true, get: function () { return advanced_features_example_1.AdvancedFeaturesExample; } });

package/src/lib/components/droupdown/menu-dropdown.d.ts

@@ -0,0 +1,17 @@
+import { Menu, MenuProps, Popover } from '@mui/material';
+import { ReactElement, ReactNode } 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 declare function MenuDropdown({ children, anchor, label, component, sx, ...props }: MenuDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

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/{lib → src/lib}/components/filters/index.js

@@ -1,4 +1,8 @@
-export const FILTER_OPERATORS = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FILTER_OPERATORS = void 0;
+const tslib_1 = require("tslib");
+exports.FILTER_OPERATORS = {
     text: [
         {
             value: 'contains',
@@ -122,4 +126,4 @@ export const FILTER_OPERATORS = {
         },
     ],
 };
-export * from './filter-value-input';
+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/{lib → src/lib}/components/headers/draggable-header.js

@@ -1,36 +1,34 @@
-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
+"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) {
-            // 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
+                const headerExists = table.querySelector('th');
                 if (headerExists) {
                     searchElement = table;
                     break;
@@ -38,12 +36,10 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
             }
         }
         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);
@@ -54,7 +50,7 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
         }
         return null;
     }, []);
-    const startAutoScroll = useCallback((direction) => {
+    const startAutoScroll = (0, react_1.useCallback)((direction) => {
         if (autoScrollIntervalRef.current) {
             clearInterval(autoScrollIntervalRef.current);
         }
@@ -64,7 +60,6 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
         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);
@@ -80,13 +75,13 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
             }
         }, AUTO_SCROLL_INTERVAL);
     }, [findScrollableContainer]);
-    const stopAutoScroll = useCallback(() => {
+    const stopAutoScroll = (0, react_1.useCallback)(() => {
         if (autoScrollIntervalRef.current) {
             clearInterval(autoScrollIntervalRef.current);
             autoScrollIntervalRef.current = null;
         }
     }, []);
-    const checkAutoScroll = useCallback((clientX) => {
+    const checkAutoScroll = (0, react_1.useCallback)((clientX) => {
         const container = findScrollableContainer();
         if (!container) {
             return;
@@ -94,16 +89,12 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
         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');
         }
     }, [
@@ -122,10 +113,9 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
         e.dataTransfer.setData('text/plain', header.id);
         e.dataTransfer.effectAllowed = 'move';
     };
-    const handleDrag = useCallback((e) => {
+    const handleDrag = (0, react_1.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);
         }
@@ -138,14 +128,12 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
         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 }));
+            return ((0, jsx_runtime_1.jsx)(SortIconAscSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconAsc)));
         }
         if (sortDirection === 'desc') {
-            return (_jsx(SortIconDescSlot, { fontSize: "small", ...slotProps?.sortIconDesc }));
+            return ((0, jsx_runtime_1.jsx)(SortIconDescSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.sortIconDesc)));
         }
-        // Don't show any icon when not sorted
         return null;
     };
     const handleDragEnd = () => {
@@ -160,12 +148,10 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
         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)
@@ -183,13 +169,13 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
             return;
         const currentSort = header.column.getIsSorted();
         if (currentSort === false) {
-            header.column.toggleSorting(false); // asc
+            header.column.toggleSorting(false);
         }
         else if (currentSort === 'asc') {
-            header.column.toggleSorting(true); // desc
+            header.column.toggleSorting(true);
         }
         else {
-            header.column.clearSorting(); // none
+            header.column.clearSorting();
         }
     };
     const getCursor = () => {
@@ -200,9 +186,9 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
         return 'default';
     };
     if (!draggable && !enableSorting) {
-        return flexRender(header.column.columnDef.header, header.getContext());
+        return (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext());
     }
-    return (_jsx(Box, { ref: headerElementRef, sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: headerElementRef, sx: {
             display: 'flex',
             alignItems: 'center',
             gap: 1,
@@ -217,10 +203,10 @@ export function DraggableHeader({ header, enableSorting = true, draggable = fals
             '&: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: {
+        }, 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: [flexRender(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
+            }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
 }

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

@@ -1,5 +1,2 @@
-/**
- * Header components for DataTable
- */
 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>;