table update

web/src/components/features/layouts/AppVerticalCodeSplitter/DataContainer.tsx

@@ -26,7 +26,7 @@ export const DataContainer: React.FC<{
       />
 
       {hasData ? (
-        <AppDataGrid rows={data} resizable={false} sortable={false} className="border-none!" />
+        <AppDataGrid rows={data} resizable={true} sortable={false} />
       ) : (
         <div className="flex h-full items-center justify-center">
           {fetchingData ? 'Loading data...' : 'No data returned'}

web/src/components/ui/table/AppDataGrid/TanStackDataGrid/DataGridHeader.tsx

@@ -13,10 +13,11 @@ interface DraggableHeaderProps {
   resizable: boolean;
   sortable: boolean;
   isOverTarget: boolean;
+  draggable: boolean;
 }
 
 const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
-  ({ header, sortable, resizable, isOverTarget }) => {
+  ({ header, sortable, resizable, isOverTarget, draggable }) => {
     // Set up dnd-kit's useDraggable for this header cell
     const {
       attributes,
@@ -24,11 +25,8 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
       isDragging,
       setNodeRef: setDragNodeRef
     } = useDraggable({
-      id: header.id,
-      // This ensures the drag overlay matches the element's position exactly
-      data: {
-        type: 'header'
-      }
+      disabled: !draggable,
+      id: header.id
     });
 
     // Set up droppable area to detect when a header is over this target
@@ -47,7 +45,7 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
 
     return (
       <th
-        ref={setDropNodeRef}
+        ref={draggable ? setDropNodeRef : undefined}
         style={style}
         className={cn(
           'group bg-background relative border-r select-none last:border-r-0',
@@ -59,9 +57,9 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
         <span
           className={cn(
             'flex h-full flex-1 items-center space-x-1.5 p-2',
-            sortable && 'cursor-grab'
+            draggable && 'cursor-grab'
           )}
-          ref={sortable ? setDragNodeRef : undefined}
+          ref={draggable ? setDragNodeRef : undefined}
           {...attributes}
           {...listeners}>
           <span className="text-gray-dark text-base font-normal">
@@ -84,15 +82,6 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
               e.stopPropagation();
               e.preventDefault();
             }}>
-            {/* <span
-              onMouseDown={header.getResizeHandler()}
-              onTouchStart={header.getResizeHandler()}
-              className={cn(
-                'hover:bg-primary group-hover:bg-border absolute top-0 -right-[2.5px] z-10 h-full w-1 cursor-col-resize transition-colors duration-100 select-none hover:w-1',
-                header.column.getIsResizing() && 'bg-primary'
-              )}
-            /> */}
-
             <span
               onMouseDown={header.getResizeHandler()}
               onTouchStart={header.getResizeHandler()}
@@ -114,6 +103,7 @@ interface DataGridHeaderProps {
   table: Table<Record<string, string | number | Date | null>>;
   sortable: boolean;
   resizable: boolean;
+  draggable: boolean;
   rowVirtualizer: Virtualizer<HTMLDivElement, Element>;
 }
 
@@ -121,7 +111,8 @@ export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
   rowVirtualizer,
   table,
   sortable,
-  resizable
+  resizable,
+  draggable
 }) => {
   const overTargetId = useSortColumnContext((x) => x.overTargetId);
 
@@ -143,6 +134,7 @@ export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
                   key={header.id}
                   header={header}
                   sortable={sortable}
+                  draggable={draggable}
                   resizable={resizable}
                   isOverTarget={overTargetId === header.id}
                 />

web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx

@@ -20,6 +20,9 @@ const meta: Meta<typeof TanStackDataGrid> = {
   tags: ['autodocs'],
   args: {
     rows: sampleData,
+    draggable: true,
+    sortable: true,
+    resizable: true,
     onReorderColumns: fn(),
     onResizeColumns: fn(),
     onReady: fn()
@@ -55,7 +58,16 @@ export const NonEditable: Story = {
     ...meta.args,
     rows: sampleData,
     resizable: false,
-    sortable: false
+    sortable: false,
+    draggable: false
+  }
+};
+
+export const NonDraggable: Story = {
+  args: {
+    ...meta.args,
+    rows: sampleData,
+    draggable: false
   }
 };
 

web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.tsx

@@ -22,6 +22,7 @@ export interface TanStackDataGridProps {
   className?: string;
   resizable?: boolean;
   sortable?: boolean;
+  draggable?: boolean;
   rows: Record<string, string | number | null | Date>[];
   columnOrder?: string[];
   columnWidths?: Record<string, number>;
@@ -42,6 +43,7 @@ export const TanStackDataGrid: React.FC<TanStackDataGridProps> = React.memo(
     className = '',
     resizable = true,
     sortable = true,
+    draggable = true,
     columnWidths: columnWidthsProp,
     columnOrder: serverColumnOrder,
     onReorderColumns,
@@ -74,9 +76,10 @@ export const TanStackDataGrid: React.FC<TanStackDataGridProps> = React.memo(
           header: () => headerFormat(field, field),
           cell: (info) => cellFormat(info.getValue(), field),
           enableSorting: sortable,
-          enableResizing: resizable
+          enableResizing: resizable,
+          enableDragging: draggable
         })),
-      [fields, headerFormat, cellFormat, sortable, resizable]
+      [fields, headerFormat, cellFormat, sortable, resizable, draggable]
     );
 
     // Create the table instance.
@@ -88,6 +91,7 @@ export const TanStackDataGrid: React.FC<TanStackDataGridProps> = React.memo(
         columnSizing,
         columnOrder: colOrder
       },
+      enableSorting: sortable,
       onSortingChange: setSorting,
       onColumnSizingChange: setColumnSizing,
       onColumnOrderChange: setColOrder,
@@ -137,6 +141,7 @@ export const TanStackDataGrid: React.FC<TanStackDataGridProps> = React.memo(
             <DataGridHeader
               table={table}
               sortable={sortable}
+              draggable={draggable}
               resizable={resizable}
               rowVirtualizer={rowVirtualizer}
             />