@autobusal/common 1.33.0 → 1.33.1

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
 
+## 1.33.1
+
+### Added
+
+- **`Table` accepts an optional `onReorder(draggedId, targetId)` prop.** When set, every row becomes an HTML5 drag source/drop target (dims to 40% opacity while being dragged) and a completed drag reports the dragged row's id and the row it was dropped on - the caller decides what "reorder" means for its own data. Omitted by every existing table, so this is purely additive; first consumer is `@autobusal/admin-menu` 1.1.2.
+
 ## 1.33.0
 
 ### Fixed

package/Table/Rows/Rows.tsx

@@ -1,4 +1,5 @@
 import { TFunction } from 'i18next';
+import { useState } from 'react';
 import { NavigateFunction } from 'react-router-dom';
 import Loading from './Loading';
 import NotFound from './NotFound';
@@ -18,9 +19,11 @@ interface Props {
   actions?: string[]
   handlers?: any
   navigate: NavigateFunction
+  onReorder?: (draggedId: number, targetId: number) => void
 }
 
-const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate }: Props): JSX.Element => {
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate, onReorder }: Props): JSX.Element => {
+  const [ draggedId, setDraggedId ] = useState<number | null>(null);
   if (loading) {
     return <Loading length={ colLength } t={ t } />;
   }
@@ -43,8 +46,28 @@ const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, acti
     // table's list, which is what every existing caller relies on.
     const available = item.props.actions ?? actions;
 
+    const id = item.props.id;
+
     return (
-    <Tr key={ index } $viewable={ isViewable } onClick={ () => onClick(item.props.id) }>
+    <Tr
+      key={ index }
+      $viewable={ isViewable }
+      $dragging={ onReorder !== undefined && draggedId === id }
+      draggable={ onReorder !== undefined }
+      onClick={ () => onClick(id) }
+      onDragStart={ onReorder && (() => setDraggedId(id)) }
+      onDragOver={ onReorder && (event => event.preventDefault()) }
+      onDragEnd={ onReorder && (() => setDraggedId(null)) }
+      onDrop={ onReorder && (event => {
+        event.preventDefault();
+
+        if (draggedId !== null && draggedId !== id) {
+          onReorder(draggedId, id);
+        }
+
+        setDraggedId(null);
+      }) }
+    >
       { item }
 
       { rowActions(available).length > 0 && (

package/Table/Rows/styles.ts

@@ -19,11 +19,15 @@ export const Tbody = styled.tbody<{ $fetching: boolean }>`
   ` }
 `;
 
-export const Tr = styled.tr<{ $viewable?: boolean }>`
+export const Tr = styled.tr<{ $viewable?: boolean, $dragging?: boolean }>`
   ${ props => props.$viewable && css`
     cursor: pointer;
   ` }
 
+  ${ props => props.$dragging && css`
+    opacity: .4;
+  ` }
+
   text-align: center;
 
   & > td:first-of-type {

package/Table/Table.tsx

@@ -33,9 +33,18 @@ interface Props {
    */
   empty?: string
   handlers?: any
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-10
+   * Turns every row into an HTML5 drag source/drop target and reports a
+   * completed drag as (the dragged row's id, the row it was dropped on).
+   * The caller decides what "reorder" means for its own data (e.g.
+   * recomputing a full id list to persist) - Table only reports the drag.
+   * Omitted by every other table, so this is purely additive.
+   */
+  onReorder?: (draggedId: number, targetId: number) => void
 }
 
-const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers }: Props): JSX.Element => {
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers, onReorder }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -75,6 +84,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, f
               actions={ actions }
               handlers={ handlers }
               navigate={ navigate }
+              onReorder={ onReorder }
             />
 
             <Paginate data={ pages } colLength={ colLength } t={ t } />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.33.0",
+  "version": "1.33.1",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"