make a few refernces more stable

web/src/app/app/(primary_layout)/datasets/[datasetId]/overview/OverviewData.tsx

@@ -25,10 +25,8 @@ export const OverviewData: React.FC<{
       ) : !isEmpty(data) ? (
         <AppDataGrid
           rows={data || []}
-          headerFormat={isAdmin ? (v) => String(v) : undefined}
+          headerFormat={isAdmin ? stableHeaderFormat : undefined}
           cellFormat={defaultCellFormatter}
-          resizable={true}
-          sortable={false}
         />
       ) : (
         <EmptyState />
@@ -54,3 +52,7 @@ const LoadingState: React.FC<{}> = () => {
     </div>
   );
 };
+
+const stableHeaderFormat = (value: string | number | Date | null, key: string): string => {
+  return String(value);
+};

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

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

web/src/components/ui/charts/TableChart/BusterTableChart.tsx

@@ -85,6 +85,7 @@ const BusterTableChartBase: React.FC<
       columnWidths={tableColumnWidths || undefined}
       sortable={!readOnly}
       resizable={!readOnly}
+      draggable={!readOnly}
       onReady={onReady}
       headerFormat={onFormatHeader}
       cellFormat={onFormatCell}

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

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
 import { Header, Table } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
 import { cn } from '@/lib/classMerge';
@@ -16,8 +16,13 @@ interface DraggableHeaderProps {
   draggable: boolean;
 }
 
-const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
+const DraggableHeader: React.FC<DraggableHeaderProps> = ({
-  ({ header, sortable, resizable, isOverTarget, draggable }) => {
+  header,
+  sortable,
+  resizable,
+  isOverTarget,
+  draggable
+}) => {
   // Set up dnd-kit's useDraggable for this header cell
   const {
     attributes,
@@ -65,6 +70,9 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
         <span className="text-gray-dark text-base font-normal">
           {flexRender(header.column.columnDef.header, header.getContext())}
         </span>
+
+        {sortable && (
+          <>
             {header.column.getIsSorted() === 'asc' && (
               <span className="text-icon-color text-xs">
                 <CaretUp />
@@ -75,6 +83,8 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
                 <CaretDown />
               </span>
             )}
+          </>
+        )}
       </span>
       {resizable && (
         <span
@@ -94,8 +104,7 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
       )}
     </th>
   );
-  }
+};
-);
 
 DraggableHeader.displayName = 'DraggableHeader';
 

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

@@ -71,6 +71,22 @@ export const NonDraggable: Story = {
   }
 };
 
+export const NonResizable: Story = {
+  args: {
+    ...meta.args,
+    rows: sampleData,
+    resizable: false
+  }
+};
+
+export const NonSortable: Story = {
+  args: {
+    ...meta.args,
+    rows: sampleData,
+    sortable: false
+  }
+};
+
 export const CustomColumnOrder: Story = {
   args: {
     ...meta.args,