@trackunit/react-table 1.3.139 → 1.3.141

package/index.esm.js

@@ -1,17 +1,17 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Tooltip, Popover, PopoverTrigger, PopoverContent, Text, cvaInteractableItem, Card, Spinner, EmptyState } from '@trackunit/react-components';
+import { MenuItem, Icon, Button, useOverflowItems, MoreMenu, MenuList, Spacer, Tooltip, Popover, PopoverTrigger, PopoverContent, cvaInteractableItem, Text, IconButton, Card, Spinner, EmptyState } from '@trackunit/react-components';
 import { objectValues, nonNullable, objectKeys, objectEntries } from '@trackunit/shared-utils';
-import { useMemo, Children, cloneElement, useRef, useEffect, useCallback, useState } from 'react';
+import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback, createElement } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Link } from '@tanstack/react-router';
-import { cvaLabel, ToggleSwitch, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
+import { Search, cvaLabel, ToggleSwitch, RadioGroup, RadioItem, Checkbox } from '@trackunit/react-form-components';
 import update from 'immutability-helper';
 import { DndProvider, useDrop, useDrag } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { flexRender, createColumnHelper, useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
 export { createColumnHelper } from '@tanstack/react-table';
-import { TableRoot, Thead, Tr, Th, SortIndicator, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
+import { TableRoot, Thead, Tr, Th, ResizeHandle, Tbody, Td } from '@trackunit/react-table-base-components';
 import { useInfiniteScroll, noPagination } from '@trackunit/react-table-pagination';
 import { twMerge } from 'tailwind-merge';
 import { SortOrder, validateStringAsAssetSortByProperty } from '@trackunit/react-core-contexts-api';
@@ -19,6 +19,12 @@ import { SortOrder, validateStringAsAssetSortByProperty } from '@trackunit/react
 var defaultTranslations = {
 	"layout.actions.reset": "Reset",
 	"table.actionsheet.selected": "{{count}} selected",
+	"table.columnActions.clearSorting": "Clear sorting",
+	"table.columnActions.hideColumn": "Hide column",
+	"table.columnActions.pinColumn": "Pin column",
+	"table.columnActions.sortAscending": "Sort ascending",
+	"table.columnActions.sortDescending": "Sort descending",
+	"table.columnActions.unPinColumn": "Unpin column",
 	"table.columnFilters.columns": "Columns",
 	"table.columnFilters.hiddenColumnCount": "{{count}} column hidden",
 	"table.columnFilters.hiddenColumnsCount": "{{count}} columns hidden",
@@ -289,8 +295,8 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
     const [t] = useTranslation();
-    const numberOfHiddenColumns = columns.filter(column => !column.getIsVisible()).length;
     const initialSetupRef = useRef(false);
+    const [searchText, setSearchText] = useState("");
     useEffect(() => {
         if (!initialSetupRef.current && defaultColumnOrder.length > 0) {
             setColumnOrder(defaultColumnOrder);
@@ -300,37 +306,35 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     const resetHiddenColumns = useCallback(() => {
         columns.forEach(column => column.toggleVisibility(!column.columnDef.meta?.hiddenByDefault));
         setColumnOrder(defaultColumnOrder);
+        columns.forEach(column => column.pin(column.columnDef.meta?.pinned ?? false));
     }, [columns, defaultColumnOrder, setColumnOrder]);
     const sortedColumns = useMemo(() => {
-        const result = columnOrder && (columnOrder.length || 0) > 0
-            ? columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
-            : columns;
-        return result;
-    }, [columnOrder, columns]);
-    const getColumnButtonText = () => {
-        if (numberOfHiddenColumns > 1) {
-            return t("table.columnFilters.hiddenColumnsCount", { count: numberOfHiddenColumns });
+        let filteredColumns = columns;
+        if (searchText.trim() !== "") {
+            const trimmedSearchText = searchText.trim().toLowerCase();
+            filteredColumns = columns.filter(column => {
+                const label = column.columnDef.meta?.columnFilterLabel ?? column.columnDef.header?.toString() ?? "";
+                return label.toLowerCase().includes(trimmedSearchText);
+            });
         }
-        if (numberOfHiddenColumns === 1) {
-            return t("table.columnFilters.hiddenColumnCount", { count: numberOfHiddenColumns });
-        }
-        return t("table.columnFilters.columns");
-    };
-    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx(Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, defaultColumnOrder: defaultColumnOrder, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
+        return columnOrder && columnOrder.length > 0
+            ? filteredColumns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
+            : filteredColumns;
+    }, [columnOrder, columns, searchText]);
+    const visibleColumnsCount = useMemo(() => {
+        return columns.filter(col => col.getIsVisible()).length;
+    }, [columns]);
+    return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "secondary", children: jsx("span", { className: "hidden md:block", children: t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsx(Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: "Search", value: searchText }), jsx(Button, { onClick: resetHiddenColumns, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
 };
-const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaultColumnOrder, }) => {
+const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
     const [localColumns, setLocalColumns] = useState(columns);
     useEffect(() => {
         setLocalColumns(columns);
     }, [columns]);
     const onColumDrop = useCallback(() => {
-        const firstElement = defaultColumnOrder[0];
-        const firstLocalColumnId = localColumns[0]?.id;
-        const newColumnOrder = firstElement === firstLocalColumnId
-            ? localColumns.map(column => column.id)
-            : [firstElement, ...localColumns.map(column => column.id)].filter((id) => id !== undefined);
+        const newColumnOrder = localColumns.map(column => column.id);
         setColumnOrder(newColumnOrder);
-    }, [localColumns, setColumnOrder, defaultColumnOrder]);
+    }, [localColumns, setColumnOrder]);
     const onCancelColumDrop = useCallback(() => {
         setLocalColumns(columns);
     }, [columns]);
@@ -354,19 +358,20 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
                 (!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
                 return null;
             }
-            return (jsx(ColumnFilterItem, { disabled: !column.getCanHide(), id: column.id, index: index, moveColumn: moveColumn, name: columnDef.meta?.columnFilterLabel ?? columnDef.header?.toString() ?? "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
+            const isVisible = column.getIsVisible();
+            return (jsx(ColumnFilterItem, { disabled: !column.getCanHide() || (isVisible && visibleColumnsCount === 1), id: column.id, index: index, isSortDisabled: isSortDisabled, moveColumn: moveColumn, name: columnDef.meta?.columnFilterLabel ?? columnDef.header?.toString() ?? "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
                     column.getToggleVisibilityHandler()(event);
                     onUserEvent?.("Column Filter", {
                         columnName: column.id,
                         hidden: !toggled,
                     });
-                }, toggled: column.getIsVisible() }, column.id));
+                }, toggled: isVisible }, column.id));
         }) }));
 };
 const ItemTypes = {
     COLUMN: "column",
 };
