@bigbinary/neeto-atoms 1.0.25 → 1.0.27

package/dist/cjs/{DataTable-Cw0ly-hT.js → DataTable-DhWDzUWw.js}

@@ -10,6 +10,7 @@ var primitives_Spinner = require('./primitives/Spinner.js');
 var createLucideIcon = require('./createLucideIcon-D0tRgV6l.js');
 var primitives_Button = require('./primitives/Button.js');
 var primitives_Pagination = require('./primitives/Pagination.js');
+var Button = require('./Button-Bt_AElge.js');
 var primitives_DropdownMenu = require('./primitives/DropdownMenu.js');
 var ellipsis = require('./ellipsis-4aubOI2n.js');
 var check = require('./check-BQgcDXys.js');
@@ -3324,7 +3325,7 @@ const useTablePagination = ({ totalCount = 0, pageSize = DEFAULT_PAGE_SIZE, curr
 
 const SelectionCheckbox = ({ checked, onCheckedChange, ariaLabel, }) => {
     const { t } = reactI18next.useTranslation();
-    return (jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: jsxRuntime.jsx(primitives_Checkbox.Checkbox, { checked: checked, onCheckedChange: onCheckedChange, "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row") }) }));
+    return (jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", children: jsxRuntime.jsx(primitives_Checkbox.Checkbox, { checked: checked, onCheckedChange: onCheckedChange, "aria-label": ariaLabel ?? t("neetoatoms.dataTable.selectRow", "Select row") }) }));
 };
 
 const useTableSelection = ({ enableRowSelection, selectedRowKeys, onRowSelect, data, getRowId, }) => {
@@ -3374,7 +3375,7 @@ const useTableSelection = ({ enableRowSelection, selectedRowKeys, onRowSelect, d
                 onCheckedChange: value => row.toggleSelected(!!value),
                 ariaLabel: "Select row",
             }),
-            size: 40,
+            size: 56,
             enableSorting: false,
             enableResizing: false,
         };
@@ -3555,11 +3556,11 @@ const ResizeHandle = ({ header }) => {
             : "bg-border opacity-0 group-hover/head:opacity-100") }));
 };
 
