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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "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"]);
@@ -184,8 +185,15 @@ function DraggableHeader(props) {
     };
     const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
         ref: headerElementRef,
-        sx: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: justifyContent, gap: 1, cursor: getCursor(), userSelect: 'none', opacity: isDragging ? 0.5 : 1, backgroundColor: dragOver ? 'rgba(25, 118, 210, 0.08)' : 'transparent', borderLeft: dragOver ? '2px solid #1976d2' : 'none', padding: dragOver ? '0 0 0 -2px' : '0', width: '100%', height: '100%', '&:active': {
+        sx: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: justifyContent, gap: 1, cursor: getCursor(), userSelect: 'none', opacity: isDragging ? 0.5 : 1, backgroundColor: dragOver ? 'rgba(25, 118, 210, 0.08)' : 'transparent', borderLeft: dragOver ? '2px solid #1976d2' : 'none', padding: dragOver ? '0 0 0 -2px' : '0', width: '100%', height: '100%', minWidth: '0', '&:active': {
                 cursor: draggable ? 'grabbing' : 'pointer',
+            }, '.header-content': {
+                display: 'block',
+                flex: 1,
+                minWidth: 0,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
             } }, containerSx),
         draggable: draggable,
         onDragStart: handleDragStart,
@@ -199,8 +207,9 @@ function DraggableHeader(props) {
     if (!draggable && !enableSorting) {
         return (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext());
     }
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, mergedContainerProps, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({}, mergedContainerProps, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", className: 'header-wrapper', sx: {
                 display: 'inline-flex',
                 gap: 1,
-            }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) })));
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", className: 'header-content', children: (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) }), getSortIcon()] }) })));
 }
+exports.DraggableHeaderMemo = react_1.default.memo(DraggableHeader);

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

@@ -23,11 +23,13 @@ function TableHeader(props) {
     }, headerSlotProps, otherProps);
     const mergedHeaderRowProps = (0, slot_helpers_1.mergeSlotProps)({}, headerRowSlotProps, headerRowProps || {});
     const renderHeaderCell = (header) => {
+        var _a;
         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 wrapText = (_a = header.column.columnDef.wrapText) !== null && _a !== void 0 ? _a : false;
         const mergedHeaderCellProps = (0, slot_helpers_1.mergeSlotProps)({
             align: alignment,
             sx: Object.assign({}, (0, utils_1.getPinnedColumnStyle)({
@@ -39,6 +41,7 @@ function TableHeader(props) {
                 pinnedRightPosition,
                 zIndex: isPinned ? 10 : 1,
                 disableStickyHeader: enableStickyHeader,
+                wrapText,
             })),
         }, headerCellSlotProps, headerCellProps || {});
         const mergedResizeHandleProps = (0, slot_helpers_1.mergeSlotProps)({

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

@@ -8,6 +8,8 @@ export interface DataTableRowProps<T> extends TableRowProps {
     isOdd?: boolean;
     renderSubComponent?: (row: Row<T>) => ReactNode;
     disableStickyHeader?: boolean;
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, row: Row<T>) => void;
+    selectOnRowClick?: boolean;
     cellProps?: TableCellProps;
     expandedRowProps?: TableRowProps;
     expandedCellProps?: TableCellProps;

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

@@ -7,30 +7,62 @@ const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const utils_1 = require("../../utils");
 const slot_helpers_1 = require("../../utils/slot-helpers");
+const data_table_context_1 = require("../../contexts/data-table-context");
 function DataTableRow(props) {
-    const { row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, cellProps, expandedRowProps, expandedCellProps, containerSx, expandedContainerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["row", "enableHover", "enableStripes", "isOdd", "renderSubComponent", "disableStickyHeader", "cellProps", "expandedRowProps", "expandedCellProps", "containerSx", "expandedContainerSx", "slots", "slotProps"]);
+    var _a;
+    const { row, enableHover = true, enableStripes = false, isOdd = false, renderSubComponent, disableStickyHeader = false, onRowClick, selectOnRowClick = false, cellProps, expandedRowProps, expandedCellProps, containerSx, expandedContainerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["row", "enableHover", "enableStripes", "isOdd", "renderSubComponent", "disableStickyHeader", "onRowClick", "selectOnRowClick", "cellProps", "expandedRowProps", "expandedCellProps", "containerSx", "expandedContainerSx", "slots", "slotProps"]);
+    const { table } = (0, data_table_context_1.useDataTableContext)();
     const cellSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'cell');
     const expandedRowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'expandedRow');
     const rowSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'row');
     const CellSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'cell', material_1.TableCell);
     const ExpandedRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'expandedRow', material_1.TableRow);
     const TableRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'row', material_1.TableRow);
