@tap-payments/os-micro-frontend-shared 0.0.69-sheetview-table-v2 → 0.0.69-sheetview-pin-v1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/SearchButton/styles.d.ts

@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -269,9 +269,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/SourceMergedCell/style.d.ts

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/VirtualTable/PinExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PinExample: React.FC;
+export default PinExample;

package/build/components/VirtualTable/PinExample.js

@@ -0,0 +1,87 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+import VirtualTable from './VirtualTable';
+const testData = Array.from({ length: 50 }, (_, index) => ({
+    id: index + 1,
+    name: `User ${index + 1}`,
+    email: `user${index + 1}@example.com`,
+    department: ['Engineering', 'Marketing', 'Sales', 'HR'][index % 4],
+    salary: 50000 + index * 1000,
+    status: ['Active', 'Inactive'][index % 2],
+    location: ['New York', 'London', 'Tokyo', 'Sydney'][index % 4],
+}));
+const testColumns = [
+    {
+        id: 'id',
+        header: 'ID',
+        width: 80,
+        pinnable: true,
+        align: 'center',
+    },
+    {
+        id: 'name',
+        header: 'Name',
+        width: 150,
+        pinnable: true,
+    },
+    {
+        id: 'email',
+        header: 'Email',
+        width: 200,
+        pinnable: true,
+    },
+    {
+        id: 'department',
+        header: 'Department',
+        width: 120,
+        pinnable: true,
+    },
+    {
+        id: 'salary',
+        header: 'Salary',
+        width: 100,
+        pinnable: true,
+        align: 'right',
+        format: ({ value }) => `$${value === null || value === void 0 ? void 0 : value.toLocaleString()}`,
+    },
+    {
+        id: 'status',
+        header: 'Status',
+        width: 100,
+        pinnable: true,
+    },
+    {
+        id: 'location',
+        header: 'Location',
+        width: 120,
+        pinnable: true,
+    },
+];
+const PinExample = () => {
+    const [pinnedColumns, setPinnedColumns] = useState(new Set(['id']));
+    const handleColumnPin = (columnId, isPinned) => {
+        console.log('%cPinExample.handleColumnPin TRIGGERED!', 'color: green; font-weight: bold;', { columnId, isPinned });
+        setPinnedColumns((prev) => {
+            const newSet = new Set(prev);
+            if (isPinned) {
+                newSet.add(columnId);
+            }
+            else {
+                newSet.delete(columnId);
+            }
+            return newSet;
+        });
+    };
+    return (_jsxs(Box, Object.assign({ sx: { padding: 2, border: '3px solid red', margin: 2, backgroundColor: '#fff5f5' } }, { children: [_jsx(Typography, Object.assign({ variant: "h5", gutterBottom: true, sx: { color: 'red', fontWeight: 'bold' } }, { children: "PINNING TEST COMPONENT" })), _jsx(Typography, Object.assign({ variant: "body1", sx: { mb: 2 } }, { children: "If you see this component, the `onColumnPin` callback should be working. Check the console for logs." })), _jsxs(Typography, Object.assign({ variant: "body2", color: "text.secondary", sx: { mb: 2 } }, { children: ["Currently Pinned: ", _jsx("strong", { children: Array.from(pinnedColumns).join(', ') || 'None' })] })), _jsx(Box, Object.assign({ sx: { height: 600, width: '100%' } }, { children: _jsx(VirtualTable, { columns: testColumns, rows: testData, pinnedColumns: pinnedColumns, onColumnPin: handleColumnPin, showHeader: true, error: null, triggerDataRefetch: () => __awaiter(void 0, void 0, void 0, function* () { }), showBackgroundColor: false }) }))] })));
+};
+export default PinExample;

