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

package/{src → dist}/lib/utils/slot-helpers.js

@@ -10,38 +10,60 @@ exports.createEnhancedSlotComponent = createEnhancedSlotComponent;
 exports.validateSlotProps = validateSlotProps;
 exports.createSlotProps = createSlotProps;
 exports.withSlotProps = withSlotProps;
+/**
+ * Enhanced Slot Helper Utilities
+ *
+ * Utilities to help with rendering slotted components with enhanced prop merging,
+ * type safety, and full customization support.
+ */
 const react_1 = require("react");
+/**
+ * Enhanced slot component retrieval with better type safety
+ */
 function getSlotComponent(slots, slotName, fallback) {
     return (slots === null || slots === void 0 ? void 0 : slots[slotName]) || fallback;
 }
+/**
+ * Merge slot props with default props and user overrides
+ * Handles special cases for MUI sx prop, style prop, and className
+ */
 function mergeSlotProps(defaultProps = {}, slotProps = {}, userProps = {}) {
-    const merged = Object.assign({}, defaultProps);
+    // Deep merge objects, giving priority to user props
+    const merged = { ...defaultProps };
+    // Merge slot props
     Object.keys(slotProps).forEach(key => {
         const slotValue = slotProps[key];
         const mergedValue = merged[key];
         if (key === 'sx' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
-            merged[key] = Object.assign(Object.assign({}, mergedValue), slotValue);
+            // Special handling for MUI sx prop
+            merged[key] = { ...mergedValue, ...slotValue };
         }
         else if (key === 'style' && typeof slotValue === 'object' && typeof mergedValue === 'object') {
-            merged[key] = Object.assign(Object.assign({}, mergedValue), slotValue);
+            // Special handling for style prop
+            merged[key] = { ...mergedValue, ...slotValue };
         }
         else if (key === 'className' && typeof slotValue === 'string' && typeof mergedValue === 'string') {
+            // Special handling for className prop
             merged[key] = `${mergedValue} ${slotValue}`.trim();
         }
         else {
             merged[key] = slotValue;
         }
     });
+    // Merge user props (highest priority)
     Object.keys(userProps).forEach(key => {
         const userValue = userProps[key];
         const mergedValue = merged[key];
         if (key === 'sx' && typeof userValue === 'object' && typeof mergedValue === 'object') {
-            merged[key] = Object.assign(Object.assign({}, mergedValue), userValue);
+            // Special handling for MUI sx prop
+            merged[key] = { ...mergedValue, ...userValue };
         }
         else if (key === 'style' && typeof userValue === 'object' && typeof mergedValue === 'object') {
-            merged[key] = Object.assign(Object.assign({}, mergedValue), userValue);
+            // Special handling for style prop
+            merged[key] = { ...mergedValue, ...userValue };
         }
         else if (key === 'className' && typeof userValue === 'string' && typeof mergedValue === 'string') {
+            // Special handling for className prop
             merged[key] = `${mergedValue} ${userValue}`.trim();
         }
         else {
@@ -50,22 +72,37 @@ function mergeSlotProps(defaultProps = {}, slotProps = {}, userProps = {}) {
     });
     return merged;
 }
+/**
+ * Enhanced slot component retrieval with automatic prop merging
+ */
 function getSlotComponentWithProps(slots, slotProps = {}, slotName, fallback, defaultProps = {}) {
     const component = getSlotComponent(slots, slotName, fallback);
     const props = mergeSlotProps(defaultProps, slotProps[slotName] || {}, {});
     return { component, props };
 }
+/**
+ * Utility to check if a slot is overridden by user
+ */
 function isSlotOverridden(slots, slotName) {
     return Boolean(slots === null || slots === void 0 ? void 0 : slots[slotName]);
 }
+/**
+ * Utility to get all overridden slots
+ */
 function getOverriddenSlots(slots) {
     if (!slots)
         return [];
     return Object.keys(slots).filter(key => Boolean(slots[key]));
 }
+/**
+ * Type-safe slot prop extractor
+ */
 function extractSlotProps(slotProps, slotName) {
     return ((slotProps === null || slotProps === void 0 ? void 0 : slotProps[slotName]) || {});
 }
+/**
+ * Enhanced slot component with better prop handling
+ */
 function createEnhancedSlotComponent(slots, slotName, fallback, baseProps = {}) {
     const SlotComponent = getSlotComponent(slots, slotName, fallback);
     return function EnhancedSlot(props) {
@@ -73,6 +110,9 @@ function createEnhancedSlotComponent(slots, slotName, fallback, baseProps = {})
         return (0, react_1.createElement)(SlotComponent, mergedProps);
     };
 }
+/**
+ * Utility to validate slot props at runtime (development only)
+ */
 function validateSlotProps(slotName, props, requiredProps = []) {
     if (process.env.NODE_ENV === 'development') {
         const missingProps = requiredProps.filter(prop => !(prop in props));
@@ -83,9 +123,18 @@ function validateSlotProps(slotName, props, requiredProps = []) {
     }
     return true;
 }
+/**
+ * Helper to create slot props with proper typing
+ */
 function createSlotProps(table, additionalProps = {}) {
-    return Object.assign({ table }, additionalProps);
+    return {
+        table,
+        ...additionalProps,
+    };
 }
+/**
+ * Enhanced slot component wrapper that handles all prop merging automatically
+ */
 function withSlotProps(slots, slotProps = {}, slotName, fallback) {
     return function SlotWrapper(props) {
         const SlotComponent = getSlotComponent(slots, slotName, fallback);

package/{src → dist}/lib/utils/special-columns.utils.d.ts

@@ -1,6 +1,16 @@
 import { DataTableColumn } from '../types';
+/**
+ * Enhanced configuration for selection column
+ */
 export interface SelectionColumnConfig<T> {
     multiSelect?: boolean;
 }
+/**
+ * Creates a default selection column using TanStack Table custom feature methods
+ */
 export declare const createSelectionColumn: <T>(config: Partial<DataTableColumn<T>> & SelectionColumnConfig<T>) => DataTableColumn<T, any>;
+/**
+ * Creates a default expanding column
+ */
 export declare const createExpandingColumn: <T>(config: Partial<DataTableColumn<T>>) => DataTableColumn<T>;
+//# sourceMappingURL=special-columns.utils.d.ts.map

package/dist/lib/utils/special-columns.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"special-columns.utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/special-columns.utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAgE,MAAM,UAAU,CAAC;AAEzG;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;CAEzB;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,EAAE,QAAQ,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,KAAG,eAAe,CAAC,CAAC,EAAE,GAAG,CAqD9H,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,EAAE,QAAQ,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAG,eAAe,CAAC,CAAC,CAkB9F,CAAC"}

package/{src → dist}/lib/utils/special-columns.utils.js

@@ -5,10 +5,25 @@ const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 const types_1 = require("../types");
-const createSelectionColumn = (config) => (Object.assign({ id: types_1.DEFAULT_SELECTION_COLUMN_NAME, size: 60, minSize: 60, align: 'center', filterable: false, enableResizing: false, enableSorting: false, enableHiding: false, enablePinning: false, hideInExport: true, header: ({ table }) => {
+/**
+ * Creates a default selection column using TanStack Table custom feature methods
+ */
+const createSelectionColumn = (config) => ({
+    id: types_1.DEFAULT_SELECTION_COLUMN_NAME,
+    size: 60,
+    minSize: 60,
+    align: 'center',
+    filterable: false,
+    enableResizing: false,
+    enableSorting: false,
+    enableHiding: false,
+    enablePinning: false,
+    hideInExport: true,
+    header: ({ table }) => {
         var _a, _b;
         if (!config.multiSelect)
             return null;
+        // Use TanStack Table custom feature methods (same pattern as TanStack documentation)
         const allSelected = ((_a = table.getIsAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table)) || false;
         const someSelected = ((_b = table.getIsSomeRowsSelected) === null || _b === void 0 ? void 0 : _b.call(table)) || false;
         return (0, react_1.createElement)(material_1.Checkbox, {
@@ -22,9 +37,11 @@ const createSelectionColumn = (config) => (Object.assign({ id: types_1.DEFAULT_S
             size: 'small',
             sx: { p: 0 },
         });
-    }, cell: ({ row, table }) => {
+    },
+    cell: ({ row, table }) => {
         var _a, _b, _c;
         const rowId = row.id;
+        // Use TanStack Table custom feature methods (same pattern as TanStack documentation)
         const checked = ((_a = table.getIsRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId)) || false;
         const canSelect = (_c = (_b = table.canSelectRow) === null || _b === void 0 ? void 0 : _b.call(table, rowId)) !== null && _c !== void 0 ? _c : true;
         return (0, react_1.createElement)(material_1.Checkbox, {
@@ -42,11 +59,30 @@ const createSelectionColumn = (config) => (Object.assign({ id: types_1.DEFAULT_S
                 opacity: canSelect ? 1 : 0.5
             },
         });
-    } }, config));
+    },
+    ...config,
+});
 exports.createSelectionColumn = createSelectionColumn;
-const createExpandingColumn = (config) => (Object.assign({ id: types_1.DEFAULT_EXPANDING_COLUMN_NAME, size: 60, minSize: 60, align: 'center', filterable: false, enableResizing: false, enableSorting: false, enableHiding: false, enablePinning: false, hideInExport: true, header: '', cell: ({ row }) => (0, react_1.createElement)(material_1.IconButton, {
+/**
+ * Creates a default expanding column
+ */
+const createExpandingColumn = (config) => ({
+    id: types_1.DEFAULT_EXPANDING_COLUMN_NAME,
+    size: 60,
+    minSize: 60,
+    align: 'center',
+    filterable: false,
+    enableResizing: false,
+    enableSorting: false,
+    enableHiding: false,
+    enablePinning: false,
+    hideInExport: true,
+    header: '',
+    cell: ({ row }) => (0, react_1.createElement)(material_1.IconButton, {
         onClick: row.getToggleExpandedHandler(),
         size: 'small',
         sx: { p: 0 },
-    }, row.getIsExpanded() ? (0, react_1.createElement)(icons_material_1.KeyboardArrowUpOutlined) : (0, react_1.createElement)(icons_material_1.KeyboardArrowDownOutlined)) }, config));
+    }, row.getIsExpanded() ? (0, react_1.createElement)(icons_material_1.KeyboardArrowUpOutlined) : (0, react_1.createElement)(icons_material_1.KeyboardArrowDownOutlined)),
+    ...config,
+});
 exports.createExpandingColumn = createExpandingColumn;

package/{src → dist}/lib/utils/styling-helpers.d.ts

@@ -1,4 +1,10 @@
+/**
+ * Styling utilities for DataTable components
+ */
 import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
+/**
+ * Generate consistent styling for pinned columns
+ */
 export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions): {
     backgroundColor: (theme: any) => any;
     backgroundImage: (theme: any) => string;
@@ -10,6 +16,7 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
     wordBreak: "break-word";
     overflow: "visible";
     textOverflow?: undefined;
+    boxSizing: string;
     maxWidth: string | number;
     minWidth: number;
     width: string | number;
@@ -23,6 +30,7 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
     wordBreak: "break-word";
     overflow: "visible";
     textOverflow?: undefined;
+    boxSizing: string;
     maxWidth: string | number;
     minWidth: number;
     width: string | number;
@@ -37,6 +45,7 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
     whiteSpace: "nowrap";
     textOverflow: "ellipsis";
     wordBreak?: undefined;
+    boxSizing: string;
     maxWidth: string | number;
     minWidth: number;
     width: string | number;
@@ -50,10 +59,14 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
     whiteSpace: "nowrap";
     textOverflow: "ellipsis";
     wordBreak?: undefined;
+    boxSizing: string;
     maxWidth: string | number;
     minWidth: number;
     width: string | number;
 };
+/**
+ * Common table cell styling
+ */
 export declare const tableCellStyles: {
     readonly sticky: {
         readonly position: "sticky";
@@ -65,6 +78,9 @@ export declare const tableCellStyles: {
         readonly borderColor: "divider";
     };
 };
+/**
+ * Common table row styling
+ */
 export declare const tableRowStyles: {
     readonly hover: {
         readonly '&:hover': {
@@ -77,4 +93,8 @@ export declare const tableRowStyles: {
         };
     };
 };
+/**
+ * Get text alignment style from column metadata
+ */
 export declare function getColumnAlignment(column?: DataTableColumn<any>): 'left' | 'center' | 'right';
+//# sourceMappingURL=styling-helpers.d.ts.map

package/dist/lib/utils/styling-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styling-helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/styling-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAE1E;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4ErE;AAED;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;CAUlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;CAWjB,CAAC;AAEX;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAG7F"}

package/dist/lib/utils/styling-helpers.js

@@ -0,0 +1,108 @@
+"use strict";
+/**
+ * Styling utilities for DataTable components
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableRowStyles = exports.tableCellStyles = void 0;
+exports.getPinnedColumnStyle = getPinnedColumnStyle;
+exports.getColumnAlignment = getColumnAlignment;
+/**
+ * Generate consistent styling for pinned columns
+ */
+function getPinnedColumnStyle(options) {
+    const { width = 'auto', minWidth, maxWidth, isPinned, pinnedPosition, pinnedRightPosition, isLastLeftPinnedColumn, isFirstRightPinnedColumn, zIndex = 1, disableStickyHeader = false, wrapText = false, } = options;
+    // Pinned columns should ALWAYS be sticky, regardless of enableStickyHeader setting
+    const needsPinnedPositioning = isPinned;
+    const shouldBeSticky = isPinned; // Pinned columns are always sticky
+    // Position logic
+    let positionStyle = {};
+    if (shouldBeSticky) {
+        // Pinned columns must always be sticky - override any Table-level sticky positioning
+        positionStyle = { position: 'sticky' };
+    }
+    else if (!disableStickyHeader) {
+        // Non-pinned columns: set relative when we're managing positioning
+        positionStyle = { position: 'relative' };
+    }
+    // When disableStickyHeader is true and column is not pinned, let Table handle stickiness
+    // Text wrapping styles - configurable per column
+    const textWrappingStyles = wrapText
+        ? {
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            overflow: 'visible',
+        }
+        : {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+        };
+    return {
+        // Width constraints - more strict for narrow columns
+        width,
+        ...(minWidth !== undefined && { minWidth }),
+        ...(maxWidth !== undefined ? { maxWidth } : { maxWidth: width }),
+        boxSizing: 'border-box',
+        ...textWrappingStyles,
+        // Position handling
+        ...positionStyle,
+        // Pinned positioning (works with both sticky modes)
+        ...(needsPinnedPositioning ? {
+            left: isPinned === 'left' ? pinnedPosition : undefined,
+            right: isPinned === 'right' ? pinnedRightPosition : undefined,
+            zIndex,
+        } : {}),
+        boxShadow: isPinned === 'left' && isLastLeftPinnedColumn
+            ? 'inset -1px 0 0 var(--palette-TableCell-border), 2px 0 2px -4px rgba(0,0,0,.18)'
+            : isPinned === 'right' && isFirstRightPinnedColumn
+                ? 'inset 1px 0 0 var(--palette-TableCell-border), -1px 0 2px -4px rgba(0,0,0,.18)'
+                : undefined,
+        // For pinned columns: use solid background + transparent overlay to prevent text bleeding through
+        ...(isPinned ? {
+            // Solid base background (opaque)
+            backgroundColor: (theme) => theme.palette.background.paper,
+            // Transparent overlay for hover/selected states
+            backgroundImage: (theme) => `linear-gradient(var(--row-bg, ${theme.palette.background.paper}), var(--row-bg, ${theme.palette.background.paper}))`,
+        } : {
+            // Non-pinned columns: use standard transparent background
+            backgroundColor: (theme) => `var(--row-bg, ${theme.palette.background.paper})`,
+        }),
+    };
+}
+/**
+ * Common table cell styling
+ */
+exports.tableCellStyles = {
+    sticky: {
+        position: 'sticky',
+        zIndex: 10,
+        backgroundColor: 'background.paper',
+    },
+    pinned: {
+        borderRight: '1px solid',
+        borderColor: 'divider',
+    },
+};
+/**
+ * Common table row styling
+ */
+exports.tableRowStyles = {
+    hover: {
+        '&:hover': {
+            backgroundColor: 'action.hover',
+        },
+    },
+    striped: {
+        '&:nth-of-type(odd)': {
+            backgroundColor: 'action.selected',
+        },
+    },
+};
+/**
+ * Get text alignment style from column metadata
+ */
+function getColumnAlignment(column) {
+    if (!column)
+        return 'left';
+    return column.align || 'left';
+}

package/{src → dist}/lib/utils/table-helpers.d.ts

@@ -1,9 +1,34 @@
+/**
+ * General table utilities for DataTable components
+ */
 import type { TableMetrics } from '../types';
 export type DataTableSize = 'small' | 'medium';
+/**
+ * Calculate skeleton rows count based on viewport and row height
+ */
 export declare function calculateSkeletonRows(containerHeight: number, rowHeight: number, maxRows?: number): number;
+/**
+ * Generate unique row ID for virtualization
+ */
 export declare function generateRowId<T>(row: T, index: number, idKey?: keyof T): string;
+/**
+ * Calculate total width of pinned columns
+ */
 export declare function calculatePinnedColumnsWidth(columns: any[], side: 'left' | 'right'): number;
+/**
+ * Check if table should use fixed layout
+ */
 export declare function shouldUseFixedLayout(fitToScreen: boolean, enableColumnResizing: boolean, totalColumns: number): boolean;
+/**
+ * Format cell value based on column type
+ */
 export declare function formatCellValue(value: any, type: string): string;
+/**
+ * Debounce function for search and filters
+ */
 export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
+/**
+ * Get table performance metrics
+ */
 export declare function calculateTableMetrics(totalRows: number, visibleRows: number, columns: any[], renderStartTime: number): TableMetrics;
+//# sourceMappingURL=table-helpers.d.ts.map

package/dist/lib/utils/table-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/table-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/C;;GAEG;AACH,wBAAgB,qBAAqB,CACjC,eAAe,EAAE,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,SAAK,GACb,MAAM,CAGR;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAK/E;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACvC,OAAO,EAAE,GAAG,EAAE,EACd,IAAI,EAAE,MAAM,GAAG,OAAO,GACvB,MAAM,CAIR;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAChC,WAAW,EAAE,OAAO,EACpB,oBAAoB,EAAE,OAAO,EAC7B,YAAY,EAAE,MAAM,GACrB,OAAO,CAET;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAehE;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACtD,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACb,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;GAEG;AAEH,wBAAgB,qBAAqB,CACjC,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,GAAG,EAAE,EACd,eAAe,EAAE,MAAM,GACxB,YAAY,CAOd"}

package/{src → dist}/lib/utils/table-helpers.js

@@ -1,4 +1,7 @@
 "use strict";
+/**
+ * General table utilities for DataTable components
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateSkeletonRows = calculateSkeletonRows;
 exports.generateRowId = generateRowId;
@@ -7,24 +10,39 @@ exports.shouldUseFixedLayout = shouldUseFixedLayout;
 exports.formatCellValue = formatCellValue;
 exports.debounce = debounce;
 exports.calculateTableMetrics = calculateTableMetrics;
+/**
+ * Calculate skeleton rows count based on viewport and row height
+ */
 function calculateSkeletonRows(containerHeight, rowHeight, maxRows = 10) {
     const estimatedRows = Math.ceil(containerHeight / rowHeight);
     return Math.min(estimatedRows, maxRows);
 }
+/**
+ * Generate unique row ID for virtualization
+ */
 function generateRowId(row, index, idKey) {
     if (idKey && row[idKey]) {
         return String(row[idKey]);
     }
     return `row-${index}`;
 }
+/**
+ * Calculate total width of pinned columns
+ */
 function calculatePinnedColumnsWidth(columns, side) {
     return columns
         .filter(col => col.getIsPinned() === side)
         .reduce((total, col) => total + (col.getSize() || 0), 0);
 }
+/**
+ * Check if table should use fixed layout
+ */
 function shouldUseFixedLayout(fitToScreen, enableColumnResizing, totalColumns) {
     return fitToScreen || (enableColumnResizing && totalColumns > 5);
 }
+/**
+ * Format cell value based on column type
+ */
 function formatCellValue(value, type) {
     if (value === null || value === undefined) {
         return '-';
@@ -40,6 +58,9 @@ function formatCellValue(value, type) {
             return String(value);
     }
 }
+/**
+ * Debounce function for search and filters
+ */
 function debounce(func, wait) {
     let timeout;
     return (...args) => {
@@ -47,6 +68,9 @@ function debounce(func, wait) {
         timeout = setTimeout(() => func(...args), wait);
     };
 }
+/**
+ * Get table performance metrics
+ */
 function calculateTableMetrics(totalRows, visibleRows, columns, renderStartTime) {
     return {
         totalRows,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.35",
+  "version": "1.1.3",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",
@@ -26,24 +26,49 @@
   "bugs": {
     "url": "https://github.com/ack-solutions/react-tanstack-data-table/issues"
   },
-  "main": "./src/index.js",
-  "types": "./src/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "rxjs": "^7.8.0",
+    "xlsx": "^0.18.5",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.10"
+  },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
     "@emotion/styled": ">=11.0.0",
     "@mui/icons-material": ">=5.0.0 || ^6.0.0 || ^7.0.0",
     "@mui/material": ">=5.0.0 || ^6.0.0 || ^7.0.0",
-    "@tanstack/react-table": ">=8.10.0",
-    "@tanstack/react-virtual": ">=3.0.0",
     "react": ">=18.0.0 || ^19.0.0",
     "react-dom": ">=18.0.0 || ^19.0.0",
-    "xlsx": ">=0.18.0",
-    "moment": ">=2.29.0",
     "@mui/x-date-pickers": ">=5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "typescript": "^5.8.2"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "@mui/x-date-pickers": "^8.5.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typescript": "~5.8.3"
   }
-}
+}

package/src/index.ts

@@ -0,0 +1,71 @@
+/**
+ * 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/data-table';
+
+// Other component exports
+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';
+
+// Export bulk action types
+export type { BulkActionsToolbarProps } from './lib/components/toolbar';
+
+// Utilities and helpers
+export * from './lib/utils/styling-helpers';
+export * from './lib/utils/column-helpers';
+export * from './lib/utils/table-helpers';
+export * from './lib/utils/logger';
+
+// Custom hooks
+export * from './lib/types';
+
+// Re-export commonly used types from TanStack Table
+export type {
+    Column,
+    ColumnDef,
+    Row,
+    Table,
+    Header,
+    Cell,
+    SortingState,
+    ColumnFiltersState,
+    VisibilityState,
+    ColumnOrderState,
+    ColumnPinningState,
+    PaginationState,
+} from '@tanstack/react-table';
+
+// Custom features (this includes SelectMode from features)
+export * from './lib/features';