+    const handleRowClick = (event) => {
+        const target = event.target;
+        const isCheckboxClick = target.closest('input[type="checkbox"]') !== null;
+        const isButtonClick = target.closest('button') !== null;
+        const isLinkClick = target.closest('a') !== null;
+        if (selectOnRowClick && !isCheckboxClick && !isButtonClick && !isLinkClick && (table === null || table === void 0 ? void 0 : table.toggleRowSelected)) {
+            table.toggleRowSelected(row.id);
+        }
+        if (onRowClick) {
+            onRowClick(event, row);
+        }
+    };
     const mergedRowProps = (0, slot_helpers_1.mergeSlotProps)({
         hover: enableHover,
-        sx: Object.assign({ backgroundColor: enableStripes && isOdd ? 'action.hover' : 'transparent' }, containerSx),
+        selected: !!((_a = table === null || table === void 0 ? void 0 : table.getIsRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, row.id)),
+        onClick: (onRowClick || selectOnRowClick) ? handleRowClick : undefined,
+        sx: (theme) => (Object.assign(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': theme.palette.action.selected,
+                backgroundColor: 'var(--row-bg)',
+            } }), ((onRowClick || selectOnRowClick) && {
+            cursor: 'pointer',
+        })), 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, _b;
                     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 wrapText = (_b = cell.column.columnDef.wrapText) !== null && _b !== void 0 ? _b : false;
                     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,
@@ -38,6 +70,7 @@ function DataTableRow(props) {
                             disableStickyHeader,
                             isLastLeftPinnedColumn: isPinned === 'left' && cell.column.getIsLastColumn('left'),
                             isFirstRightPinnedColumn: isPinned === 'right' && cell.column.getIsFirstColumn('right'),
+                            wrapText,
                         })),
                     }, cellSlotProps, cellProps || {});
                     return ((0, jsx_runtime_1.jsx)(CellSlot, Object.assign({}, mergedCellProps, { children: (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()) }), cell.id));

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

@@ -41,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', 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) {
+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, onRowClick, selectOnRowClick = false, 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;
@@ -70,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);
@@ -80,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);
@@ -154,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 });
         }
@@ -218,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);
         }