package/build/components/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable(props: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTable/VirtualTable.js

@@ -13,7 +13,7 @@ import { useTheme } from '@mui/material/styles';
 import memoize from 'memoize-one';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import InfiniteLoader from 'react-window-infinite-loader';
-import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../constants/index.js';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../constants/index.js';
 import { useDelayToSetValue } from '../../hooks/index.js';
 import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../utils/index.js';
 import TableFooter from './components/TableFooter/TableFooter';
@@ -22,7 +22,7 @@ import TableLastItem from './components/TableLastItem';
 import TableNoData from './components/TableNoData';
 import ListItemWrapper from './components/virtualScroll/ListItemWrapper';
 import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from './style';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isSheetView) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, pinnedColumns) => ({
     columns,
     isLoading,
     rows,
@@ -32,11 +32,30 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     lastItemIndex,
     isError,
     areAllRowsLoaded,
-    isSheetView,
+    pinnedColumns,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
+function VirtualTable(props) {
     var _a;
+    const { columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, pinnedColumns: controlledPinnedColumns, onColumnPin: onColumnPinProp, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, } = props;
     const theme = useTheme();
+    const [uncontrolledPinnedColumns, setUncontrolledPinnedColumns] = useState(new Set());
+    const isControlled = controlledPinnedColumns !== undefined;
+    const pinnedColumns = isControlled ? controlledPinnedColumns : uncontrolledPinnedColumns;
+    const handleColumnPin = (columnId, isPinned) => {
+        if (!isControlled) {
+            setUncontrolledPinnedColumns((prev) => {
+                const newSet = new Set(prev);
+                if (isPinned) {
+                    newSet.add(columnId);
+                }
+                else {
+                    newSet.delete(columnId);
+                }
+                return newSet;
+            });
+        }
+        onColumnPinProp === null || onColumnPinProp === void 0 ? void 0 : onColumnPinProp(columnId, isPinned);
+    };
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
@@ -55,8 +74,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
     const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
-    const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, isSheetView);
-    const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
+    const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, pinnedColumns);
     const renderTableContainer = useMemo(() => {
         const setBackdropVisibility = (isVisible) => {
             setShowBackdrop(isVisible);
@@ -66,7 +84,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView }, { children: ListItemWrapper }))) }))) })));
+        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => TABLE_ROW_HEIGHT, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapper }))) }))) })));
     }, [
         orderedColumns,
         error,
@@ -83,12 +101,13 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
         areAllRowsLoaded,
         areTotalRowsNotFillingHeight,
         itemsCount,
-        tableRowHeight,
+        pinnedColumns,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: isSheetView, "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    const hasPinnableColumns = useMemo(() => columns.some((c) => c.pinnable), [columns]);
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: isSheetView, "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumns, onColumnPin: hasPinnableColumns ? handleColumnPin : undefined })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                         width: '100%',
                                         minWidth: 'fit-content',
-                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(VirtualTable);

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -50,7 +50,7 @@ function ColumnFilter(filter) {
         }
         return null;
     }, [open, filter, anchorEl, setAnchorEl]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'inline-block', marginTop: 'auto' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
                                 filter.onClear(filterApiKeys);
                             } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { marginInlineStart: '8px', cursor: 'pointer' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
                         zIndex: 9999,

package/build/components/VirtualTable/components/TableHeader.d.ts

@@ -8,6 +8,9 @@ export declare const actionsIcons: {
 };
 export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const PinIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 interface StyledHeaderProps {
     showBackDrop: boolean;
 }
@@ -19,9 +22,10 @@ interface TableHeaderProps {
     headerProps?: TableHeadProps;
     columnsSorting?: IVirtualTable['columnsSorting'];
     onColumnSort?: IVirtualTable['onColumnSort'];
+    pinnedColumns?: IVirtualTable['pinnedColumns'];
+    onColumnPin?: IVirtualTable['onColumnPin'];
     showBackDrop: boolean;
-    isSheetView?: boolean;
 }
-declare function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader(props: Readonly<TableHeaderProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableHeader>;
 export default _default;

package/build/components/VirtualTable/components/TableHeader.js

@@ -4,7 +4,7 @@ import { Box, styled, useTheme } from '@mui/material';
 import TableHead from '@mui/material/TableHead';
 import MUITableRow from '@mui/material/TableRow';
 import Dropdown from '../../DropdownMenu';
-import { columnIcon, disputeIcon, flagIcon, refundInitiatedIcon, sortAzIcon, sortZaIcon } from '../../../constants/index.js';
+import { columnIcon, disputeIcon, flagIcon, refundInitiatedIcon, sortAzIcon, sortZaIcon, pinIcon, unpinIcon } from '../../../constants/index.js';
 import ColumnFilter from './ColumnFilter';
 import { StyledCell } from '../style';
 export const actionsIcons = {
@@ -21,6 +21,19 @@ export const ColumnIcon = styled('img')(() => ({
     height: '6.4px',
     cursor: 'pointer',
 }));
+export const PinIcon = styled('img')(({ isPinned }) => ({
+    width: '12px',
+    height: '12px',
+    cursor: 'pointer',
+    opacity: isPinned ? 1 : 0.6,
+    transform: isPinned ? 'scale(1.1)' : 'scale(1)',
+    transition: 'all 0.2s ease',
+    filter: isPinned ? 'brightness(1.2)' : 'brightness(1)',
+    '&:hover': {
+        opacity: 1,
+        transform: 'scale(1.1)',
+    },
+}));
 export const StyledHeader = styled(TableHead, {
     shouldForwardProp: (prop) => prop !== 'showBackDrop',
 })(({ showBackDrop, theme }) => ({
@@ -31,19 +44,30 @@ export const StyledHeader = styled(TableHead, {
     backgroundColor: theme.palette.background.default,
     zIndex: 1,
 }));
-const StyledMUITableRow = styled(MUITableRow, {
-    shouldForwardProp: (prop) => prop !== 'isSheetView',
-})(({ theme, isSheetView }) => (Object.assign({ display: 'flex', justifyContent: 'flex-start', width: '100%', minWidth: 'fit-content', paddingInline: '32px', paddingBlock: '16px' }, (isSheetView && {
-    height: '28px',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    backgroundColor: theme.palette.primary.light,
-    paddingInline: 0,
-    paddingBlock: 0,
-}))));
-function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }) {
+const StyledMUITableRow = styled(MUITableRow)({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    paddingInline: '32px',
+    paddingBlock: '16px',
+    width: '100%',
+    minWidth: 'fit-content',
+});
+function TableHeader(props) {
+    const { columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin } = props;
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const theme = useTheme();
+    console.log('--- TableHeader ---', {
+        onColumnPinExists: !!onColumnPin,
+        onColumnPinType: typeof onColumnPin,
+    });
+    console.log('TableHeader rendered with:', {
+        columnsCount: columns.length,
+        pinnedColumnsCount: (pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.size) || 0,
+        pinnedColumnIds: Array.from(pinnedColumns || []),
+        onColumnPinExists: !!onColumnPin,
+        pinnableColumns: columns.filter((col) => col.pinnable).map((col) => col.id),
+    });
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
@@ -58,11 +82,65 @@ function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columns
             handleClose();
         }
     };
-    return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "VirtualTable_TableHeader_StyledMUITableRow", isSheetView: isSheetView }, { children: columns.map((column, colIndex) => {
-                    const { header, id, align, headerStyle, sortable, filter } = column;
+    const handlePinToggle = (columnId) => {
+        const isPinned = (pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.has(columnId)) || false;
+        if (onColumnPin) {
+            onColumnPin(columnId, !isPinned);
+        }
+        else {
+            console.error('onColumnPin callback is not provided!');
+        }
+    };
+    const calculateLeftPosition = (columnIndex) => {
+        let left = 0;
+        for (let i = 0; i < columnIndex; i++) {
+            const column = columns[i];
+            if (pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.has(column.id)) {
+                const width = typeof column.width === 'string' ? parseInt(column.width) : column.width || 200;
+                left += width;
+            }
+        }
+        return left;
+    };
+    return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "VirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
+                    const { header, id, align, headerStyle, sortable, filter, pinnable } = column;
                     const isFirst = id === columns[0].id;
                     const isLast = id === columns[columns.length - 1].id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
+                    const isPinned = (pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.has(id)) || false;
+                    const leftPosition = isPinned ? calculateLeftPosition(colIndex) : undefined;
+                    console.log('Rendering column:', id, 'isPinned:', isPinned, 'pinnedColumns size:', pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.size);
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'baseline', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', position: isPinned ? 'sticky' : 'static', left: leftPosition, zIndex: isPinned ? 15 : 1, backgroundColor: isPinned ? theme.palette.background.paper : 'transparent', borderRight: isPinned ? `1px solid ${theme.palette.divider}` : 'none', boxShadow: isPinned ? theme.shadows[4] : 'none', '&::after': isPinned
+                                ? {
+                                    content: '""',
+                                    position: 'absolute',
+                                    right: -1,
+                                    top: 0,
+                                    bottom: 0,
+                                    width: '4px',
+                                    background: `linear-gradient(90deg, rgba(0,0,0,0.1) 0%, transparent 100%)`,
+                                    pointerEvents: 'none',
+                                }
+                                : {} }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), pinnable && (_jsx(Box, Object.assign({ component: "div", onClick: (e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    console.log('🔥 Pin wrapper clicked for column:', id, 'isPinned:', isPinned);
+                                    handlePinToggle(id);
+                                }, sx: {
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    padding: '2px',
+                                    borderRadius: '2px',
+                                    '&:hover': {
+                                        backgroundColor: 'rgba(0,0,0,0.1)',
+                                    },
+                                } }, { children: _jsx(PinIcon, { src: isPinned ? unpinIcon : pinIcon, alt: isPinned ? 'unpin-column' : 'pin-column', isPinned: isPinned, "data-testid": "VirtualTable_TableHeader_PinIcon", title: isPinned ? 'Unpin column' : 'Pin column', onError: (e) => {
+                                        console.warn('Pin icon failed to load, using fallback');
+                                        const target = e.target;
+                                        target.src =
+                                            'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjNjY2IiByeD0iMiIvPgo8L3N2Zz4K';
+                                    } }) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
                 }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
                     {
                         label: 'Sort A-Z',

package/build/components/VirtualTable/components/TableRow.d.ts

@@ -5,13 +5,13 @@ interface ITableRowProps<R = any> {
     row: R;
     columns: Array<IColumnProps<R>>;
     index: number;
+    pinnedColumns?: Set<string>;
     rowProps?: TableRowProps & {
         showShadowHighlight?: boolean;
         onRowClick?: (row: R) => void;
         showLoadedStyle?: boolean;
     };
-    isSheetView?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, pinnedColumns, rowProps }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
 export default _default;

package/build/components/VirtualTable/components/TableRow.js

@@ -1,9 +1,22 @@
 import { createElement as _createElement } from "react";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
+import { useTheme } from '@mui/material/styles';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from '../style';
-function TableRow({ row, columns, index, rowProps, isSheetView }) {
+function TableRow({ row, columns, index, pinnedColumns, rowProps }) {
+    const theme = useTheme();
+    const calculateLeftPosition = (columnIndex) => {
+        let left = 0;
+        for (let i = 0; i < columnIndex; i++) {
+            const column = columns[i];
+            if (pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.has(column.id)) {
+                const width = typeof column.width === 'string' ? parseInt(column.width) : column.width || 200;
+                left += width;
+            }
+        }
+        return left;
+    };
     const renderCell = (column) => {
         const { render, format, selector } = column;
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
@@ -13,8 +26,21 @@ function TableRow({ row, columns, index, rowProps, isSheetView }) {
         return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
-            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
-        }) })), [columns, row]);
-    return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
+            const isPinned = (pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.has(column.id)) || false;
+            const leftPosition = isPinned ? calculateLeftPosition(colIndex) : undefined;
+            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', position: isPinned ? 'sticky' : 'static', left: leftPosition, zIndex: isPinned ? 14 : 1, backgroundColor: isPinned ? theme.palette.background.paper : 'transparent', borderRight: isPinned ? `1px solid ${theme.palette.divider}` : 'none', boxShadow: isPinned ? theme.shadows[3] : 'none', '&::after': isPinned
+                        ? {
+                            content: '""',
+                            position: 'absolute',
+                            right: -1,
+                            top: 0,
+                            bottom: 0,
+                            width: '4px',
+                            background: `linear-gradient(90deg, rgba(0,0,0,0.08) 0%, transparent 100%)`,
+                            pointerEvents: 'none',
+                        }
+                        : {} }, column.cellStyle) }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
+        }) })), [columns, row, pinnedColumns, theme]);
+    return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index }), content));
 }
 export default memo(TableRow, areEqual);

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.d.ts

