@ackplus/react-tanstack-data-table 1.0.31 → 1.0.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",

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

@@ -14,4 +14,5 @@ interface DraggableHeaderProps<T> {
     [key: string]: any;
 }
 export declare function DraggableHeader<T>(props: 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 declare const DraggableHeaderMemo: typeof DraggableHeader;
 export {};

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

@@ -1,12 +1,13 @@
 "use strict";
 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 = require("react");
+const react_1 = tslib_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"]);
@@ -204,3 +205,4 @@ function DraggableHeader(props) {
                 gap: 1,
             }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) })));
 }
+exports.DraggableHeaderMemo = react_1.default.memo(DraggableHeader);

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

@@ -14,3 +14,4 @@ export interface TableHeaderProps extends TableHeadProps {
     [key: string]: any;
 }
 export declare function TableHeader<T>(props: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare const TableHeaderMemo: typeof TableHeader;

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeaderMemo = void 0;
 exports.TableHeader = TableHeader;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(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");
@@ -22,16 +24,21 @@ function TableHeader(props) {
         sx: containerSx,
     }, headerSlotProps, otherProps);
     const mergedHeaderRowProps = (0, slot_helpers_1.mergeSlotProps)({}, headerRowSlotProps, headerRowProps || {});
-    const renderHeaderCell = (header) => {
+    const renderHeaderCell = (0, react_1.useCallback)((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();
+        const minSize = header.column.columnDef.minSize;
+        const maxSize = header.column.columnDef.maxSize;
+        const columnSize = enableColumnResizing ? header.getSize() : (fitToScreen ? 'auto' : header.getSize());
         const mergedHeaderCellProps = (0, slot_helpers_1.mergeSlotProps)({
             align: alignment,
             sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
-                width: (fitToScreen && !enableColumnResizing) ? 'auto' : header.getSize(),
+                width: columnSize,
+                minWidth: minSize !== undefined ? minSize : undefined,
+                maxWidth: maxSize !== undefined ? maxSize : undefined,
                 isPinned,
                 pinnedPosition,
                 isLastLeftPinnedColumn: isPinned === 'left' && header.column.getIsLastColumn('left'),
@@ -49,6 +56,20 @@ function TableHeader(props) {
                 } }, 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.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))) })));
+    }, [
+        fitToScreen,
+        enableColumnResizing,
+        enableStickyHeader,
+        headerCellSlotProps,
+        headerCellProps,
+        resizeHandleSx,
+        theme,
+        draggable,
+        onColumnReorder,
+        slots,
+        slotProps,
+    ]);
+    const headerGroups = (0, react_1.useMemo)(() => table.getHeaderGroups(), [table]);
+    return ((0, jsx_runtime_1.jsx)(HeaderSlot, Object.assign({}, mergedHeaderProps, { children: headerGroups.map(headerGroup => ((0, jsx_runtime_1.jsx)(HeaderRowSlot, Object.assign({}, mergedHeaderRowProps, { children: headerGroup.headers.map(renderHeaderCell) }), headerGroup.id))) })));
 }
+exports.TableHeaderMemo = react_1.default.memo(TableHeader);

package/src/lib/components/rows/data-table-row.js

@@ -17,20 +17,32 @@ function DataTableRow(props) {
     const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
     const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
         hover: enableHover,
-        sx: Object.assign({ backgroundColor: enableStripes && isOdd ? 'action.hover' : 'transparent' }, containerSx),
+        sx: (theme) => (Object.assign(Object.assign(Object.assign({ '--row-bg': enableStripes && isOdd
+                ? theme.palette.action.hover
+                : theme.palette.background.paper, backgroundColor: 'var(--row-bg)' }, (enableHover && {
+            '&:hover': { '--row-bg': theme.palette.action.hover },
+        })), { [`&.${material_1.tableRowClasses.selected}`]: {
+                '--row-bg': (0, material_1.alpha)(theme.palette.primary.dark, 0.08),
+                backgroundColor: 'var(--row-bg)',
+            } }), containerSx)),
     }, rowSlotProps, otherProps);
     const mergedExpandedRowProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: expandedContainerSx,
     }, expandedRowSlotProps, expandedRowProps || {});
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableRowSlot, Object.assign({}, mergedRowProps, { children: row.getVisibleCells().map(cell => {
+                    var _a;
                     const isPinned = cell.column.getIsPinned();
                     const pinnedPosition = isPinned ? cell.column.getStart('left') : undefined;
                     const pinnedRightPosition = isPinned === 'right' ? cell.column.getAfter('right') : undefined;
                     const alignment = (0, utils_1.getColumnAlignment)(cell.column.columnDef);
+                    const minSize = (_a = cell.column.columnDef) === null || _a === void 0 ? void 0 : _a.minSize;
+                    const maxSize = cell.column.columnDef.maxSize;
                     const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
                         align: alignment,
                         sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
                             width: cell.column.getSize() || 'auto',
+                            minWidth: minSize !== undefined ? minSize : undefined,
+                            maxWidth: maxSize !== undefined ? maxSize : undefined,
                             isPinned,
                             pinnedPosition,
                             pinnedRightPosition,

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

@@ -33,6 +33,7 @@ const DEFAULT_INITIAL_STATE = {
         right: [],
     },
     columnVisibility: {},
+    columnSizing: {},
     columnFilter: {
         filters: [],
         logic: 'AND',
@@ -40,7 +41,7 @@ const DEFAULT_INITIAL_STATE = {
         pendingLogic: 'AND',
     },
 };
-exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, onColumnVisibilityChange, enableColumnVisibility = true, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = false, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableTableSizeControl = true, enableExport = false, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, }, ref) {
+exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', onColumnSizingChange, enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, onColumnVisibilityChange, enableColumnVisibility = true, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = false, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableTableSizeControl = true, enableExport = false, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, }, ref) {
     var _a;
     const isServerMode = dataMode === 'server';
     const isServerPagination = paginationMode === 'server' || isServerMode;
@@ -69,7 +70,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         }
         return config;
     }, [initialState, logger]);