-const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, }) => {
-    if (!isAllPageRowsSelected)
+const BulkSelectCallout = ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, onBulkSelectAll, onClearBulkSelection, }) => {
+    if (!isAllPageRowsSelected && !isBulkAllSelected)
         return null;
-    const { selectAllRowMessage, selectAllRowButtonLabel, setBulkSelectedAllRows, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
-    return (jsxRuntime.jsx("div", { className: "mb-2 flex items-center justify-center gap-1 rounded-lg bg-primary/10 px-4 py-1.5 text-sm text-primary", children: isBulkAllSelected ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), clearSelectionButtonLabel && (jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: () => setBulkSelectedAllRows(false), children: clearSelectionButtonLabel }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: selectAllRowMessage }), jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: () => setBulkSelectedAllRows(true), children: selectAllRowButtonLabel })] })) }));
+    const { selectAllRowMessage, selectAllRowButtonLabel, allRowsSelectedMessage, clearSelectionButtonLabel, } = bulkSelectAllRowsProps;
+    return (jsxRuntime.jsx("div", { className: "mb-2 flex items-center justify-center gap-1 rounded-sm bg-primary/10 px-4 py-1.5 text-sm text-primary", children: isBulkAllSelected ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: allRowsSelectedMessage ?? selectAllRowMessage }), jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onClearBulkSelection, children: clearSelectionButtonLabel ?? "Clear selection" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: selectAllRowMessage }), jsxRuntime.jsx(primitives_Button.Button, { variant: "link", onClick: onBulkSelectAll, children: selectAllRowButtonLabel })] })) }));
 };
 
 const DataTablePagination = ({ currentPage, pageCount, onPageChange, }) => {
@@ -3601,13 +3602,13 @@ const HeaderCellMenu = ({ column, enableAddColumn, enableColumnFreeze, isColumnP
         moreActions.length > 0;
     if (!hasAnyAction)
         return null;
-    return (jsxRuntime.jsx("div", { onClick: e => e.stopPropagation(), children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(primitives_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(primitives_Button.Button, { variant: "ghost", size: "icon", className: "ml-1 size-7 shrink-0 text-muted-foreground data-[state=open]:bg-muted", "data-testid": "column-menu-button", children: jsxRuntime.jsx(ellipsis.Ellipsis, { className: "size-4" }) }) }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuContent, { align: "start", className: "w-48", children: [isSortable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "ascending-column-menu-button", onClick: () => onSort?.(column.id, false), children: [jsxRuntime.jsx(ArrowUp, { className: "mr-2 size-4" }), "Ascending", currentSort === "asc" && (jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" }))] }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "descending-column-menu-button", onClick: () => onSort?.(column.id, true), children: [jsxRuntime.jsx(ArrowDown, { className: "mr-2 size-4" }), "Descending", currentSort === "desc" && (jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" }))] })] })), enableAddColumn && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "insert-right-column-menu-button", onClick: () => onAddColumn?.(columnIndex + 1), children: [jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }), "Insert column right"] }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "insert-left-column-menu-button", onClick: () => onAddColumn?.(columnIndex), children: [jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }), "Insert column left"] })] })), isHidable && onHideColumn && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "hide-column-menu-button", onClick: () => onHideColumn(column.id), children: [jsxRuntime.jsx(EyeOff, { className: "mr-2 size-4" }), "Hide column"] }) })), isDeletable && onDeleteColumn && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "delete-column-menu-button", onClick: () => onDeleteColumn(column.id), children: [jsxRuntime.jsx(Trash2, { className: "mr-2 size-4" }), "Delete column"] })), enableColumnFreeze && onTogglePin && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "freeze-unfreeze-column-menu-button", onClick: () => onTogglePin(column.id), children: [jsxRuntime.jsx(Pin, { className: "mr-2 size-4" }), isColumnPinned ? "Unfreeze column" : "Freeze column"] }) })), onMoveColumn && (canMoveLeft || canMoveRight) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canMoveLeft && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "move-column-left-menu-button", onClick: () => onMoveColumn(column.id, -1), children: [jsxRuntime.jsx(MoveLeft, { className: "mr-2 size-4" }), "Move column left"] })), canMoveRight && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "move-column-right-menu-button", onClick: () => onMoveColumn(column.id, 1), children: [jsxRuntime.jsx(MoveRight, { className: "mr-2 size-4" }), "Move column right"] }))] })), moreActions.length > 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: moreActions.map(action => {
+    return (jsxRuntime.jsx("div", { onClick: e => e.stopPropagation(), children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(primitives_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsx(Button.Button, { variant: "ghost", size: "icon", icon: ellipsis.Ellipsis, "data-testid": "column-menu-button" }) }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuContent, { align: "start", className: "w-48", children: [isSortable && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "ascending-column-menu-button", onClick: () => onSort?.(column.id, false), children: [jsxRuntime.jsx(ArrowUp, { className: "mr-2 size-4" }), "Ascending", currentSort === "asc" && (jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" }))] }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "descending-column-menu-button", onClick: () => onSort?.(column.id, true), children: [jsxRuntime.jsx(ArrowDown, { className: "mr-2 size-4" }), "Descending", currentSort === "desc" && (jsxRuntime.jsx(check.Check, { className: "ml-auto size-4 text-primary" }))] })] })), enableAddColumn && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "insert-right-column-menu-button", onClick: () => onAddColumn?.(columnIndex + 1), children: [jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }), "Insert column right"] }), jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "insert-left-column-menu-button", onClick: () => onAddColumn?.(columnIndex), children: [jsxRuntime.jsx(Plus, { className: "mr-2 size-4" }), "Insert column left"] })] })), isHidable && onHideColumn && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "hide-column-menu-button", onClick: () => onHideColumn(column.id), children: [jsxRuntime.jsx(EyeOff, { className: "mr-2 size-4" }), "Hide column"] }) })), isDeletable && onDeleteColumn && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "delete-column-menu-button", onClick: () => onDeleteColumn(column.id), children: [jsxRuntime.jsx(Trash2, { className: "mr-2 size-4" }), "Delete column"] })), enableColumnFreeze && onTogglePin && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "freeze-unfreeze-column-menu-button", onClick: () => onTogglePin(column.id), children: [jsxRuntime.jsx(Pin, { className: "mr-2 size-4" }), isColumnPinned ? "Unfreeze column" : "Freeze column"] }) })), onMoveColumn && (canMoveLeft || canMoveRight) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canMoveLeft && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "move-column-left-menu-button", onClick: () => onMoveColumn(column.id, -1), children: [jsxRuntime.jsx(MoveLeft, { className: "mr-2 size-4" }), "Move column left"] })), canMoveRight && (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": "move-column-right-menu-button", onClick: () => onMoveColumn(column.id, 1), children: [jsxRuntime.jsx(MoveRight, { className: "mr-2 size-4" }), "Move column right"] }))] })), moreActions.length > 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: moreActions.map(action => {
                                 const ActionIcon = action.icon;
                                 return (jsxRuntime.jsxs(primitives_DropdownMenu.DropdownMenuItem, { "data-testid": `${action.type}-column-menu-button`, onClick: () => onMoreActionClick?.(action.type, column.id), children: [ActionIcon && jsxRuntime.jsx(ActionIcon, { className: "mr-2 size-4" }), action.label] }, action.type));
                             }) }))] })] }) }));
 };
 
