doo-boilerplate 0.2.12 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doo-boilerplate",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "CLI to scaffold Pila portal frontend projects",
   "type": "module",
   "bin": {

package/templates/template-vite/src/components/data-table/data-table.tsx

@@ -11,8 +11,9 @@ import {
   useSensors,
 } from '@dnd-kit/core'
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers'
-import { SortableContext, arrayMove, horizontalListSortingStrategy } from '@dnd-kit/sortable'
-import { type ColumnDef, type Table as TanstackTable, flexRender } from '@tanstack/react-table'
+import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { type Cell, type ColumnDef, type Table as TanstackTable, flexRender } from '@tanstack/react-table'
 
 import { Skeleton } from '@/components/ui/skeleton'
 import { Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table'
@@ -26,6 +27,28 @@ interface DataTableProps<TData> {
   isLoading?: boolean
 }
 
+/**
+ * Cell that participates in DnD column reordering.
+ * Uses useSortable to get CSS transform during drag so the cell visually
+ * moves with its column header — matching ndatrace-cms DragAlongCell pattern.
+ */
+function DragAlongCell<TData>({ cell }: { cell: Cell<TData, unknown> }) {
+  const { isDragging, setNodeRef, transform } = useSortable({ id: cell.column.id })
+
+  const style: React.CSSProperties = {
+    opacity: isDragging ? 0.6 : 1,
+    transform: CSS.Translate.toString(transform),
+    transition: 'width transform 0.2s ease-in-out',
+    position: 'relative',
+  }
+
+  return (
+    <TableCell ref={setNodeRef} style={style}>
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </TableCell>
+  )
+}
+
 export function DataTable<TData>({ table, columns, isLoading }: DataTableProps<TData>) {
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     table.getAllLeafColumns().map((col) => col.id)
@@ -46,10 +69,17 @@ export function DataTable<TData>({ table, columns, isLoading }: DataTableProps<T
         columnOrder.indexOf(String(over.id))
       )
       setColumnOrder(newOrder)
+      // Also sync to table instance if parent wired onColumnOrderChange
       table.setColumnOrder(newOrder)
     }
   }
 
+  // Sort by local columnOrder so DnD works self-contained (no parent config needed).
+  // After drag ends, re-renders headers/cells in the new order.
+  function sortById<T extends { id: string }>(items: T[]): T[] {
+    return [...items].sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
+  }
+
   return (
     <DndContext
       sensors={sensors}
@@ -68,7 +98,7 @@ export function DataTable<TData>({ table, columns, isLoading }: DataTableProps<T
                   strategy={horizontalListSortingStrategy}
                 >
                   <tr>
-                    {headerGroup.headers.map((header) => (
+                    {sortById(headerGroup.headers).map((header) => (
                       <SortableHeader key={header.id} header={header} />
                     ))}
                   </tr>
@@ -89,11 +119,11 @@ export function DataTable<TData>({ table, columns, isLoading }: DataTableProps<T
               ) : table.getRowModel().rows.length ? (
                 table.getRowModel().rows.map((row) => (
                   <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-                    {row.getVisibleCells().map((cell) => (
-                      <TableCell key={cell.id}>
-                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
-                    ))}
+                    <SortableContext items={columnOrder} strategy={horizontalListSortingStrategy}>
+                      {sortById(row.getVisibleCells()).map((cell) => (
+                        <DragAlongCell key={cell.id} cell={cell} />
+                      ))}
+                    </SortableContext>
                   </TableRow>
                 ))
               ) : (

package/templates/template-vite/src/features/tasks/components/tasks-crud-table.tsx

@@ -5,6 +5,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   getFilteredRowModel,
+  type ColumnOrderState,
   type SortingState,
   type ColumnFiltersState,
   type VisibilityState,
@@ -39,6 +40,7 @@ export function TasksCrudTable() {
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])
   const [rowSelection, setRowSelection] = useState({})
   const [dialogOpen, setDialogOpen] = useState(false)
   const [editingTask, setEditingTask] = useState<Task | undefined>()
@@ -74,10 +76,11 @@ export function TasksCrudTable() {
   const table = useReactTable({
     data: tasks,
     columns,
-    state: { sorting, columnFilters, columnVisibility, rowSelection },
+    state: { sorting, columnFilters, columnVisibility, columnOrder, rowSelection },
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
     onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),

package/templates/template-vite/src/features/users/components/users-table.tsx

@@ -8,6 +8,7 @@ import {
   getSortedRowModel,
   useReactTable,
   type ColumnFiltersState,
+  type ColumnOrderState,
   type SortingState,
   type VisibilityState,
 } from '@tanstack/react-table'
@@ -45,6 +46,7 @@ export function UsersTable() {
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])
   const [rowSelection, setRowSelection] = useState({})
 
   // Dialog state
@@ -96,10 +98,11 @@ export function UsersTable() {
   const table = useReactTable({
     data,
     columns,
-    state: { sorting, columnFilters, columnVisibility, rowSelection },
+    state: { sorting, columnFilters, columnVisibility, columnOrder, rowSelection },
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
+    onColumnOrderChange: setColumnOrder,
     onRowSelectionChange: setRowSelection,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),