-    console.log('initialStateConfig', initialStateConfig);
     const [sorting, setSorting] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || DEFAULT_INITIAL_STATE.sorting);
     const [pagination, setPagination] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.pagination) || DEFAULT_INITIAL_STATE.pagination);
     const [globalFilter, setGlobalFilter] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.globalFilter) || DEFAULT_INITIAL_STATE.globalFilter);
@@ -79,6 +79,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize || 'medium');
     const [columnOrder, setColumnOrder] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || DEFAULT_INITIAL_STATE.columnOrder);
     const [columnPinning, setColumnPinning] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnPinning) || DEFAULT_INITIAL_STATE.columnPinning);
+    const [columnVisibility, setColumnVisibility] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || DEFAULT_INITIAL_STATE.columnVisibility);
+    const [columnSizing, setColumnSizing] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || DEFAULT_INITIAL_STATE.columnSizing);
     const [serverData, setServerData] = (0, react_1.useState)(null);
     const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
     const [exportController, setExportController] = (0, react_1.useState)(null);
@@ -153,7 +155,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             pagination,
             columnFilter,
             sorting }, overrides);
-        console.log('filters', filters);
         if (logger.isLevelEnabled('info')) {
             logger.info('Requesting data', { filters });
         }
@@ -217,7 +218,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             sorting,
             pagination,
             columnOrder,
-            columnPinning }, overrides);
+            columnPinning,
+            columnVisibility,
+            columnSizing }, overrides);
         if (logger.isLevelEnabled('debug')) {
             logger.debug('Emitting tableStateChange', currentState);
         }
@@ -230,6 +233,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         pagination,
         columnOrder,
         columnPinning,
+        columnVisibility,
+        columnSizing,
         logger,
     ]);
     const handleSortingChange = (0, react_1.useCallback)((updaterOrValue) => {
@@ -295,12 +300,10 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         }
     }, [onColumnPinningChange, columnPinning]);
     const handleColumnVisibilityChange = (0, react_1.useCallback)((updater) => {
-        var _a, _b;
-        const tableInstance = (_b = (_a = internalApiRef.current) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.getTable();
-        if (!tableInstance)
-            return;
-        const currentVisibility = tableInstance.getState().columnVisibility;
-        const newVisibility = typeof updater === 'function' ? updater(currentVisibility) : updater;
+        const newVisibility = typeof updater === 'function'
+            ? updater(columnVisibility)
+            : updater;
+        setColumnVisibility(newVisibility);
         if (onColumnVisibilityChange) {
             setTimeout(() => {
                 onColumnVisibilityChange(newVisibility);
@@ -311,7 +314,23 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 tableStateChange({ columnVisibility: newVisibility });
             }, 0);
         }
-    }, [onColumnVisibilityChange, onDataStateChange, tableStateChange]);
+    }, [onColumnVisibilityChange, onDataStateChange, tableStateChange, columnVisibility]);
+    const handleColumnSizingChange = (0, react_1.useCallback)((updater) => {
+        const newSizing = typeof updater === 'function'
+            ? updater(columnSizing)
+            : updater;
+        setColumnSizing(newSizing);
+        if (onColumnSizingChange) {
+            setTimeout(() => {
+                onColumnSizingChange(newSizing);
+            }, 0);
+        }
+        if (onDataStateChange) {
+            setTimeout(() => {
+                tableStateChange({ columnSizing: newSizing });
+            }, 0);
+        }
+    }, [onColumnSizingChange, onDataStateChange, tableStateChange, columnSizing]);
     const handlePaginationChange = (0, react_1.useCallback)((updater) => {
         const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
         if (logger.isLevelEnabled('debug')) {
@@ -321,7 +340,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 serverSide: isServerMode || isServerPagination,
             });
         }