-const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting = true, enableURLSort = true, totalCount, pageSize = DEFAULT_PAGE_SIZE, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination = true, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize = true, enableColumnFreeze = true, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder = false, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn = false, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading = false, bordered = true, className, emptyMessage, onRowClick, allowRowClick = true, }) => {
+const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting = false, enableURLSort = true, totalCount, pageSize = DEFAULT_PAGE_SIZE, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination = true, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize = true, enableColumnFreeze = true, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder = false, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn = false, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading = false, bordered = true, className, emptyMessage, onRowClick, allowRowClick = true, }) => {
     const getRowId = React.useMemo(() => getRowIdProp ??
         ((row) => row.id), [getRowIdProp]);
     const { sorting, onSortingChange } = useTableSort({
@@ -3622,13 +3623,21 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
         onPageChange: onPageChangeProp,
         enableURLPagination,
     });
-    const { rowSelection, onRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
+    const { rowSelection, onRowSelectionChange: originalOnRowSelectionChange, selectionColumn, enableRowSelection, } = useTableSelection({
         enableRowSelection: enableRowSelectionProp,
         selectedRowKeys,
         onRowSelect,
         data,
         getRowId,
     });
+    // Wrap selection change to detect manual deselection while in bulk mode
+    const onRowSelectionChange = React.useCallback((updaterOrValue) => {
+        if (bulkSelectedRef.current && !isAutoSelectingRef.current) {
+            setBulkSelectedAllRowsInternal(false);
+            bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
+        }
+        originalOnRowSelectionChange(updaterOrValue);
+    }, [originalOnRowSelectionChange, bulkSelectAllRowsProps]);
     const { columnPinning, onColumnPinningChange, toggleColumnPin, isColumnPinned, } = useColumnPinning({
         enabled: enableColumnFreeze,
         columnPinning: columnPinningProp,
@@ -3701,7 +3710,63 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
         onColumnVisibilityChange,
         onColumnOrderChange,
     });
-    const isBulkAllSelected = !!bulkSelectAllRowsProps && table.getIsAllPageRowsSelected();
+    const [bulkSelectedAllRows, setBulkSelectedAllRowsInternal] = React.useState(false);
+    const isAutoSelectingRef = React.useRef(false);
+    const bulkSelectedRef = React.useRef(false);
+    bulkSelectedRef.current = bulkSelectedAllRows;
+    // Auto-select all page rows when in bulk mode (handles page navigation)
+    React.useEffect(() => {
+        if (bulkSelectedAllRows) {
+            isAutoSelectingRef.current = true;
+            table.toggleAllPageRowsSelected(true);
+            // Reset flag after React processes the state update
+            requestAnimationFrame(() => {
+                isAutoSelectingRef.current = false;
+            });
+        }
+    }, [bulkSelectedAllRows, data]);
+    const isAllPageRowsSelected = table.getIsAllPageRowsSelected();
+    const showSelectAllCallout = !!bulkSelectAllRowsProps &&
+        isAllPageRowsSelected &&
+        pageCount > 1 &&
+        !bulkSelectedAllRows;
+    const showAllSelectedCallout = !!bulkSelectAllRowsProps && bulkSelectedAllRows;
+    const handleBulkSelectAll = () => {
+        setBulkSelectedAllRowsInternal(true);
+        bulkSelectAllRowsProps?.setBulkSelectedAllRows(true);
+    };
+    const handleClearBulkSelection = () => {
+        setBulkSelectedAllRowsInternal(false);
+        bulkSelectAllRowsProps?.setBulkSelectedAllRows(false);
+        table.toggleAllPageRowsSelected(false);
+        onRowSelect?.([], []);
+    };
+    const scrollContainerRef = React.useRef(null);
+    const [scrollState, setScrollState] = React.useState({
+        scrolledStart: false,
+        scrolledEnd: false,
+    });
+    React.useEffect(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const update = () => {
+            const { scrollLeft, scrollWidth, clientWidth } = el;
+            const maxScroll = scrollWidth - clientWidth;
+            setScrollState({
+                scrolledStart: scrollLeft > 0,
+                scrolledEnd: scrollLeft < maxScroll - 1,
+            });
+        };
+        update();
+        el.addEventListener("scroll", update, { passive: true });
+        const resizeObserver = new ResizeObserver(update);
+        resizeObserver.observe(el);
+        return () => {
+            el.removeEventListener("scroll", update);
+            resizeObserver.disconnect();
+        };
+    }, []);
     const handleSort = (columnId, desc) => {
         const isSameSort = sorting.length > 0 &&
             sorting[0].id === columnId &&
@@ -3713,8 +3778,7 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
             onSortingChange([{ id: columnId, desc }]);
         }
     };