@@ -6,5 +6,5 @@ export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow }
 export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, pinnedColumns, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
 export default ListItemWrapper;

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js

@@ -14,7 +14,7 @@ import React from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
+import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
 import { ActionIcon } from '../../style';
 import { RowErrorState } from '../RowErrorState';
 import { StyledParagraph } from '../TableLastItem';
@@ -44,7 +44,7 @@ export const StyledItemWrapper = styled('div', {
     height: '100%',
 }));
 function ListItemWrapper(_a) {
-    var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView"]);
+    var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, pinnedColumns } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "pinnedColumns"]);
     const lastItemIndex = rows.length - 1;
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
@@ -56,7 +56,7 @@ function ListItemWrapper(_a) {
         const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isLastRow) {
             return (_jsx(Box, Object.assign({ sx: {
-                    height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
+                    height: TABLE_ROW_HEIGHT,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -69,8 +69,8 @@ function ListItemWrapper(_a) {
                         height: '100%',
                     } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
         }
-        return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
-    }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
+        return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, pinnedColumns: pinnedColumns }, `row-${index}`);
+    }, [restData, index, row, columns, memoizedRowProps, pinnedColumns]);
     return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
 }
 export default ListItemWrapper;

package/build/components/VirtualTable/index.d.ts

@@ -1,5 +1,7 @@
 import VirtualTable from './VirtualTable';