-        console.log('newPagination', newPagination);
         setPagination(newPagination);
         onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
         if (logger.isLevelEnabled('debug')) {
@@ -430,7 +448,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }
         }, 0);
     }, [isServerFiltering, fetchData, tableStateChange]);
-    const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, DEFAULT_INITIAL_STATE), state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), (enableColumnVisibility ? { onColumnVisibilityChange: handleColumnVisibilityChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { manualPagination: isServerPagination, autoResetPageIndex: false, rowCount: tableTotalRow, getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey), debugAll: false }));
+    const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, DEFAULT_INITIAL_STATE), state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnVisibility ? { columnVisibility } : {})), (enableColumnResizing ? { columnSizing } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), (enableColumnVisibility ? { onColumnVisibilityChange: handleColumnVisibilityChange } : {})), (enableColumnResizing ? { onColumnSizingChange: handleColumnSizingChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { manualPagination: isServerPagination, autoResetPageIndex: false, rowCount: tableTotalRow, getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey), debugAll: false }));
     const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
     const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
         count: rows.length,
@@ -449,8 +467,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         const newPagination = { pageIndex: 0, pageSize: pagination.pageSize };
         setPagination(newPagination);
         onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
-        console.log('newPagination', newPagination);
-        console.log('onPaginationChange', onPaginationChange);
         return newPagination;
     };
     const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {

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

@@ -57,6 +57,7 @@ export interface DataTableProps<T> {
     bulkActions?: (selectionState: SelectionState) => ReactNode;
     enableColumnResizing?: boolean;
     columnResizeMode?: ColumnResizeMode;
+    onColumnSizingChange?: (sizing: Record<string, number>) => void;
     enableColumnDragging?: boolean;
     onColumnDragEnd?: (columnOrder: string[]) => void;
     enableColumnPinning?: boolean;

package/src/lib/examples/server-side-fetching-example.js

@@ -151,35 +151,30 @@ function ServerSideFetchingExample() {
             id: 'name',
             accessorKey: 'name',
             header: 'Name',
-            size: 200,
             enableGlobalFilter: true,
         },
         {
             id: 'email',
             accessorKey: 'email',
             header: 'Email',
-            size: 250,
             enableGlobalFilter: true,
         },
         {
             id: 'department',
             accessorKey: 'department',
             header: 'Department',
-            size: 150,
             enableGlobalFilter: true,
         },
         {
             id: 'role',
             accessorKey: 'role',
             header: 'Role',
-            size: 120,
             enableGlobalFilter: true,
         },
         {
             id: 'salary',
             accessorKey: 'salary',
             header: 'Salary',
-            size: 120,
             accessorFn: (row) => `$${row.salary.toLocaleString()}`,
             hideInExport: true,
         },
@@ -187,7 +182,6 @@ function ServerSideFetchingExample() {
             id: 'isActive',
             accessorKey: 'isActive',
             header: 'Status',
-            size: 100,
             accessorFn: (row) => row.isActive ? 'Active' : 'Inactive',
             cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Active' : 'Inactive', color: getValue() ? 'success' : 'default', size: "small" })),
         },
@@ -195,7 +189,6 @@ function ServerSideFetchingExample() {
             id: 'joinDate',
             accessorKey: 'joinDate',
             header: 'Join Date',
-            size: 120,
             accessorFn: (row) => new Date(row.joinDate).toLocaleDateString(),
         },
     ];

package/src/lib/examples/simple-local-example.js

@@ -28,30 +28,28 @@ const columns = [
     {
         accessorKey: 'name',
         header: 'Product Name',
-        size: 180,
     },
     {
         accessorKey: 'category',
         header: 'Category',
-        size: 120,
         cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue(), size: "small", variant: "outlined", color: "primary" })),
     },
     {
         accessorKey: 'price',
         header: 'Price',
-        size: 100,
         cell: ({ getValue }) => `$${getValue().toFixed(2)}`,
     },
     {
         accessorKey: 'inStock',
         header: 'In Stock',
-        size: 100,
         cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Yes' : 'No', color: getValue() ? 'success' : 'error', size: "small" })),
     },
     {
         accessorKey: 'rating',
         header: 'Rating',
         size: 100,
+        minSize: 100,
+        maxSize: 100,
         cell: ({ getValue }) => `⭐ ${getValue().toFixed(1)}`,
     },
 ];

package/src/lib/types/export.types.d.ts