-    return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsxRuntime.jsx(LoadingOverlay, {}), bulkSelectAllRowsProps &&
-                (data.length !== totalCount || isBulkAllSelected) && (jsxRuntime.jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: table.getIsAllPageRowsSelected(), isBulkAllSelected: isBulkAllSelected })), jsxRuntime.jsx("div", { className: utils.cn("min-h-0 flex-1 overflow-auto", bordered && "rounded-lg border"), children: jsxRuntime.jsxs(primitives_Table.Table, { children: [jsxRuntime.jsx(primitives_Table.TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map(headerGroup => {
+    return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex min-h-0 w-full flex-col", className), children: [loading && jsxRuntime.jsx(LoadingOverlay, {}), (showSelectAllCallout || showAllSelectedCallout) && (jsxRuntime.jsx(BulkSelectCallout, { bulkSelectAllRowsProps: bulkSelectAllRowsProps, isAllPageRowsSelected: isAllPageRowsSelected, isBulkAllSelected: bulkSelectedAllRows, onBulkSelectAll: handleBulkSelectAll, onClearBulkSelection: handleClearBulkSelection })), jsxRuntime.jsx("div", { ref: scrollContainerRef, "data-scrolled-start": scrollState.scrolledStart || undefined, "data-scrolled-end": scrollState.scrolledEnd || undefined, className: utils.cn("group/scroll min-h-0 flex-1 overflow-auto", bordered && "rounded-lg border"), children: jsxRuntime.jsxs(primitives_Table.Table, { children: [jsxRuntime.jsx(primitives_Table.TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map(headerGroup => {
                                 const dataHeaders = headerGroup.headers.filter(h => h.column.id !== "_selection");
                                 const totalDataSize = dataHeaders.reduce((sum, h) => sum + h.getSize(), 0);
                                 return (jsxRuntime.jsx(primitives_Table.TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
@@ -3722,7 +3786,9 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
                                         const isSelectionCol = header.column.id === "_selection";
                                         const columnIndexInData = dataHeaders.findIndex(h => h.id === header.id);
                                         return (jsxRuntime.jsxs(primitives_Table.TableHead, { className: utils.cn("group/head relative", header.column.getCanSort() &&
-                                                "cursor-pointer select-none", isPinned && "sticky z-10 bg-muted"), style: {
+                                                "cursor-pointer select-none", isSelectionCol && "!pe-2", isPinned && "sticky z-10 bg-muted", isPinned === "left" &&
+                                                "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6", isPinned === "right" &&
+                                                "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"), style: {
                                                 width: selectionColumn && isSelectionCol
                                                     ? 0
                                                     : selectionColumn
@@ -3747,13 +3813,15 @@ const DataTable = ({ columns, data, getRowId: getRowIdProp, sorting: sortingProp
                                                                 ? (colId, dir) => moveColumn(colId, dir)
                                                                 : undefined, onMoreActionClick: onMoreActionClick }))] })), enableColumnResize && jsxRuntime.jsx(ResizeHandle, { header: header })] }, header.id));
                                     }) }, headerGroup.id));