+export { default as VirtualTable } from './VirtualTable';
 export { default as VirtualTableWithCard } from './VirtualTableWithCard';
+export { default as PinExample } from './PinExample';
 export * from './components';
 export { StyledCell } from './style';
 export default VirtualTable;

package/build/components/VirtualTable/index.js

@@ -1,5 +1,7 @@
 import VirtualTable from './VirtualTable';
+export { default as VirtualTable } from './VirtualTable';
 export { default as VirtualTableWithCard } from './VirtualTableWithCard';
+export { default as PinExample } from './PinExample';
 export * from './components';
 export { StyledCell } from './style';
 export default VirtualTable;

package/build/components/VirtualTable/style.d.ts

@@ -17,11 +17,9 @@ export declare const StyledSolidBackground: import("@emotion/styled").StyledComp
 export declare const StyledCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     isLast: boolean;
     isFirst: boolean;
-    isSheetView?: boolean | undefined;
 }, {}, {}>;
 interface StyledVirtualListProps {
     areTotalRowsNotFillingHeight: boolean;
-    isSheetView?: boolean;
 }
 export declare const StyledVirtualList: import("@emotion/styled").StyledComponent<import("react-window").VariableSizeListProps<any> & {
     setBackdropVisibility: (isVisible: boolean) => void;
@@ -32,7 +30,6 @@ export declare const StyledTableRow: import("@emotion/styled").StyledComponent<i
 }, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
     showLoadedStyle?: boolean | undefined;