@@ -62,6 +62,8 @@ export interface ChunkProcessingConfig {
 }
 export interface PinnedColumnStyleOptions {
     width?: number | string;
+    minWidth?: number;
+    maxWidth?: number;
     isPinned?: 'left' | 'right' | false;
     pinnedPosition?: number;
     pinnedRightPosition?: number;

package/src/lib/utils/special-columns.utils.d.ts

@@ -2,5 +2,5 @@ import { DataTableColumn } from '../types';
 export interface SelectionColumnConfig<T> {
     multiSelect?: boolean;
 }
-export declare const createSelectionColumn: <T>(config: Partial<DataTableColumn<T>> & SelectionColumnConfig<T>) => DataTableColumn<T>;
+export declare const createSelectionColumn: <T>(config: Partial<DataTableColumn<T>> & SelectionColumnConfig<T>) => DataTableColumn<T, any>;
 export declare const createExpandingColumn: <T>(config: Partial<DataTableColumn<T>>) => DataTableColumn<T>;

package/src/lib/utils/special-columns.utils.js

@@ -5,7 +5,7 @@ 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, align: 'center', filterable: false, enableResizing: false, enableSorting: false, enableHiding: false, enablePinning: false, hideInExport: true, header: ({ table }) => {
+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 }) => {
         var _a, _b;
         if (!config.multiSelect)
             return null;
@@ -44,7 +44,7 @@ const createSelectionColumn = (config) => (Object.assign({ id: types_1.DEFAULT_S
         });
     } }, config));
 exports.createSelectionColumn = createSelectionColumn;
-const createExpandingColumn = (config) => (Object.assign({ id: types_1.DEFAULT_EXPANDING_COLUMN_NAME, size: 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, {
+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, {
         onClick: row.getToggleExpandedHandler(),
         size: 'small',
         sx: { p: 0 },

package/src/lib/utils/styling-helpers.d.ts

@@ -1,14 +1,19 @@
 import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
 export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions): {
-    boxShadow: string;
     backgroundColor: string;
+    backgroundClip: string;
+    boxShadow: string;
+    willChange: string;
+    transform: string;
     left?: number;
     right?: number;
     zIndex?: number;
-    width: string | number;
-    maxWidth: string | number;
     overflow: string;
     whiteSpace: string;
+    textOverflow: string;
+    maxWidth?: string | number;
+    minWidth: number;
+    width: string | number;
 };
 export declare const tableCellStyles: {
     readonly sticky: {

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

@@ -13,9 +13,9 @@ const getBoxShadow = (isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn
     return 'none';
 };
 function getPinnedColumnStyle(options) {
-    const { width = 'auto', isPinned, pinnedPosition, pinnedRightPosition, isLastLeftPinnedColumn, isFirstRightPinnedColumn, zIndex = 1, disableStickyHeader = false, } = options;
+    const { width = 'auto', minWidth, maxWidth, isPinned, pinnedPosition, pinnedRightPosition, isLastLeftPinnedColumn, isFirstRightPinnedColumn, zIndex = 1, disableStickyHeader = false, } = options;
     const needsPinnedPositioning = isPinned;
-    const shouldBeSticky = isPinned;
+    const shouldBeSticky = !!isPinned;
     let positionStyle = {};
     if (shouldBeSticky) {
         positionStyle = { position: 'sticky' };
@@ -23,13 +23,15 @@ function getPinnedColumnStyle(options) {
     else if (!disableStickyHeader) {
         positionStyle = { position: 'relative' };
     }
-    return Object.assign(Object.assign(Object.assign(Object.assign({ width, maxWidth: width, overflow: 'hidden', whiteSpace: 'nowrap' }, positionStyle), (needsPinnedPositioning ? {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ width }, (minWidth !== undefined && { minWidth })), (maxWidth !== undefined ? { maxWidth } : width !== 'auto' ? { maxWidth: width } : {})), { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }), positionStyle), (needsPinnedPositioning ? {
         left: isPinned === 'left' ? pinnedPosition : undefined,
         right: isPinned === 'right' ? pinnedRightPosition : undefined,
         zIndex,
-    } : {})), (isPinned && {
-        backgroundColor: 'background.paper',
-    })), { boxShadow: getBoxShadow(isPinned, !!isLastLeftPinnedColumn, !!isFirstRightPinnedColumn) });
+    } : {})), { backgroundColor: isPinned ? 'background.paper' : 'var(--row-bg, var(--mui-palette-background-paper))', backgroundClip: 'padding-box', boxShadow: isPinned === 'left' && isLastLeftPinnedColumn
+            ? 'inset -1px 0 0 var(--palette-TableCell-border), 6px 0 6px -4px rgba(0,0,0,.18)'
+            : isPinned === 'right' && isFirstRightPinnedColumn
+                ? 'inset 1px 0 0 var(--palette-TableCell-border), -6px 0 6px -4px rgba(0,0,0,.18)'
+                : undefined, willChange: 'transform', transform: 'translateZ(0)' });
 }
 exports.tableCellStyles = {
     sticky: {