@@ -231,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) => {
@@ -296,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);
@@ -312,14 +314,12 @@ 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) => {
-        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 currentSizing = tableInstance.getState().columnSizing;
-        const newSizing = typeof updater === 'function' ? updater(currentSizing) : updater;
+        const newSizing = typeof updater === 'function'
+            ? updater(columnSizing)
+            : updater;
+        setColumnSizing(newSizing);
         if (onColumnSizingChange) {
             setTimeout(() => {
                 onColumnSizingChange(newSizing);
@@ -330,7 +330,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 tableStateChange({ columnSizing: newSizing });
             }, 0);
         }
-    }, [onColumnSizingChange, onDataStateChange, tableStateChange]);
+    }, [onColumnSizingChange, onDataStateChange, tableStateChange, columnSizing]);
     const handlePaginationChange = (0, react_1.useCallback)((updater) => {
         const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
         if (logger.isLevelEnabled('debug')) {
@@ -340,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')) {
@@ -449,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(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 } : {})), (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 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,
@@ -468,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) => {
@@ -1209,7 +1206,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         const row = rows[virtualRow.index];
                         if (!row)
                             return null;
-                        return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, slots: slots, slotProps: slotProps }, row.id));
+                        return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id));
                     }), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
                                 height: `${rowVirtualizer.getTotalSize() -
                                     ((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
@@ -1217,7 +1214,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                                 border: 0,
                             } }) }))] }));
         }
-        return rows.map((row, index) => ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, slots: slots, slotProps: slotProps }, row.id)));
+        return rows.map((row, index) => ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id)));
     }, [
         tableLoading,
         rows,
@@ -1233,6 +1230,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         enableStripes,
         renderSubComponent,
         enableStickyHeaderOrFooter,
+        onRowClick,
+        selectOnRowClick,
         slots,
     ]);
     const handleCancelExport = (0, react_1.useCallback)(() => {

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

@@ -53,6 +53,8 @@ export interface DataTableProps<T> {
         id: string;
     }) => boolean;
     onSelectionChange?: (selection: SelectionState) => void;
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, row: Row<T>) => void;
+    selectOnRowClick?: boolean;
     enableBulkActions?: boolean;
     bulkActions?: (selectionState: SelectionState) => ReactNode;
     enableColumnResizing?: boolean;

package/src/lib/components/toolbar/column-pinning-control.js

@@ -56,7 +56,8 @@ function ColumnPinningControl(props = {}) {
         return column.id;
     };
     const handleUnpinAll = (0, react_1.useCallback)(() => {
-        table.setColumnPinning(table.initialState.columnPinning || {});
+        var _a;
+        table === null || table === void 0 ? void 0 : table.setColumnPinning(((_a = table === null || table === void 0 ? void 0 : table.initialState) === null || _a === void 0 ? void 0 : _a.columnPinning) || {});
     }, [table]);
     const userPinnedLeft = (((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.filter((id) => allColumns.some((column) => column.id === id))) || []);
     const userPinnedRight = (((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.filter((id) => allColumns.some((column) => column.id === id))) || []);

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/column.types.d.ts

@@ -12,6 +12,7 @@ declare module '@tanstack/table-core' {
         align?: 'left' | 'center' | 'right';
         filterable?: boolean;
         hideInExport?: boolean;
+        wrapText?: boolean;
         editComponent?: React.ComponentType<{
             value: any;
             onChange: (value: any) => void;

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;
@@ -69,6 +71,7 @@ export interface PinnedColumnStyleOptions {
     disableStickyHeader?: boolean;
     isLastLeftPinnedColumn?: boolean;
     isFirstRightPinnedColumn?: boolean;
+    wrapText?: boolean;
 }
 export interface SimpleExportOptions {
     filename?: string;

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,58 @@
 import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
 export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions): {
+    backgroundColor: (theme: any) => any;
+    backgroundImage: (theme: any) => string;
     boxShadow: string;
-    backgroundColor: string;
     left?: number;
     right?: number;
     zIndex?: number;
+    whiteSpace: "normal";
+    wordBreak: "break-word";
+    overflow: "visible";
+    textOverflow?: undefined;
+    maxWidth: string | number;
+    minWidth: number;
+    width: string | number;
+} | {
+    backgroundColor: (theme: any) => string;
+    boxShadow: string;
+    left?: number;
+    right?: number;
+    zIndex?: number;
+    whiteSpace: "normal";
+    wordBreak: "break-word";
+    overflow: "visible";
+    textOverflow?: undefined;
+    maxWidth: string | number;
+    minWidth: number;
+    width: string | number;
+} | {
+    backgroundColor: (theme: any) => any;
+    backgroundImage: (theme: any) => string;
+    boxShadow: string;
+    left?: number;
+    right?: number;
+    zIndex?: number;
+    overflow: "hidden";
+    whiteSpace: "nowrap";
+    textOverflow: "ellipsis";
+    wordBreak?: undefined;
+    maxWidth: string | number;
+    minWidth: number;
     width: string | number;
+} | {
+    backgroundColor: (theme: any) => string;
+    boxShadow: string;
+    left?: number;
+    right?: number;
+    zIndex?: number;
+    overflow: "hidden";
+    whiteSpace: "nowrap";
+    textOverflow: "ellipsis";
+    wordBreak?: undefined;
     maxWidth: string | number;
-    overflow: string;
-    whiteSpace: string;
+    minWidth: number;
+    width: string | number;
 };
 export declare const tableCellStyles: {
     readonly sticky: {

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

@@ -3,17 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableRowStyles = exports.tableCellStyles = void 0;
 exports.getPinnedColumnStyle = getPinnedColumnStyle;
 exports.getColumnAlignment = getColumnAlignment;
-const getBoxShadow = (isPinned, isLastLeftPinnedColumn, isFirstRightPinnedColumn) => {
-    if (isPinned === 'left' && isLastLeftPinnedColumn) {
-        return '1px 0 3px rgba(0, 0, 0, 0.12)';
-    }
-    if (isPinned === 'right' && isFirstRightPinnedColumn) {
-        return '-1px 0 3px rgba(0, 0, 0, 0.12)';
-    }
-    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, wrapText = false, } = options;
     const needsPinnedPositioning = isPinned;
     const shouldBeSticky = isPinned;
     let positionStyle = {};
@@ -23,13 +14,31 @@ 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 ? {
+    const textWrappingStyles = wrapText
+        ? {
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+            overflow: 'visible',
+        }
+        : {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+        };
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ width }, (minWidth !== undefined && { minWidth })), (maxWidth !== undefined ? { maxWidth } : { maxWidth: width })), textWrappingStyles), positionStyle), (needsPinnedPositioning ? {
         left: isPinned === 'left' ? pinnedPosition : undefined,
         right: isPinned === 'right' ? pinnedRightPosition : undefined,
         zIndex,
-    } : {})), (isPinned && {
-        backgroundColor: 'background.paper',
-    })), { boxShadow: getBoxShadow(isPinned, !!isLastLeftPinnedColumn, !!isFirstRightPinnedColumn) });
+    } : {})), { 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 }), (isPinned ? {
+        backgroundColor: (theme) => theme.palette.background.paper,
+        backgroundImage: (theme) => `linear-gradient(var(--row-bg, ${theme.palette.background.paper}), var(--row-bg, ${theme.palette.background.paper}))`,
+    } : {
+        backgroundColor: (theme) => `var(--row-bg, ${theme.palette.background.paper})`,
+    }));
 }
 exports.tableCellStyles = {
     sticky: {