-    isSheetView?: boolean | undefined;
 }, {}, {}>;
 export declare const StyledTableBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
@@ -303,9 +300,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/VirtualTable/style.js

@@ -29,18 +29,30 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
 }));
 export const StyledCell = styled(TableCell, {
-    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
-})(({ theme, isLast, isFirst, isSheetView }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: theme.palette.grey[700], fontSize: theme.typography.caption.fontSize, height: '100%', fontWeight: theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
-    borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
-}))));
+    shouldForwardProp: (prop) => prop !== 'isLast' && prop !== 'isFirst',
+})(({ theme, isLast, isFirst }) => ({
+    paddingBlock: '0',
+    paddingInline: '0.3875rem !important',
+    paddingLeft: isFirst ? '0 !important' : '0.3875rem !important',
+    paddingRight: isLast ? '0 !important' : '0.3875rem !important',
+    color: theme.palette.grey[700],
+    fontSize: theme.typography.caption.fontSize,
+    height: '100%',
+    fontWeight: theme.typography.fontWeightRegular,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'flex',
+    alignItems: 'center',
+}));
 export const StyledVirtualList = styled(VirtualScrollList, {
-    shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
-})(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
-    backgroundColor: theme.palette.common.white,
-}))));
+    shouldForwardProp: (prop) => prop !== 'areTotalRowsNotFillingHeight',
+})(({ theme, areTotalRowsNotFillingHeight }) => ({
+    backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default,
+}));
 export const StyledTableRow = styled(MUITableRow, {
-    shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'].includes(props),
-})(({ theme, showShadowHighlight, showLoadedStyle, isSheetView }) => (Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
+    shouldForwardProp: (props) => props !== 'showShadowHighlight' && props !== 'showLoadedStyle',
+})(({ theme, showShadowHighlight, showLoadedStyle }) => (Object.assign(Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, paddingInline: '32px', position: 'relative', height: '100%', width: '100%', '&:hover': {
         boxShadow: theme.shadows[12],
         zIndex: 1,
         '.payment-sources-container': {
@@ -77,7 +89,7 @@ export const StyledTableRow = styled(MUITableRow, {
         position: 'absolute',
         left: 0,
     },
-}))))));
+}))));
 export const StyledTableBox = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView',
 })(({ theme, showBackgroundColor, showNoDataView }) => ({

package/build/constants/assets.d.ts

@@ -15,6 +15,8 @@ export declare const flagIcon: string;
 export declare const disputeIcon: string;
 export declare const timezoneIcon: string;
 export declare const greyTimezoneIcon: string;
+export declare const pinIcon: string;
+export declare const unpinIcon: string;
 export declare const subscriptionIcon: string;
 export declare const savedCardIcon: string;
 export declare const egyptFlagIcon: string;

package/build/constants/assets.js

@@ -16,6 +16,8 @@ export const flagIcon = `${lightUrl}/flag.svg`;
 export const disputeIcon = `${lightUrl}/dispute.svg`;
 export const timezoneIcon = `${lightUrl}/timezone.svg`;
 export const greyTimezoneIcon = `${lightUrl}/greyTimezone.svg`;
+export const pinIcon = `${lightUrl}/pin.svg`;
+export const unpinIcon = `${lightUrl}/unpin.svg`;
 export const subscriptionIcon = `${lightUrl}/subscription.svg`;
 export const savedCardIcon = `${lightUrl}/savedCard.svg`;
 export const egyptFlagIcon = `${lightUrl}/egypt.svg`;

package/build/constants/table.d.ts

@@ -3,4 +3,3 @@ export declare const TABLE_CONTENT_ROW_HEIGHT = 70;
 export declare const TABLE_ROW_HEIGHT = 57;
 export declare const TABLE_THRESHOLD = 200;
 export declare const TABLE_LIST_OVER_SCAN = 5;
-export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;

package/build/constants/table.js

@@ -3,4 +3,3 @@ export const TABLE_CONTENT_ROW_HEIGHT = 70;
 export const TABLE_ROW_HEIGHT = 57;
 export const TABLE_THRESHOLD = 200;
 export const TABLE_LIST_OVER_SCAN = 5;
-export const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;

package/build/types/table.d.ts

@@ -33,6 +33,7 @@ export interface IColumnProps<R = any> {
     cellStyle?: React.CSSProperties;
     headerStyle?: React.CSSProperties;
     filter?: IColumnFilter;
+    pinnable?: boolean;
 }
 export interface TableFooterProps extends BoxProps {
     totalCount?: number;
@@ -107,6 +108,8 @@ export interface IVirtualTable<R = any> {
     error: Error | null;
     columnsSorting?: Record<keyof R, 'asc' | 'desc'>;
     onColumnSort?: (columnsSorting: Record<string, SortingOrder>) => void;
+    pinnedColumns?: Set<string>;
+    onColumnPin?: (columnId: string, isPinned: boolean) => void;
     loadMoreItems?: () => Promise<unknown>;
     triggerDataRefetch: () => Promise<unknown>;
     scrollToIndex?: number;

package/package.json

@@ -1,129 +1,129 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.69-sheetview-table-v2",
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^6.14.2",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.0.69-sheetview-pin-v1",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^6.14.2",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  }
+}