-                            }) }), jsxRuntime.jsx(primitives_Table.TableBody, { className: loading ? "opacity-50" : undefined, children: table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map(row => (jsxRuntime.jsx(primitives_Table.TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, className: utils.cn("group", allowRowClick && onRowClick && "cursor-pointer"), onClick: allowRowClick && onRowClick
+                            }) }), jsxRuntime.jsx(primitives_Table.TableBody, { className: loading ? "opacity-50" : undefined, children: table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map(row => (jsxRuntime.jsx(primitives_Table.TableRow, { "data-state": row.getIsSelected() ? "selected" : undefined, className: utils.cn("group data-[state=selected]:bg-info", allowRowClick && onRowClick && "cursor-pointer"), onClick: allowRowClick && onRowClick
                                     ? event => onRowClick(event, row.original, row.index)
                                     : undefined, children: row.getVisibleCells().map(cell => {
                                     const isPinned = cell.column.getIsPinned();
                                     const isSelCell = cell.column.id === "_selection";
-                                    return (jsxRuntime.jsx(primitives_Table.TableCell, { className: utils.cn(isPinned &&
-                                            "sticky z-10 bg-background group-data-[state=selected]:bg-muted"), style: {
+                                    return (jsxRuntime.jsx(primitives_Table.TableCell, { className: utils.cn(isSelCell && "!pe-2", isPinned &&
+                                            "sticky z-10 bg-background group-data-[state=selected]:bg-info", isPinned === "left" &&
+                                            "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6", isPinned === "right" &&
+                                            "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"), style: {
                                             width: selectionColumn && isSelCell
                                                 ? 0
                                                 : cell.column.getSize(),
@@ -3781,4 +3849,4 @@ exports.useColumnVisibility = useColumnVisibility;
 exports.useTablePagination = useTablePagination;
 exports.useTableSelection = useTableSelection;
 exports.useTableSort = useTableSort;
-//# sourceMappingURL=DataTable-Cw0ly-hT.js.map
+//# sourceMappingURL=DataTable-DhWDzUWw.js.map