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

package/package.json

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

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

@@ -185,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,
@@ -200,9 +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.d.ts

@@ -14,4 +14,3 @@ 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,10 +1,8 @@
 "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");
@@ -24,21 +22,18 @@ function TableHeader(props) {
         sx: containerSx,
     }, headerSlotProps, otherProps);
     const mergedHeaderRowProps = (0, slot_helpers_1.mergeSlotProps)({}, headerRowSlotProps, headerRowProps || {});
-    const renderHeaderCell = (0, react_1.useCallback)((header) => {
+    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 minSize = header.column.columnDef.minSize;
-        const maxSize = header.column.columnDef.maxSize;
-        const columnSize = enableColumnResizing ? header.getSize() : (fitToScreen ? 'auto' : header.getSize());
+        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)({
-                width: columnSize,
-                minWidth: minSize !== undefined ? minSize : undefined,
-                maxWidth: maxSize !== undefined ? maxSize : undefined,
+                width: (fitToScreen && !enableColumnResizing) ? 'auto' : header.getSize(),
                 isPinned,
                 pinnedPosition,
                 isLastLeftPinnedColumn: isPinned === 'left' && header.column.getIsLastColumn('left'),
@@ -46,6 +41,7 @@ function TableHeader(props) {
                 pinnedRightPosition,
                 zIndex: isPinned ? 10 : 1,
                 disableStickyHeader: enableStickyHeader,
+                wrapText,
             })),
         }, headerCellSlotProps, headerCellProps || {});
         const mergedResizeHandleProps = (0, slot_helpers_1.mergeSlotProps)({
@@ -56,20 +52,6 @@ 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));
-    }, [
-        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))) })));
+    };
+    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))) })));
 }
-exports.TableHeaderMemo = react_1.default.memo(TableHeader);

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,36 +7,56 @@ 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: (theme) => (Object.assign(Object.assign(Object.assign({ '--row-bg': enableStripes && isOdd
+        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': (0, material_1.alpha)(theme.palette.primary.dark, 0.08),
+                '--row-bg': theme.palette.action.selected,
                 backgroundColor: 'var(--row-bg)',
-            } }), containerSx)),
+            } }), ((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;
+                    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)({
@@ -50,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;
@@ -540,7 +540,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 table.toggleAllColumnsVisible(false);
             },
             resetColumnVisibility: () => {
-                table.resetColumnVisibility();
+                const initialVisibility = initialStateConfig.columnVisibility || {};
+                table.setColumnVisibility(initialVisibility);
+                handleColumnVisibilityChange(initialVisibility);
             },
         },
         columnOrdering: {
@@ -568,6 +570,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     return `column_${index}`;
                 });
                 table.setColumnOrder(initialOrder);
+                handleColumnOrderChange(initialOrder);
             },
         },
         columnPinning: {
@@ -582,7 +585,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 const currentPinning = table.getState().columnPinning;
                 const newPinning = Object.assign({}, currentPinning);
                 newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
-                newPinning.right = [...(newPinning.right || []).filter(id => id !== columnId), columnId];
+                newPinning.right = [columnId, ...(newPinning.right || []).filter(id => id !== columnId)];
                 table.setColumnPinning(newPinning);
             },
             unpinColumn: (columnId) => {
@@ -597,7 +600,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 table.setColumnPinning(pinning);
             },
             resetColumnPinning: () => {
-                table.setColumnPinning(initialStateConfig.columnPinning || { left: [], right: [] });
+                const initialPinning = initialStateConfig.columnPinning || { left: [], right: [] };
+                table.setColumnPinning(initialPinning);
+                handleColumnPinningChange(initialPinning);
             },
         },
         columnResizing: {
@@ -610,10 +615,14 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.resetSize();
             },
             autoSizeAllColumns: () => {
-                table.resetColumnSizing();
+                const initialSizing = initialStateConfig.columnSizing || {};
+                table.setColumnSizing(initialSizing);
+                handleColumnSizingChange(initialSizing);
             },
             resetColumnSizing: () => {
-                table.resetColumnSizing();
+                const initialSizing = initialStateConfig.columnSizing || {};
+                table.setColumnSizing(initialSizing);
+                handleColumnSizingChange(initialSizing);
             },
         },
         filtering: {
@@ -700,10 +709,13 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 }
             },
             clearSorting: () => {
-                table.resetSorting();
+                table.setSorting([]);
+                handleSortingChange([]);
             },
             resetSorting: () => {
-                table.setSorting(initialStateConfig.sorting || []);
+                const initialSorting = initialStateConfig.sorting || [];
+                table.setSorting(initialSorting);
+                handleSortingChange(initialSorting);
             },
         },
         pagination: {
@@ -747,7 +759,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 }
             },
             resetPagination: () => {
-                table.setPagination(initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 });
+                const initialPagination = initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 };
+                table.setPagination(initialPagination);
+                handlePaginationChange(initialPagination);
             },
         },
         selection: {
@@ -1206,7 +1220,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`,
@@ -1214,7 +1228,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,
@@ -1230,6 +1244,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

@@ -37,7 +37,7 @@ function ColumnPinningControl(props = {}) {
             newPinning.left = [...(newPinning.left || []), columnId];
         }
         else if (position === 'right') {
-            newPinning.right = [...(newPinning.right || []), columnId];
+            newPinning.right = [columnId, ...(newPinning.right || [])];
         }
         table === null || table === void 0 ? void 0 : table.setColumnPinning(newPinning);
     };
@@ -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/components/toolbar/column-reset-control.js

@@ -13,7 +13,6 @@ function ColumnResetControl(props = {}) {
     const handleResetLayout = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const actions = props.resetActions || ['columnOrder', 'columnPinning', 'columnSizing'];
-        console.log('actions', actions);
         if (!(apiRef === null || apiRef === void 0 ? void 0 : apiRef.current))
             return;
         if (actions.includes('columnOrder')) {

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

@@ -71,6 +71,7 @@ export interface PinnedColumnStyleOptions {
     disableStickyHeader?: boolean;
     isLastLeftPinnedColumn?: boolean;
     isFirstRightPinnedColumn?: boolean;
+    wrapText?: boolean;
 }
 export interface SimpleExportOptions {
     filename?: string;

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

@@ -1,17 +1,56 @@
 import type { DataTableColumn, PinnedColumnStyleOptions } from '../types';
 export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions): {
-    backgroundColor: string;
-    backgroundClip: string;
+    backgroundColor: (theme: any) => any;
+    backgroundImage: (theme: any) => string;
     boxShadow: string;
-    willChange: string;
-    transform: string;
     left?: number;
     right?: number;
     zIndex?: number;
-    overflow: string;
-    whiteSpace: string;
-    textOverflow: string;
-    maxWidth?: string | 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;
     minWidth: number;
     width: string | number;
 };

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

@@ -3,19 +3,10 @@ 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', minWidth, maxWidth, 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;
+    const shouldBeSticky = isPinned;
     let positionStyle = {};
     if (shouldBeSticky) {
         positionStyle = { position: 'sticky' };
@@ -23,15 +14,31 @@ function getPinnedColumnStyle(options) {
     else if (!disableStickyHeader) {
         positionStyle = { position: 'relative' };
     }
-    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 ? {
+    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,
-    } : {})), { 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)'
+    } : {})), { 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), -6px 0 6px -4px rgba(0,0,0,.18)'
-                : undefined, willChange: 'transform', transform: 'translateZ(0)' });
+                ? 'inset 1px 0 0 var(--palette-TableCell-border), -1px 0 2px -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: {