@trackunit/react-table 1.10.14 → 1.10.16

package/index.cjs.js

@@ -577,14 +577,15 @@ const useCellsOffset = (headerGroups, draggingColumnId) => {
  * @param options - Options including the ReactTable instance and optional callbacks
  * @returns { object } Object containing drag state and handler functions
  */
-const useColumnDragDrop = ({ table, }) => {
+const useColumnDragDrop = ({ table, onColumnDragStart, }) => {
     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);
-    }, []);
+        onColumnDragStart?.(columnId);
+    }, [onColumnDragStart]);
     const endDragging = react.useCallback(() => {
         setDraggingColumnId(null);
         setDropTargetColumnId(null);
@@ -995,6 +996,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
     // Add our drag and drop hook with enhanced functionality
     const { getHeaderProps, getDragHandleProps, renderDropIndicator, isCellDropTarget, draggingColumnId, droppedColumnId, getCellProps, } = useColumnDragDrop({
         table: props,
+        onColumnDragStart: props.onColumnDragStart,
     });
     const offsets = useCellsOffset(headerGroups.map(group => group.headers), draggingColumnId);
     const hasResults = props.getRowModel().rows.length > 0;

package/index.esm.js

@@ -576,14 +576,15 @@ const useCellsOffset = (headerGroups, draggingColumnId) => {
  * @param options - Options including the ReactTable instance and optional callbacks
  * @returns { object } Object containing drag state and handler functions
  */
-const useColumnDragDrop = ({ table, }) => {
+const useColumnDragDrop = ({ table, onColumnDragStart, }) => {
     const [draggingColumnId, setDraggingColumnId] = useState(null);
     const [dropTargetColumnId, setDropTargetColumnId] = useState(null);
     const [dropPosition, setDropPosition] = useState(null);
     const [droppedColumnId, setDroppedColumnId] = useState(null);
     const startDragging = useCallback((columnId) => {
         setDraggingColumnId(columnId);
-    }, []);
+        onColumnDragStart?.(columnId);
+    }, [onColumnDragStart]);
     const endDragging = useCallback(() => {
         setDraggingColumnId(null);
         setDropTargetColumnId(null);
@@ -994,6 +995,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
     // Add our drag and drop hook with enhanced functionality
     const { getHeaderProps, getDragHandleProps, renderDropIndicator, isCellDropTarget, draggingColumnId, droppedColumnId, getCellProps, } = useColumnDragDrop({
         table: props,
+        onColumnDragStart: props.onColumnDragStart,
     });
     const offsets = useCellsOffset(headerGroups.map(group => group.headers), draggingColumnId);
     const hasResults = props.getRowModel().rows.length > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.10.14",
+  "version": "1.10.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,14 +14,14 @@
     "react-dnd-html5-backend": "16.0.1",
     "@tanstack/react-router": "1.114.29",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.14.14",
-    "@trackunit/shared-utils": "1.12.12",
-    "@trackunit/css-class-variance-utilities": "1.10.12",
-    "@trackunit/ui-icons": "1.10.12",
-    "@trackunit/react-table-base-components": "1.10.14",
-    "@trackunit/react-form-components": "1.11.14",
-    "@trackunit/i18n-library-translation": "1.10.12",
-    "@trackunit/iris-app-runtime-core-api": "1.10.12",
+    "@trackunit/react-components": "1.14.16",
+    "@trackunit/shared-utils": "1.12.14",
+    "@trackunit/css-class-variance-utilities": "1.10.14",
+    "@trackunit/ui-icons": "1.10.14",
+    "@trackunit/react-table-base-components": "1.10.16",
+    "@trackunit/react-form-components": "1.11.16",
+    "@trackunit/i18n-library-translation": "1.10.14",
+    "@trackunit/iris-app-runtime-core-api": "1.10.14",
     "graphql": "^16.10.0"
   },
   "module": "./index.esm.js",

package/src/Table.d.ts

@@ -16,6 +16,7 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
     selectionColId?: string;
     renderFilterButton?: (filterKey: string | Array<string>) => ReactNode;
     isRowClickable?: (row: TData) => boolean;
+    onColumnDragStart?: (columnId: string) => void;
 }
 /**
  * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.

package/src/hooks/useColumnDragDrop.d.ts

@@ -2,6 +2,7 @@ import { Table as ReactTable } from "@tanstack/react-table";
 import { HTMLAttributes, ReactNode } from "react";
 interface ColumnDragDropOptions<TData extends object> {
     table: ReactTable<TData>;
+    onColumnDragStart?: (columnId: string) => void;
 }
 type ColumnStyles = {
     [x: string]: number | string | undefined;
@@ -12,7 +13,7 @@ type ColumnStyles = {
  * @param options - Options including the ReactTable instance and optional callbacks
  * @returns { object } Object containing drag state and handler functions
  */
-export declare const useColumnDragDrop: <TData extends object>({ table, }: ColumnDragDropOptions<TData>) => {
+export declare const useColumnDragDrop: <TData extends object>({ table, onColumnDragStart, }: ColumnDragDropOptions<TData>) => {
     draggingColumnId: string | null;
     droppedColumnId: string | null;
     dropTargetColumnId: string | null;