From d1335c7f4c819ddd3a8b19070ad7207a0f51004a Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Sat, 5 Apr 2025 19:07:29 -0600
Subject: [PATCH] sortable updates

---
 .../TanStackDataGrid/SortColumnWrapper.tsx    | 30 +++++++++----------
 .../TanStackDataGrid.stories.tsx              |  6 ++--
 .../TanStackDataGrid/TanStackDataGrid.tsx     |  4 +--
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/SortColumnWrapper.tsx b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/SortColumnWrapper.tsx
index f626e345f..88fb81a53 100644
--- a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/SortColumnWrapper.tsx
+++ b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/SortColumnWrapper.tsx
@@ -15,18 +15,24 @@ import {
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import { arrayMove } from '@dnd-kit/sortable';
 import { flexRender, Header, Table } from '@tanstack/react-table';
-import { useState, useRef, useMemo, useEffect } from 'react';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
 import { useContextSelector, createContext } from 'use-context-selector';
 import { HEADER_HEIGHT } from './constants';
 
+const ACTIVATION_CONSTRAINT = {
+  activationConstraint: {
+    distance: 2
+  }
+};
+
 export const SortColumnWrapper: React.FC<{
   table: Table<Record<string, string | number | Date | null>>;
-  sortable: boolean;
+  draggable: boolean;
   children: React.ReactNode;
   colOrder: string[];
   setColOrder: (colOrder: string[]) => void;
   onReorderColumns?: (colOrder: string[]) => void;
-}> = ({ table, sortable, children, colOrder, setColOrder, onReorderColumns }) => {
+}> = React.memo(({ table, draggable, children, colOrder, setColOrder, onReorderColumns }) => {
   // Track active drag item and over target
   const [activeId, setActiveId] = useState<string | null>(null);
   const [overTargetId, setOverTargetId] = useState<string | null>(null);
@@ -42,16 +48,8 @@ export const SortColumnWrapper: React.FC<{
   const memoizedModifiers = useMemo(() => [restrictToHorizontalAxis], []);
 
   const sensors = useSensors(
-    useSensor(MouseSensor, {
-      activationConstraint: {
-        distance: 2
-      }
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        distance: 2
-      }
-    }),
+    useSensor(MouseSensor, ACTIVATION_CONSTRAINT),
+    useSensor(TouchSensor, ACTIVATION_CONSTRAINT),
     useSensor(KeyboardSensor)
   );
 
@@ -128,7 +126,7 @@ export const SortColumnWrapper: React.FC<{
     };
   }, []);
 
-  if (!sortable) return <>{children}</>;
+  if (!draggable) return <>{children}</>;
 
   return (
     <DndContext
@@ -151,7 +149,9 @@ export const SortColumnWrapper: React.FC<{
       </SortColumnContext.Provider>
     </DndContext>
   );
-};
+});
+
+SortColumnWrapper.displayName = 'SortColumnWrapper';
 
 type SortColumnContextType = {
   overTargetId: string | null;
diff --git a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx
index 2e35924a0..55e2a0348 100644
--- a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx
+++ b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.stories.tsx
@@ -75,7 +75,8 @@ export const NonResizable: Story = {
   args: {
     ...meta.args,
     rows: sampleData,
-    resizable: false
+    resizable: false,
+    draggable: true
   }
 };
 
@@ -83,7 +84,8 @@ export const NonSortable: Story = {
   args: {
     ...meta.args,
     rows: sampleData,
-    sortable: false
+    sortable: false,
+    draggable: true
   }
 };
 
diff --git a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.tsx b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.tsx
index 599df7b48..aa38c08fc 100644
--- a/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.tsx
+++ b/web/src/components/ui/table/AppDataGrid/TanStackDataGrid/TanStackDataGrid.tsx
@@ -16,7 +16,7 @@ import { DataGridRow } from './DataGridRow';
 import { CELL_HEIGHT, OVERSCAN } from './constants';
 import { initializeColumnWidths } from './initializeColumnWidths';
 import { SortColumnWrapper } from './SortColumnWrapper';
-import { useDebounceFn, useThrottleFn } from '@/hooks';
+import { useDebounceFn } from '@/hooks';
 
 export interface TanStackDataGridProps {
   className?: string;
@@ -133,7 +133,7 @@ export const TanStackDataGrid: React.FC<TanStackDataGridProps> = React.memo(
       <div ref={parentRef} className={cn('h-full w-full overflow-auto', className)}>
         <SortColumnWrapper
           table={table}
-          sortable={sortable}
+          draggable={draggable}
           colOrder={colOrder}
           setColOrder={setColOrder}
           onReorderColumns={onReorderColumns}>