@ackplus/react-tanstack-data-table 1.0.19-beta-0.12 → 1.0.19-beta-0.14

package/package.json

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

package/src/lib/components/headers/draggable-header.d.ts

@@ -7,6 +7,7 @@ interface DraggableHeaderProps<T> {
     onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
+    alignment?: 'left' | 'center' | 'right';
 }
-export declare function DraggableHeader<T>({ header, enableSorting, draggable, onColumnReorder, slots, slotProps, }: DraggableHeaderProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
+export declare function DraggableHeader<T>({ header, enableSorting, draggable, onColumnReorder, slots, slotProps, alignment, }: DraggableHeaderProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,7 +7,7 @@ const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, }) {
+function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, alignment, }) {
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [dragOver, setDragOver] = (0, react_1.useState)(false);
     const autoScrollIntervalRef = (0, react_1.useRef)(null);
@@ -18,6 +18,9 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
     const AUTO_SCROLL_THRESHOLD = 50;
     const AUTO_SCROLL_SPEED = 10;
     const AUTO_SCROLL_INTERVAL = 16;
+    const justifyContent = (0, react_1.useMemo)(() => {
+        return alignment === 'left' ? 'flex-start' : alignment === 'right' ? 'flex-end' : 'center';
+    }, [alignment]);
     const findScrollableContainer = (0, react_1.useCallback)((element) => {
         let searchElement = element;
         if (!searchElement) {
@@ -191,6 +194,7 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: headerElementRef, sx: {
             display: 'flex',
             alignItems: 'center',
+            justifyContent: justifyContent,
             gap: 1,
             cursor: getCursor(),
             userSelect: 'none',
@@ -203,10 +207,8 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
             '&:active': {
                 cursor: draggable ? 'grabbing' : 'pointer',
             },
-        }, draggable: draggable, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: enableSorting ? handleSort : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                flex: 1,
-                display: 'flex',
-                alignItems: 'center',
+        }, draggable: draggable, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: enableSorting ? handleSort : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", sx: {
+                display: 'inline-flex',
                 gap: 1,
             }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
 }

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

@@ -28,7 +28,7 @@ function TableHeader({ draggable = false, enableColumnResizing = false, enableSt
                 pinnedRightPosition,
                 zIndex: isPinned ? 10 : 1,
                 disableStickyHeader: enableStickyHeader,
-            })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCell, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: {
+            })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCell, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps, alignment: alignment }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: {
                         position: 'absolute',
                         right: 0,
                         top: '25%',