-const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, }) => {
+const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn, onDrop, onCancelDrop, id, isSortDisabled, }) => {
     const ref = useRef(null);
     const [, drop] = useDrop({
         accept: ItemTypes.COLUMN,
@@ -399,7 +404,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
     const [{ isDragging }, drag] = useDrag({
         type: ItemTypes.COLUMN,
         item: { type: ItemTypes.COLUMN, id, index },
-        canDrag: true,
+        canDrag: !isSortDisabled,
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
         }),
@@ -414,7 +419,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
     return (jsxs("div", { className: cvaInteractableItem({
             selected: false,
             className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2 py-1",
-        }), ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsx(Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxs("label", { className: "grid w-full grid-cols-[1fr,min-content] items-center gap-2", htmlFor: id, children: [jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content] items-center", children: [jsx(Text, { className: cvaLabel(), children: name }), disabled ? jsx(Icon, { name: "LockClosed", size: "small" }) : null] }), jsx(ToggleSwitch, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), showInputFocus: false, size: "small", toggled: toggled })] })] }));
+        }), ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: isSortDisabled }), children: jsx(Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxs("label", { className: "grid w-full grid-cols-[1fr,min-content] items-center gap-2", htmlFor: id, children: [jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content] items-center", children: [jsx(Text, { className: cvaLabel(), children: name }), disabled ? jsx(Icon, { name: "LockClosed", size: "small" }) : null] }), jsx(ToggleSwitch, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), showInputFocus: false, size: "small", toggled: toggled })] })] }));
 };
 
 /**
@@ -431,7 +436,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
             densityChosen: selectedDensity,
         });
     };
-    return (jsx(Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ArrowsPointingOut", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: jsxs("div", { className: "flex flex-col justify-start", children: [jsx(DensitySelection, { icon: jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsx(DensitySelection, { icon: jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
+    return (jsx(Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ArrowsPointingOut", size: "small" }), size: "small", variant: "secondary", children: jsx("span", { className: "hidden md:block", children: t("table.spacing") }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: jsxs("div", { className: "flex flex-col justify-start", children: [jsx(DensitySelection, { icon: jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsx(DensitySelection, { icon: jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
 };
 const DensitySelection = ({ text, onClick, icon, isSelected }) => {
     return (jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsx("div", { className: "mr-1 flex", children: icon }), jsx(Text, { weight: "thick", children: text }), isSelected ? (jsx("div", { className: "justify-endgrow flex", children: jsx(Icon, { name: "Check", size: "small" }) })) : null] }));
@@ -472,6 +477,363 @@ const Sorting = ({ columns, }) => {
     return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUp", size: "small" })) : (jsx(Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsx(RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * This component is used to display a text with a tooltip.
+ * The tooltip is displayed if the text is truncated with ellipsis.
+ * The text is the text to display.
+ * The tooltipLabel is the label to display in the tooltip.
+ */
+const TextWithTooltip = ({ children, tooltipLabel, weight, }) => {
+    const [isTextTruncated, setIsTextTruncated] = useState(false);
+    const textRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    const [hideTooltip, setHideTooltip] = useState(false);
+    const checkIfTruncated = useCallback(() => {
+        if (textRef.current) {
+            const isTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
+            setIsTextTruncated(isTruncated);
+        }
+    }, []);
+    const debouncedCheckTruncation = useCallback(() => {
+        if (debounceTimerRef.current !== null) {
+            window.clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = window.setTimeout(() => {
+            checkIfTruncated();
+            debounceTimerRef.current = null;
+        }, 150);
+    }, [checkIfTruncated]);
+    useEffect(() => {
+        const timeoutId = setTimeout(checkIfTruncated, 0);
+        if (resizeObserverRef.current) {
+            resizeObserverRef.current.disconnect();
+        }
+        resizeObserverRef.current = new ResizeObserver(() => {
+            debouncedCheckTruncation();
+        });
+        if (textRef.current) {
+            resizeObserverRef.current.observe(textRef.current);
+        }
+        window.addEventListener("resize", debouncedCheckTruncation);
+        return () => {
+            clearTimeout(timeoutId);
+            if (debounceTimerRef.current !== null) {
+                window.clearTimeout(debounceTimerRef.current);
+            }
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+            window.removeEventListener("resize", debouncedCheckTruncation);
+        };
+    }, [debouncedCheckTruncation, checkIfTruncated, children]);
+    return tooltipLabel ? (jsx(Tooltip, { disabled: !isTextTruncated || hideTooltip, label: tooltipLabel, placement: "bottom", children: jsx(Text, { className: "truncate", ref: textRef, type: "span", weight: weight, children: children }) })) : (jsx("div", { onMouseDown: () => setHideTooltip(true), onMouseUp: () => setHideTooltip(false), children: jsx(Text, { className: "truncate", ref: textRef, type: "span", weight: weight, children: children }) }));
+};
+
+/**
+ * The `useCellsOffset` hook calculates column offsets for pinned columns ("left" or "right") in a table.
+ *
+ * @template TData The type of the row data in the table.
+ * @param {Header<TData, unknown>[][]} headerGroups - Array of table header groups.
+ * @param {string | null} draggingColumnId - The ID of the column currently being dragged. If null, no dragging is occurring.
+ * @returns {Array<object>} Returns an array of objects containing `leftOffsets` and `rightOffsets` for each header group.
+ */
+const useCellsOffset = (headerGroups, draggingColumnId) => {
+    return useMemo(() => {
+        return headerGroups.map(headers => {
+            const leftOffsets = {};
+            const rightOffsets = {};
+            let left = 0;
+            let right = 0;
+            const rightPinnedCells = headers.filter(cell => cell.column.getIsPinned() === "right");
+            for (let i = rightPinnedCells.length - 1; i >= 0; i--) {
+                const header = rightPinnedCells[i];
+                if (header?.column && header.column.id !== draggingColumnId) {
+                    rightOffsets[header.column.id] = { id: header.column.id, offset: right, pinned: "right" };
+                    right += header.column.getSize();
+                }
+            }
+            headers.forEach(header => {
+                if (header.column.id === draggingColumnId) {
+                    return;
+                }
+                if (header.column.getIsPinned() === "left") {
+                    leftOffsets[header.column.id] = { id: header.column.id, offset: left, pinned: "left" };
+                    left += header.column.getSize();
+                }
+            });
+            return {
+                leftOffsets,
+                rightOffsets,
+            };
+        });
+    }, [headerGroups, draggingColumnId]);
+};
+
+/**
+ * Hook for handling column drag and drop functionality in a table
+ *
+ * @param options - Options including the ReactTable instance and optional callbacks
+ * @returns Object containing drag state and handler functions
+ */
+const useColumnDragDrop = ({ table, }) => {
+    const [draggingColumnId, setDraggingColumnId] = useState(null);
+    const [dropTargetColumnId, setDropTargetColumnId] = useState(null);
+    const [dropPosition, setDropPosition] = useState(null);
+    const [droppedColumnId, setDroppedColumnId] = useState(null);
+    const startDragging = useCallback((columnId) => {
+        setDraggingColumnId(columnId);
+    }, []);
+    const endDragging = useCallback(() => {
+        setDraggingColumnId(null);
+        setDropTargetColumnId(null);
+        setDropPosition(null);
+    }, []);
+    const setDropTarget = useCallback((columnId, position) => {
+        setDropTargetColumnId(columnId);
+        setDropPosition(position);
+    }, []);
+    // Helper function to generate the right positioning for a column move
+    const moveColumn = useCallback((columnOrder, fromId, toId, position) => {
+        const newColumnOrder = [...columnOrder];
+        const fromIndex = newColumnOrder.indexOf(fromId);
+        if (fromIndex !== -1) {
+            // Remove the moving column
+            newColumnOrder.splice(fromIndex, 1);
+            // Calculate the new position
+            let newIndex = newColumnOrder.indexOf(toId);
+            if (position === "right") {
+                newIndex += 1;
+            }
+            // Insert at the new position
+            newColumnOrder.splice(newIndex, 0, fromId);
+        }
+        return newColumnOrder;
+    }, []);
+    const handleDrop = useCallback(() => {
+        if (draggingColumnId && dropTargetColumnId && dropPosition) {
+            // Find the actual column objects
+            const columns = table.getAllColumns();
+            const fromColumn = columns.find(col => col.id === draggingColumnId);
+            const toColumn = columns.find(col => col.id === dropTargetColumnId);
+            if (fromColumn && toColumn) {
+                // Calculate new column order
+                const newColumnOrder = moveColumn(table.getState().columnOrder, draggingColumnId, dropTargetColumnId, dropPosition);
+                // Move the column in the table's column order
+                table.setColumnOrder(newColumnOrder);
+                setDroppedColumnId(draggingColumnId);
+                setTimeout(() => {
+                    setDroppedColumnId(null);
+                }, 800);
+            }
+        }
+        endDragging();
+    }, [draggingColumnId, dropTargetColumnId, dropPosition, endDragging, moveColumn, table]);
+    // Generate header props to apply drag and drop functionality
+    const getHeaderProps = useCallback((headerId, styles) => {
+        const header = table
+            .getHeaderGroups()
+            .flatMap(group => group.headers)
+            .find(h => h.id === headerId);
+        return {
+            className: "", // Don't add dragging-column class here, we'll add it in the Table component
+            "data-column-id": headerId, // Add this attribute for identification
+            style: draggingColumnId !== headerId && header
+                ? {
+                    width: header.getSize(),
+                    minWidth: header.column.columnDef.minSize,
+                    maxWidth: header.column.columnDef.maxSize,
+                    textAlign: header.column.columnDef.meta?.alignment || "left",
+                    flexGrow: header.column.columnDef.meta?.shouldGrow ? 1 : 0,
+                    ...styles,
+                }
+                : undefined,
+            onDragLeave: () => {
+                if (dropTargetColumnId === headerId) {
+                    setDropTarget(null, null);
+                }
+            },
+            onDragOver: (e) => {
+                e.preventDefault();
+                if (draggingColumnId && draggingColumnId !== headerId) {
+                    // Determine drop position based on mouse position
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const mouseX = e.clientX;
+                    const threshold = rect.left + rect.width / 2;
+                    const position = mouseX < threshold ? "left" : "right";
+                    setDropTarget(headerId, position);
+                }
+            },
+            onDrop: (e) => {
+                e.preventDefault();
+                handleDrop();
+            },
+        };
+    }, [draggingColumnId, dropTargetColumnId, handleDrop, setDropTarget, table]);
+    // Generate drag handle props
+    const getDragHandleProps = useCallback((headerId, isPlaceholder, pinned) => ({
+        className: "invisible mr-1 cursor-grab text-gray-400 group-hover:visible",
+        draggable: !pinned && !isPlaceholder,
+        onDragEnd: (e) => {
+            endDragging();
+            e.preventDefault();
+            e.stopPropagation();
+        },
+        onDragStart: (e) => {
+            e.dataTransfer.setData("columnId", headerId);
+            e.dataTransfer.effectAllowed = "move";
+            // Create custom drag ghost element
+            const column = table.getColumn(headerId);
+            if (column) {
+                // Get column header text
+                const headerText = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+                // Create custom drag ghost element
+                const dragGhost = document.createElement("div");
+                dragGhost.className =
+                    "bg-white shadow-md rounded p-3 flex items-center opacity-50 gap-1 border border-gray-300";
+                dragGhost.style.position = "absolute";
+                dragGhost.style.top = "-1000px"; // Position off-screen initially
+                dragGhost.style.zIndex = "9999";
+                dragGhost.style.pointerEvents = "none";
+                // Add minimum width to prevent narrow ghost for short column names
+                dragGhost.style.minWidth = "120px";
+                // Add drag icon with arrows in all directions
+                const iconElement = document.createElement("span");
+                iconElement.innerHTML = `
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 3L2 6L5 9" fill="none"/>
+            <path d="M11 3L14 6L11 9" fill="none"/>
+            <path d="M2 6H14" fill="none"/>
+          </svg>
+
+          `;
+                iconElement.className = "text-gray-500 flex-shrink-0 pl-4 pt-1";
+                iconElement.style.marginRight = "6px";
+                // Add column title
+                const titleElement = document.createElement("span");
+                titleElement.textContent = headerText;
+                titleElement.className = "font-medium text-sm";
+                // Append elements to the drag ghost
+                dragGhost.appendChild(iconElement);
+                dragGhost.appendChild(titleElement);
+                // Append to body temporarily (will be removed after drag)
+                document.body.appendChild(dragGhost);
+                // Set custom drag image
+                e.dataTransfer.setDragImage(dragGhost, 20, 20);
+                // Clean up the ghost element after drag operation completes
+                setTimeout(() => {
+                    document.body.removeChild(dragGhost);
+                }, 0);
+            }
+            startDragging(headerId);
+            e.stopPropagation();
+        },
+    }), [endDragging, startDragging, table]);
+    // Render the drop indicator
+    const renderDropIndicator = useCallback((columnId) => {
+        if (dropTargetColumnId === columnId && dropPosition) {
+            return (jsx("div", { className: "bg-primary-300 absolute bottom-[-2px] top-[-2px] w-[3px]", style: {
+                    height: "calc(100% + 4px)",
+                    overflow: "visible",
+                    // Position to overlay the parent's border
+                    left: dropPosition === "left" ? "-2px" : "auto",
+                    right: dropPosition === "right" ? "-2px" : "auto",
+                    pointerEvents: "none",
+                    zIndex: 100000,
+                    // Add a subtle shadow to help it stand out
+                    boxShadow: "0 0 2px rgba(0, 0, 0, 0.2)",
+                } }));
+        }
+        return null;
+    }, [dropTargetColumnId, dropPosition]);
+    // Check if a cell is a drop target
+    const isCellDropTarget = useCallback((columnId) => dropTargetColumnId === columnId, [dropTargetColumnId]);
+    // Generate cell props to collapse dragged columns
+    const getCellProps = useCallback((columnId, styles) => {
+        // Find a representative cell for this column to get sizing info
+        const column = table.getColumn(columnId);
+        return {
+            className: draggingColumnId === columnId ? "dragging-column" : "",
+            style: draggingColumnId !== columnId && column
+                ? {
+                    width: column.getSize(),
+                    minWidth: column.columnDef.minSize,
+                    maxWidth: column.columnDef.maxSize,
+                    textAlign: column.columnDef.meta?.alignment || "left",
+                    flexGrow: column.columnDef.meta?.shouldGrow ? 1 : 0,
+                    ...styles,
+                }
+                : undefined,
+        };
+    }, [draggingColumnId, table]);
+    return useMemo(() => ({
+        draggingColumnId,
+        dropTargetColumnId,
+        dropPosition,
+        droppedColumnId,
+        getHeaderProps,
+        getDragHandleProps,
+        renderDropIndicator,
+        isCellDropTarget,
+        getCellProps,
+    }), [
+        draggingColumnId,
+        dropTargetColumnId,
+        dropPosition,
+        droppedColumnId,
+        getHeaderProps,
+        getDragHandleProps,
+        renderDropIndicator,
+        isCellDropTarget,
+        getCellProps,
+    ]);
+};
+
+/**
+ * `ColumnActions` component to render column action controls for a table.
+ *
+ * @template TData The type of the table row data.
+ * @param {object} props Component properties.
+ * @param {Header<TData, unknown>} props.header The header of the current column provided by React Table.
+ * @param {number} props.visibleColumnsCount The number of visible columns in the table.
+ */
+const ColumnActions = ({ header, visibleColumnsCount, }) => {
+    const [t] = useTranslation();
+    const isSorted = header.column.getIsSorted();
+    const canSort = header.column.getCanSort();
+    const canHide = header.column.getCanHide();
+    const canPin = header.column.getCanPin();
+    const isPinned = header.column.getIsPinned();
+    const isAnyActionAvailable = canSort || canPin || (canHide && visibleColumnsCount > 1);
+    if (!isAnyActionAvailable) {
+        return null;
+    }
+    return (jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: close => (jsxs(MenuList, { children: [canSort && (isSorted === "desc" || !isSorted) ? (jsx(MenuItem, { label: t("table.columnActions.sortAscending"), onClick: () => header.column.toggleSorting(false), prefix: jsx(Icon, { name: "ArrowUp", size: "medium" }) })) : null, canSort && (isSorted === "asc" || !isSorted) ? (jsx(MenuItem, { label: t("table.columnActions.sortDescending"), onClick: () => header.column.toggleSorting(true), prefix: jsx(Icon, { name: "ArrowDown", size: "medium" }) })) : null, canSort && isSorted ? (jsx(MenuItem, { label: t("table.columnActions.clearSorting"), onClick: () => header.column.clearSorting(), prefix: jsx(Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, canHide && visibleColumnsCount > 1 ? (jsx(MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsx(Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsx(MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
+                        header.column.pin(isPinned ? false : "left");
+                        close();
+                    }, prefix: jsx(Icon, { name: isPinned ? "Unpin" : "Pin", size: "medium" }) })) : null] })) }));
+};
+
+/**
+ * The ColumnSorting is used in the table header to indicate the current sort order of the column.
+ * This is a visual only component and does not handle the sorting logic.
+ *
+ * In most cases, we recommend using the Table Component which already handles sorting indication.
+ * However, if you need to construct a custom table, the Table Base Components can be utilized.
+ *
+ * @param {object} props - Props for the sorting indicator.
+ * @param {boolean} [props.canSort] - Indicates the header sorting ability state (ascending/descending).
+ * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
+ * @returns {ReactElement | null} A React element representing the sorting indicator.
+ */
+const ColumnSorting = ({ canSort, sortingState = false }) => {
+    if (!canSort || !sortingState) {
+        return null;
+    }
+    return (jsx("div", { className: "flex items-center", children: jsx(Icon, { className: "text-blue-600", name: sortingState === "asc" ? "ArrowUp" : "ArrowDown", size: "small" }) }));
+};
+
 /**
  * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
  *
@@ -481,7 +843,7 @@ const Sorting = ({ columns, }) => {
 /**
  *
  */
-const Table = ({ rowHeight = 75, ...props }) => {
+const Table = ({ rowHeight = 50, ...props }) => {
     //we need a reference to the scrolling element for logic down below
     const tableContainerRef = useRef(null);
     const [t] = useTranslation();
@@ -491,23 +853,81 @@ const Table = ({ rowHeight = 75, ...props }) => {
         rowSize: props.getRowModel().rows.length || 0,
         rowHeight,
     });
+    const visibleColumns = useMemo(() => props.getAllColumns().filter(column => column.getIsVisible()), [props]);
+    const visibleColumnsCount = visibleColumns.length;
+    const headerGroups = useMemo(() => props.getHeaderGroups(), [props]);
+    const totalVisibleColumnsWidth = useMemo(() => {
+        return visibleColumns.reduce((sum, column) => sum + column.getSize(), 0);
+    }, [visibleColumns]);
+    const hasAnyGrowingColumn = useMemo(() => {
+        return visibleColumns.some(column => column.columnDef.meta?.shouldGrow === true);
+    }, [visibleColumns]);
+    const [containWholeTable, setContainWholeTable] = useState(false);
+    useEffect(() => {
+        const updateContainWholeTable = () => {
+            if (tableContainerRef.current) {
+                const containerWidth = tableContainerRef.current.offsetWidth;
+                setContainWholeTable(totalVisibleColumnsWidth > containerWidth);
+            }
+        };
+        updateContainWholeTable();
+        window.addEventListener("resize", updateContainWholeTable);
+        return () => {
+            window.removeEventListener("resize", updateContainWholeTable);
+        };
+    }, [totalVisibleColumnsWidth]);
+    const headerOrder = useMemo(() => {
+        return props
+            .getHeaderGroups()
+            .flatMap(group => group.headers)
+            .map(header => header.id);
+    }, [props]);
+    const orderedVisibleColumns = useMemo(() => {
+        return headerOrder.map(headerId => visibleColumns.find(col => col.id === headerId)).filter(Boolean);
+    }, [headerOrder, visibleColumns]);
+    const lastUnpinnedColumnId = useMemo(() => {
+        const unpinnedColumns = orderedVisibleColumns.filter(column => column?.getIsPinned() !== "right");
+        return unpinnedColumns[unpinnedColumns.length - 1]?.id;
+    }, [orderedVisibleColumns]);
+    const isLastUnpinned = useCallback((columnId) => columnId === lastUnpinnedColumnId, [lastUnpinnedColumnId]);
+    // Add our drag and drop hook with enhanced functionality
+    const { getHeaderProps, getDragHandleProps, renderDropIndicator, isCellDropTarget, draggingColumnId, droppedColumnId, getCellProps, } = useColumnDragDrop({
+        table: props,
+    });
+    const offsets = useCellsOffset(headerGroups.map(group => group.headers), draggingColumnId);
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
+    return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
-                    }, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
-                                    const tooltipLabel = header.column.columnDef.meta?.tootipLabel ??
-                                        (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
-                                    return (jsxs(Th, { className: "relative", style: {
-                                            width: header.getSize(),
-                                            minWidth: header.column.columnDef.minSize,
-                                            maxWidth: header.column.columnDef.maxSize,
-                                            textAlign: header.column.columnDef.meta?.alignment || "left",
-                                            flexGrow: header.column.columnDef.meta?.shouldGrow ? 1 : 0,
-                                        }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex pr-3" : "flex"} items-center gap-2 py-2 overflow-hidden w-full`,
-                                                onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.subHeader ? (jsx(Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
-                                }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
+                    }, children: [jsx(Thead, { className: "z-default", children: headerGroups.map((headerGroup, index) => {
+                                return (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
+                                        const tooltipLabel = header.column.columnDef.meta?.tootipLabel ??
+                                            (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
+                                        const canSort = header.column.getCanSort();
+                                        const offsetData = offsets[index]?.leftOffsets[header.id] || offsets[index]?.rightOffsets[header.id];
+                                        const { offset = 0, pinned = "" } = offsetData ?? {};
+                                        const position = pinned === "right" && !containWholeTable && !hasAnyGrowingColumn ? { position: "absolute" } : {};
+                                        return (createElement(Th, { ...getHeaderProps(header.id, {
+                                                [pinned]: offset,
+                                                ...position,
+                                            }), className: cvaTh({
+                                                pinned: pinned || false,
+                                                lastUnpinnedWithoutBorder: isLastUnpinned(header.column.id) && (containWholeTable || hasAnyGrowingColumn),
+                                                isColumnDragging: draggingColumnId === header.id,
+                                                isColumnDropped: droppedColumnId === header.id,
+                                            }), "data-pinned": pinned, key: header.id },
+                                            renderDropIndicator(header.id),
+                                            header.isPlaceholder ? null : (jsxs("div", { ...getDragHandleProps(header.id, header.isPlaceholder, pinned), className: twMerge(cvaColumnHeaderContainer({
+                                                    sortable: canSort,
+                                                })), onClick: header.column.getToggleSortingHandler(), children: [jsxs("div", { className: "flex flex-1 items-center gap-1 truncate", children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
+                                                                        ? header.column.columnDef.meta.subHeader
+                                                                        : null] })) : null, jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.getIsSorted() })] }), jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
+                                                                ? props.renderFilterButton(header.column.columnDef.meta.filterName)
+                                                                : null, jsx(ColumnActions, { header: header, visibleColumnsCount: visibleColumnsCount })] })] })),
+                                            !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
+                                    }) }, headerGroup.id));
+                            }) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
                                 height: `${getTotalSize()}px`,
                                 flexGrow: 1,
                             }, children: getVirtualItems().map((virtualRow, index) => {
@@ -516,14 +936,14 @@ const Table = ({ rowHeight = 75, ...props }) => {
                                     return null;
                                 }
                                 else {
-                                    return (jsx(Tr, { className: cvaInteractableItem({
+                                    return (jsx(Tr, { className: twMerge("group", cvaInteractableItem({
                                             cursor: (!!props.onRowClick || row.getCanSelect()) &&
                                                 props.isRowClickable &&
                                                 props.isRowClickable(row.original)
                                                 ? "pointer"
                                                 : "default",
                                             selected: "auto",
-                                        }), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
+                                        })), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
                                             if (props.onRowClick) {
                                                 props.onRowClick(row);
                                             }
@@ -534,18 +954,32 @@ const Table = ({ rowHeight = 75, ...props }) => {
                                             height: `${virtualRow.size}px`,
                                             transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
                                         }, children: row.getVisibleCells().map(cell => {
-                                            return (jsx(Td, { onClick: event => {
+                                            // Processing the cell identifier:
+                                            // 1. Remove the segment enclosed by "___" (e.g., "___Asset___").
+                                            // 2. Remove the initial segment of the string, including the first "_" (e.g., "25_" or "7fa7655d-3bc2-402b-99dd-5ea1f64c3b96_").
+                                            // The final value will be the key part of the identifier, e.g., "DEVICE_SERIAL_NUMBER".
+                                            const headerId = cell.id.replace(/___[^_]+___/, "").replace(/^[^_]*_/, "");
+                                            const offsetData = offsets[0]?.leftOffsets[headerId] || offsets[0]?.rightOffsets[headerId];
+                                            const { offset = 0, pinned = "" } = offsetData ?? {};
+                                            const position = pinned === "right" && !containWholeTable && !hasAnyGrowingColumn
+                                                ? { position: "absolute", height: "-webkit-fill-available" }
+                                                : {};
+                                            return (createElement(Td, { ...getCellProps(cell.column.id, {
+                                                    [pinned]: offset,
+                                                    ...position,
+                                                }), className: cvaTd({
+                                                    pinned: pinned || false,
+                                                    lastUnpinnedWithoutBorder: isLastUnpinned(cell.column.id) && (containWholeTable || hasAnyGrowingColumn),
+                                                    isColumnDragging: draggingColumnId === cell.column.id,
+                                                    isColumnDropped: droppedColumnId === cell.column.id,
+                                                }), "data-pinned": pinned, key: cell.id, onClick: event => {
                                                     // prevent onRowClick action when clicking on a "selectable" cell with checkbox
                                                     if (props.selectionColId && cell.column.id === props.selectionColId) {
                                                         event.stopPropagation();
                                                     }
-                                                }, style: {
-                                                    width: cell.column.getSize(),
-                                                    minWidth: cell.column.columnDef.minSize,
-                                                    maxWidth: cell.column.columnDef.maxSize,
-                                                    textAlign: cell.column.columnDef.meta?.alignment || "left",
-                                                    flexGrow: cell.column.columnDef.meta?.shouldGrow ? 1 : 0,
-                                                }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
+                                                } },
+                                                isCellDropTarget(cell.column.id) && renderDropIndicator(cell.column.id),
+                                                jsx("div", { className: "grid h-full items-center p-0", children: flexRender(cell.column.columnDef.cell, cell.getContext()) })));
                                         }) }, row.id));
                                 }
                             }) })) : (jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsx("tr", { children: jsx("td", { className: "b-0", children: props.loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t(props.pagination?.pageInfo?.isCountCapped ? "table.pagination.full.capped" : "table.pagination.full", {
@@ -563,6 +997,71 @@ const cvaTBody = cvaMerge(["min-h-[40dvh]"], {
         emptyState: false,
     },
 });
+const cvaColumnHeaderContainer = cvaMerge(["flex", "min-w-0", "w-full", "items-center", "self-center", "gap-2", "overflow-hidden"], {
+    variants: {
+        sortable: {
+            true: "cursor-pointer select-none",
+        },
+    },
+    defaultVariants: {
+        sortable: false,
+    },
+});
+const cvaTh = cvaMerge(["flex", "relative"], {
+    variants: {
+        pinned: {
+            left: "sticky left-0 z-[1] bg-neutral-100",
+            right: "sticky right-0 z-[1] border-r-0 bg-neutral-100",
+            false: "relative",
+        },
+        lastUnpinnedWithoutBorder: {
+            true: "border-r-0",
+            false: "",
+        },
+        isColumnDragging: {
+            true: "dragging-column",
+            false: "",
+        },
+        isColumnDropped: {
+            true: "column-dropped",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        pinned: false,
+        isColumnDragging: false,
+        isColumnDropped: false,
+        lastUnpinnedWithoutBorder: false,
+    },
+});
+const sharedPinnedStyles = "sticky z-[1] group-has-[:checked]:bg-primary-50 group-hover:has-[:checked]:bg-primary-50 group-focus-within:has-[:checked]:bg-primary-50 bg-white group-hover:bg-neutral-100";
+const cvaTd = cvaMerge(["relative"], {
+    variants: {
+        pinned: {
+            left: `${sharedPinnedStyles} left-0`,
+            right: `${sharedPinnedStyles} border-r-0`,
+            false: "",
+        },
+        lastUnpinnedWithoutBorder: {
+            true: "border-r-0",
+            false: "",
+        },
+        isColumnDragging: {
+            true: "dragging-column",
+            false: "",
+        },
+        isColumnDropped: {
+            true: "column-dropped",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        pinned: false,
+        isColumnDragging: false,
+        isColumnDropped: false,
+        lastUnpinnedWithoutBorder: false,
+    },
+});
 
 /**
  * Creates and returns a memoized instance of a columnHelper
@@ -581,11 +1080,13 @@ const useColumnHelper = () => {
  * @returns {TableOptionsProps<TData>} An object containing the React Table instance and associated state management functions.
  */
 const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProps }) => {
+    const stableColumns = useMemo(() => JSON.stringify(columns), [columns]);
     const updatedInitialColumnVisibility = useMemo(() => {
+        const columnsList = JSON.parse(stableColumns);
         const initialStateColumnVisibility = initialState?.columnVisibility;
         const resultFromInitialState = initialStateColumnVisibility
-            ? Object.fromEntries(columns
-                .map(column => {
+            ? Object.fromEntries(columnsList
+                .map((column) => {
                 if (column.id && initialStateColumnVisibility[column.id] !== undefined) {
                     return [column.id, initialStateColumnVisibility[column.id]];
                 }
@@ -593,26 +1094,45 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             })
                 .filter(nonNullable))
             : {};
-        columns.forEach(column => {
+        columnsList.forEach((column) => {
             if (column.id && resultFromInitialState[column.id] === undefined) {
-                resultFromInitialState[column.id] = column.meta?.hiddenByDefault === true ? false : true;
+                resultFromInitialState[column.id] = column.meta?.hiddenByDefault !== true;
             }
         });
         return resultFromInitialState;
-    }, [columns, initialState?.columnVisibility]);
+    }, [stableColumns, initialState?.columnVisibility]);
     const updatedInitialColumnOrder = useMemo(() => {
         const resultFromInitialState = initialState?.columnOrder || [];
-        columns.forEach(column => {
+        JSON.parse(stableColumns).forEach((column) => {
             if (column.id && !resultFromInitialState.includes(column.id)) {
                 resultFromInitialState.push(column.id);
             }
         });
         return resultFromInitialState;
-    }, [columns, initialState?.columnOrder]);
-    const [columnVisibility, setColumnVisibility] = useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility || {});
+    }, [stableColumns, initialState?.columnOrder]);
+    const stableUpdatedInitialColumnPinning = useMemo(() => {
+        const pinningState = { left: [], right: [] };
+        JSON.parse(stableColumns).forEach((column) => {
+            if (column.id) {
+                if (column.meta?.pinned === "left") {
+                    if (pinningState.left) {
+                        pinningState.left.push(column.id);
+                    }
+                }
+                else if (column.meta?.pinned === "right") {
+                    if (pinningState.right) {
+                        pinningState.right.push(column.id);
+                    }
+                }
+            }
+        });
+        return pinningState;
+    }, [stableColumns]);
+    const [columnVisibility, setColumnVisibility] = useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility);
     const [columnOrder, setColumnOrder] = useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
     const [sorting, setSorting] = useState(reactTableProps.state?.sorting || initialState?.sorting || []);
     const [columnSizing, setColumnSizing] = useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
+    const [columnPinning, setColumnPinning] = useState(reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning);
     useEffect(() => {
         if (initialState && objectKeys(initialState).length > 0) {
             setColumnVisibility(updatedInitialColumnVisibility);
@@ -620,19 +1140,34 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             setSorting(initialState.sorting || []);
             setColumnSizing(initialState.columnSizing || {});
         }
-    }, [initialState, updatedInitialColumnOrder, updatedInitialColumnVisibility]);
+    }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
+    useEffect(() => {
+        const mergedLeft = initialState?.columnPinning?.left?.length
+            ? [...initialState.columnPinning.left]
+            : [...(stableUpdatedInitialColumnPinning.left || [])];
+        const mergedRight = initialState?.columnPinning?.right?.length
+            ? [...initialState.columnPinning.right]
+            : [...(stableUpdatedInitialColumnPinning.right || [])];
+        const filteredRight = mergedRight.filter(column => !mergedLeft.includes(column));
+        const mergedPinningState = {
+            left: mergedLeft,
+            right: filteredRight,
+        };
+        setColumnPinning(mergedPinningState);
+    }, [initialState?.columnPinning, stableUpdatedInitialColumnPinning]);
     const state = useMemo(() => {
         return {
             sorting,
             columnVisibility,
             columnOrder,
             columnSizing,
+            columnPinning,
             ...reactTableProps.state,
         };
-    }, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
+    }, [sorting, columnVisibility, columnOrder, columnSizing, columnPinning, reactTableProps.state]);
     const table = useReactTable({
         manualSorting: true,
-        enableSortingRemoval: false,
+        enableSortingRemoval: true,
         columnResizeMode: "onChange",
         getSortedRowModel: getSortedRowModel(),
         getCoreRowModel: getCoreRowModel(),
@@ -653,6 +1188,10 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             setSorting(value);
             reactTableProps.onSortingChange?.(value);
         },
+        onColumnPinningChange: value => {
+            setColumnPinning(value);
+            reactTableProps.onColumnPinningChange?.(value);
+        },
         columns,
         state,
     });
@@ -724,11 +1263,12 @@ const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection
             if (!hasRowSelection) {
                 return null;
             }
-            return (jsx(Checkbox, { className: "ml-4",
+            const isRowSelectionDisabled = !table.options.enableRowSelection || !data.length;
+            return (jsx(Checkbox, { className: "ml-2.5",
                 checked: table.getIsAllRowsSelected(),
                 indeterminate: table.getIsSomeRowsSelected(),
                 onChange: table.getToggleAllRowsSelectedHandler(),
-                disabled: !data.length }));
+                disabled: isRowSelectionDisabled }));
         },
         cell: ({ row, table }) => {
             const hasRowSelection = table.getState().rowSelection !== undefined;
@@ -747,10 +1287,12 @@ const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection
         enableSorting: false,
         enableResizing: false,
         enableHiding: false,
+        enablePinning: false,
         size: 70,
         meta: {
             alignment: "center",
             columnFilterLabel: t("table.selection.label"),
+            pinned: "left",
         },
     }), [columnHelper, data.length, idKey, t]);
     const selectionTableState = useMemo(() => ({ rowSelection }), [rowSelection]);