@cmk/fe_utils/dist/components/table/useDraggableRows.d.ts

frontend utility library

import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';

export type UseDraggableRowsParams = {
    rows: Record<string, unknown>[];
    reorderRowId?: string | undefined;
    onReorder?: (startDragItem: unknown, currentHoverItem: unknown) => void;
};
/**
 * Hook to make rows draggable
 * @param rows - array of rows (a row=object/dict) to be reordered
 * @param reorderRowId - To enable dragging it is required to pass here the name of the id field/column in the row object (e.g. 'id')
 * @param onReorder - callback function to be called when the row is dragged and dropped
 * @returns {..., draggedRows: any[]} - draggedRows is the reordered array of rows while dragging
 * @returns {..., bind: (...args: any[]) => ReactDOMAttributes } - is the bind object to be passed to the TableRow component (attaches dom event to <tr/>s)
 */
export declare const useDraggableRows: (params: UseDraggableRowsParams) => {
    draggedRows: Record<string, unknown>[];
    bind: (...args: unknown[]) => ReactDOMAttributes;
    hoverItemId: string | number | boolean;
    draggedItemId: string | number | boolean;
};