@trackunit/react-table 1.3.139 → 1.3.141

package/index.cjs.js

@@ -20,6 +20,12 @@ var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
 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",
@@ -290,8 +296,8 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
     const [t] = useTranslation();
-    const numberOfHiddenColumns = columns.filter(column => !column.getIsVisible()).length;
     const initialSetupRef = react.useRef(false);
+    const [searchText, setSearchText] = react.useState("");
     react.useEffect(() => {
         if (!initialSetupRef.current && defaultColumnOrder.length > 0) {
             setColumnOrder(defaultColumnOrder);
@@ -301,37 +307,35 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
     const resetHiddenColumns = react.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 = react.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 (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.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 = react.useMemo(() => {
+        return columns.filter(col => col.getIsVisible()).length;
+    }, [columns]);
+    return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "secondary", children: jsxRuntime.jsx("span", { className: "hidden md:block", children: t("table.columnFilters.columns") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: "Search", value: searchText }), jsxRuntime.jsx(reactComponents.Button, { onClick: resetHiddenColumns, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.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] = react.useState(columns);
     react.useEffect(() => {
         setLocalColumns(columns);
     }, [columns]);
     const onColumDrop = react.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 = react.useCallback(() => {
         setLocalColumns(columns);
     }, [columns]);
@@ -355,19 +359,20 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, defaul
                 (!columnDef.header || columnDef.header.length === 0 || typeof columnDef.header === "function")) {
                 return null;
             }
-            return (jsxRuntime.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 (jsxRuntime.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 = react.useRef(null);
     const [, drop] = reactDnd.useDrop({
         accept: ItemTypes.COLUMN,
@@ -400,7 +405,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
     const [{ isDragging }, drag] = reactDnd.useDrag({
         type: ItemTypes.COLUMN,
         item: { type: ItemTypes.COLUMN, id, index },
-        canDrag: true,
+        canDrag: !isSortDisabled,
         collect: (monitor) => ({
             isDragging: monitor.isDragging(),
         }),
@@ -415,7 +420,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
     return (jsxRuntime.jsxs("div", { className: reactComponents.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: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsxRuntime.jsx(reactComponents.Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxRuntime.jsxs("label", { className: "grid w-full grid-cols-[1fr,min-content] items-center gap-2", htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content] items-center", children: [jsxRuntime.jsx(reactComponents.Text, { className: reactFormComponents.cvaLabel(), children: name }), disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), showInputFocus: false, size: "small", toggled: toggled })] })] }));
+        }), ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: isSortDisabled }), children: jsxRuntime.jsx(reactComponents.Icon, { color: "secondary", name: "EllipsisDrag", size: "small" }) }), jsxRuntime.jsxs("label", { className: "grid w-full grid-cols-[1fr,min-content] items-center gap-2", htmlFor: id, children: [jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content] items-center", children: [jsxRuntime.jsx(reactComponents.Text, { className: reactFormComponents.cvaLabel(), children: name }), disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.ToggleSwitch, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), showInputFocus: false, size: "small", toggled: toggled })] })] }));
 };
 
 /**
@@ -432,7 +437,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
             densityChosen: selectedDensity,
         });
     };
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsPointingOut", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsxs("div", { className: "flex flex-col justify-start", children: [jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsPointingOut", size: "small" }), size: "small", variant: "secondary", children: jsxRuntime.jsx("span", { className: "hidden md:block", children: t("table.spacing") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsxs("div", { className: "flex flex-col justify-start", children: [jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
 };
 const DensitySelection = ({ text, onClick, icon, isSelected }) => {
     return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsxRuntime.jsx("div", { className: "mr-1 flex", children: icon }), jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: text }), isSelected ? (jsxRuntime.jsx("div", { className: "justify-endgrow flex", children: jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) })) : null] }));
@@ -473,6 +478,363 @@ const Sorting = ({ columns, }) => {
     return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUp", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue ?? "", children: sortableColumns.map(column => (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.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] = react.useState(false);
+    const textRef = react.useRef(null);
+    const resizeObserverRef = react.useRef(null);
+    const debounceTimerRef = react.useRef(null);
+    const [hideTooltip, setHideTooltip] = react.useState(false);
+    const checkIfTruncated = react.useCallback(() => {
+        if (textRef.current) {
+            const isTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
+            setIsTextTruncated(isTruncated);
+        }
+    }, []);
+    const debouncedCheckTruncation = react.useCallback(() => {
+        if (debounceTimerRef.current !== null) {
+            window.clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = window.setTimeout(() => {
+            checkIfTruncated();
+            debounceTimerRef.current = null;
+        }, 150);
+    }, [checkIfTruncated]);
+    react.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 ? (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTextTruncated || hideTooltip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "truncate", ref: textRef, type: "span", weight: weight, children: children }) })) : (jsxRuntime.jsx("div", { onMouseDown: () => setHideTooltip(true), onMouseUp: () => setHideTooltip(false), children: jsxRuntime.jsx(reactComponents.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 react.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] = react.useState(null);
+    const [dropTargetColumnId, setDropTargetColumnId] = react.useState(null);
+    const [dropPosition, setDropPosition] = react.useState(null);
+    const [droppedColumnId, setDroppedColumnId] = react.useState(null);
+    const startDragging = react.useCallback((columnId) => {
+        setDraggingColumnId(columnId);
+    }, []);
+    const endDragging = react.useCallback(() => {
+        setDraggingColumnId(null);
+        setDropTargetColumnId(null);
+        setDropPosition(null);
+    }, []);
+    const setDropTarget = react.useCallback((columnId, position) => {
+        setDropTargetColumnId(columnId);
+        setDropPosition(position);
+    }, []);
+    // Helper function to generate the right positioning for a column move
+    const moveColumn = react.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 = react.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 = react.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 = react.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 = react.useCallback((columnId) => {
+        if (dropTargetColumnId === columnId && dropPosition) {
+            return (jsxRuntime.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 = react.useCallback((columnId) => dropTargetColumnId === columnId, [dropTargetColumnId]);
+    // Generate cell props to collapse dragged columns
+    const getCellProps = react.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 react.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 (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "EllipsisVertical", size: "small" }), onClick: event => event.stopPropagation(), size: "extraSmall", variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [canSort && (isSorted === "desc" || !isSorted) ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortAscending"), onClick: () => header.column.toggleSorting(false), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowUp", size: "medium" }) })) : null, canSort && (isSorted === "asc" || !isSorted) ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.sortDescending"), onClick: () => header.column.toggleSorting(true), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowDown", size: "medium" }) })) : null, canSort && isSorted ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.clearSorting"), onClick: () => header.column.clearSorting(), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsUpDown", size: "medium" }) })) : null, canHide && visibleColumnsCount > 1 ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t("table.columnActions.hideColumn"), onClick: () => header.column.toggleVisibility(false), prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "EyeSlash", size: "medium" }) })) : null, canPin ? (jsxRuntime.jsx(reactComponents.MenuItem, { label: t(isPinned ? "table.columnActions.unPinColumn" : "table.columnActions.pinColumn"), onClick: () => {
+                        header.column.pin(isPinned ? false : "left");
+                        close();
+                    }, prefix: jsxRuntime.jsx(reactComponents.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 (jsxRuntime.jsx("div", { className: "flex items-center", children: jsxRuntime.jsx(reactComponents.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.
  *
@@ -482,7 +844,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 = react.useRef(null);
     const [t] = useTranslation();
@@ -492,23 +854,81 @@ const Table = ({ rowHeight = 75, ...props }) => {
         rowSize: props.getRowModel().rows.length || 0,
         rowHeight,
     });
+    const visibleColumns = react.useMemo(() => props.getAllColumns().filter(column => column.getIsVisible()), [props]);
+    const visibleColumnsCount = visibleColumns.length;
+    const headerGroups = react.useMemo(() => props.getHeaderGroups(), [props]);
+    const totalVisibleColumnsWidth = react.useMemo(() => {
+        return visibleColumns.reduce((sum, column) => sum + column.getSize(), 0);
+    }, [visibleColumns]);
+    const hasAnyGrowingColumn = react.useMemo(() => {
+        return visibleColumns.some(column => column.columnDef.meta?.shouldGrow === true);
+    }, [visibleColumns]);
+    const [containWholeTable, setContainWholeTable] = react.useState(false);
+    react.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 = react.useMemo(() => {
+        return props
+            .getHeaderGroups()
+            .flatMap(group => group.headers)
+            .map(header => header.id);
+    }, [props]);
+    const orderedVisibleColumns = react.useMemo(() => {
+        return headerOrder.map(headerId => visibleColumns.find(col => col.id === headerId)).filter(Boolean);
+    }, [headerOrder, visibleColumns]);
+    const lastUnpinnedColumnId = react.useMemo(() => {
+        const unpinnedColumns = orderedVisibleColumns.filter(column => column?.getIsPinned() !== "right");
+        return unpinnedColumns[unpinnedColumns.length - 1]?.id;
+    }, [orderedVisibleColumns]);
+    const isLastUnpinned = react.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 (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsxRuntime.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: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.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: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
                         height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
-                    }, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.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 (jsxRuntime.jsxs(reactTableBaseComponents.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 : (jsxRuntime.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: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.subHeader ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
-                                }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
+                    }, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: headerGroups.map((headerGroup, index) => {
+                                return (jsxRuntime.jsx(reactTableBaseComponents.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 (react.createElement(reactTableBaseComponents.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 : (jsxRuntime.jsxs("div", { ...getDragHandleProps(header.id, header.isPlaceholder, pinned), className: tailwindMerge.twMerge(cvaColumnHeaderContainer({
+                                                    sortable: canSort,
+                                                })), onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-1 truncate", children: [header.column.columnDef.header || header.column.columnDef.meta?.subHeader ? (jsxRuntime.jsxs("span", { className: "subtle min-w-0 text-xs", children: [jsxRuntime.jsx(TextWithTooltip, { tooltipLabel: tooltipLabel, weight: "bold", children: reactTable.flexRender(header.column.columnDef.header, header.getContext()) }), header.column.columnDef.meta?.subHeader
+                                                                        ? header.column.columnDef.meta.subHeader
+                                                                        : null] })) : null, jsxRuntime.jsx(ColumnSorting, { canSort: canSort, sortingState: header.column.getIsSorted() })] }), jsxRuntime.jsxs("div", { className: "flex flex-none items-center", children: [props.renderFilterButton && header.column.columnDef.meta?.filterName
+                                                                ? props.renderFilterButton(header.column.columnDef.meta.filterName)
+                                                                : null, jsxRuntime.jsx(ColumnActions, { header: header, visibleColumnsCount: visibleColumnsCount })] })] })),
+                                            !header.column.columnDef.meta?.shouldGrow && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null));
+                                    }) }, headerGroup.id));
+                            }) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
                                 height: `${getTotalSize()}px`,
                                 flexGrow: 1,
                             }, children: getVirtualItems().map((virtualRow, index) => {
@@ -517,14 +937,14 @@ const Table = ({ rowHeight = 75, ...props }) => {
                                     return null;
                                 }
                                 else {
-                                    return (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: reactComponents.cvaInteractableItem({
+                                    return (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: tailwindMerge.twMerge("group", reactComponents.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);
                                             }
@@ -535,18 +955,32 @@ const Table = ({ rowHeight = 75, ...props }) => {
                                             height: `${virtualRow.size}px`,
                                             transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
                                         }, children: row.getVisibleCells().map(cell => {
-                                            return (jsxRuntime.jsx(reactTableBaseComponents.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 (react.createElement(reactTableBaseComponents.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: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }, cell.id));
+                                                } },
+                                                isCellDropTarget(cell.column.id) && renderDropIndicator(cell.column.id),
+                                                jsxRuntime.jsx("div", { className: "grid h-full items-center p-0", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) })));
                                         }) }, row.id));
                                 }
                             }) })) : (jsxRuntime.jsx("tbody", { className: cvaTBody({ emptyState: !props.loading && !props.noDataMessage }), children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: props.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT", ...props.emptyState })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.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", {
@@ -564,6 +998,71 @@ const cvaTBody = cssClassVarianceUtilities.cvaMerge(["min-h-[40dvh]"], {
         emptyState: false,
     },
 });
+const cvaColumnHeaderContainer = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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 = cssClassVarianceUtilities.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
@@ -582,11 +1081,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 = react.useMemo(() => JSON.stringify(columns), [columns]);
     const updatedInitialColumnVisibility = react.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]];
                 }
@@ -594,26 +1095,45 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             })
                 .filter(sharedUtils.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 = react.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] = react.useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility || {});
+    }, [stableColumns, initialState?.columnOrder]);
+    const stableUpdatedInitialColumnPinning = react.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] = react.useState(reactTableProps.state?.columnVisibility || updatedInitialColumnVisibility);
     const [columnOrder, setColumnOrder] = react.useState(reactTableProps.state?.columnOrder || updatedInitialColumnOrder);
     const [sorting, setSorting] = react.useState(reactTableProps.state?.sorting || initialState?.sorting || []);
     const [columnSizing, setColumnSizing] = react.useState(reactTableProps.state?.columnSizing || initialState?.columnSizing || {});
+    const [columnPinning, setColumnPinning] = react.useState(reactTableProps.state?.columnPinning || stableUpdatedInitialColumnPinning);
     react.useEffect(() => {
         if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
             setColumnVisibility(updatedInitialColumnVisibility);
@@ -621,19 +1141,34 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             setSorting(initialState.sorting || []);
             setColumnSizing(initialState.columnSizing || {});
         }
-    }, [initialState, updatedInitialColumnOrder, updatedInitialColumnVisibility]);
+    }, [initialState, updatedInitialColumnOrder, stableUpdatedInitialColumnPinning, updatedInitialColumnVisibility]);
+    react.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 = react.useMemo(() => {
         return {
             sorting,
             columnVisibility,
             columnOrder,
             columnSizing,
+            columnPinning,
             ...reactTableProps.state,
         };
-    }, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
+    }, [sorting, columnVisibility, columnOrder, columnSizing, columnPinning, reactTableProps.state]);
     const table = reactTable.useReactTable({
         manualSorting: true,
-        enableSortingRemoval: false,
+        enableSortingRemoval: true,
         columnResizeMode: "onChange",
         getSortedRowModel: reactTable.getSortedRowModel(),
         getCoreRowModel: reactTable.getCoreRowModel(),
@@ -654,6 +1189,10 @@ const useTable = ({ onTableStateChange, initialState, columns, ...reactTableProp
             setSorting(value);
             reactTableProps.onSortingChange?.(value);
         },
+        onColumnPinningChange: value => {
+            setColumnPinning(value);
+            reactTableProps.onColumnPinningChange?.(value);
+        },
         columns,
         state,
     });
@@ -725,11 +1264,12 @@ const useTableSelection = ({ data, idKey, defaultSelectedIds, enableRowSelection
             if (!hasRowSelection) {
                 return null;
             }
-            return (jsxRuntime.jsx(reactFormComponents.Checkbox, { className: "ml-4",
+            const isRowSelectionDisabled = !table.options.enableRowSelection || !data.length;
+            return (jsxRuntime.jsx(reactFormComponents.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;
@@ -748,10 +1288,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 = react.useMemo(() => ({ rowSelection }), [rowSelection]);