move to new component

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

@@ -1,6 +1,6 @@
 import type { IDataResult } from '@/api/asset_interfaces';
 import { ShimmerText } from '@/components/ui/typography/ShimmerText';
-import AppDataGrid from '@/components/ui/table/AppDataGrid';
+import { AppDataGrid } from '@/components/ui/table/AppDataGrid';
 import { useUserConfigContextSelector } from '@/context/Users';
 import React from 'react';
 import { Text } from '@/components/ui/typography';
@@ -25,11 +25,10 @@ export const OverviewData: React.FC<{
       ) : !isEmpty(data) ? (
         <AppDataGrid
           rows={data || []}
-          headerFormat={isAdmin ? (v) => v : undefined}
+          headerFormat={isAdmin ? (v) => String(v) : undefined}
           cellFormat={defaultCellFormatter}
           resizable={true}
-          draggable={false}
-          animate={false}
+          sortable={false}
         />
       ) : (
         <EmptyState />

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

@@ -26,7 +26,7 @@ export const DataContainer: React.FC<{
       />
 
       {hasData ? (
-        <AppDataGrid rows={data} resizable={true} draggable={false} animate={false} />
+        <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/charts/TableChart/BusterTableChart.tsx

@@ -9,7 +9,7 @@ import {
 } from '@/api/asset_interfaces/metric';
 import { useMemoizedFn } from '@/hooks';
 import { useChartWrapperContextSelector } from '../chartHooks/useChartWrapperProvider';
-import AppDataGrid from '@/components/ui/table/AppDataGrid/AppDataGrid';
+import { AppDataGrid } from '@/components/ui/table/AppDataGrid';
 import './TableChart.css';
 import { cn } from '@/lib/classMerge';
 
@@ -84,10 +84,9 @@ const BusterTableChartBase: React.FC<
       className={cn('buster-table-chart', className)}
       key={data.length}
       rows={data}
-      initialWidth={containerWidth}
       columnOrder={tableColumnOrder || undefined}
       columnWidths={tableColumnWidths || undefined}
-      draggable={!readOnly}
+      sortable={!readOnly}
       resizable={!readOnly}
       onReady={onReady}
       headerFormat={onFormatHeader}

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

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { AppDataGrid } from './AppDataGrid';
+import { ReactDataGrid } from './ReactDataGrid';
 
-const meta: Meta<typeof AppDataGrid> = {
-  title: 'UI/Table/AppDataGrid',
-  component: AppDataGrid,
+const meta: Meta<typeof ReactDataGrid> = {
+  title: 'UI/Table/ReactDataGrid',
+  component: ReactDataGrid,
   parameters: {
     layout: 'fullscreen'
   },
@@ -11,7 +11,7 @@ const meta: Meta<typeof AppDataGrid> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AppDataGrid>;
+type Story = StoryObj<typeof ReactDataGrid>;
 
 const sampleData = [
   { id: 1, name: 'John Doe', age: 30, email: 'john@example.com', joinDate: new Date('2023-01-15') },

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

@@ -14,21 +14,21 @@ import isString from 'lodash/isString';
 import { Text } from '@/components/ui/typography';
 import round from 'lodash/round';
 import { ErrorBoundary } from '@/components/ui/error';
-import { CaretDown } from '../../icons/NucleoIconFilled';
+import { CaretDown } from '../../../icons/NucleoIconFilled';
 import styles from './AppDataGrid.module.css';
 
 //https://www.npmjs.com/package/react-spreadsheet-grid#live-playground
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { useDebounceEffect, useDebounceFn, useMemoizedFn, useMount, useSize } from '@/hooks';
+import { useDebounceFn, useMemoizedFn, useMount, useSize } from '@/hooks';
 import sampleSize from 'lodash/sampleSize';
 import isEmpty from 'lodash/isEmpty';
+import { cn } from '@/lib/classMerge';
 import {
   createInitialColumnWidths,
   defaultCellFormat,
   defaultHeaderFormat,
   MIN_WIDTH
 } from './helpers';
-import { cn } from '@/lib/classMerge';
 
 type Row = Record<string, string | number | null | Date>;
 
@@ -38,7 +38,7 @@ const DEFAULT_COLUMN_WIDTH = {
   //  maxWidth: columnsOrder.length <= 2 ? undefined : MAX_WIDTH
 };
 
-export interface AppDataGridProps {
+export interface ReactDataGridProps {
   className?: string;
   initialWidth?: number;
   animate?: boolean;
@@ -60,7 +60,7 @@ export interface AppDataGridProps {
   ) => void;
 }
 
-export const AppDataGrid: React.FC<AppDataGridProps> = React.memo(
+export const ReactDataGrid: React.FC<ReactDataGridProps> = React.memo(
   ({
     className = '',
     resizable = true,
@@ -355,7 +355,7 @@ export const AppDataGrid: React.FC<AppDataGridProps> = React.memo(
     );
   },
   (prevProps, nextProps) => {
-    const keysToCheck: (keyof AppDataGridProps)[] = [
+    const keysToCheck: (keyof ReactDataGridProps)[] = [
       'cellFormat',
       'headerFormat',
       'columnOrder',
@@ -366,7 +366,7 @@ export const AppDataGrid: React.FC<AppDataGridProps> = React.memo(
     return keysToCheck.every((key) => prevProps[key] === nextProps[key]);
   }
 );
-AppDataGrid.displayName = 'AppDataGrid';
+ReactDataGrid.displayName = 'AppDataGrid';
 
 const HeaderCell: React.FC<
   RenderHeaderCellProps<Row, unknown> & {
@@ -406,4 +406,4 @@ const GridCell: React.FC<
 });
 GridCell.displayName = 'GridCell';
 
-export default AppDataGrid;
+export default ReactDataGrid;

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

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, useEffect, useMemo, useRef, useState } from 'react';
 import {
   DndContext,
   DragOverlay,
@@ -67,8 +67,8 @@ const DraggableHeader: React.FC<DraggableHeaderProps> = React.memo(
         ref={setDropNodeRef}
         style={style}
         className={cn(
-          'group relative border-r select-none last:border-r-0',
-          header.column.getIsResizing() && 'bg-primary/8',
+          'group bg-background relative border-r select-none last:border-r-0',
+          header.column.getIsResizing() ? 'bg-primary/8' : 'hover:bg-item-hover',
           isOverTarget &&
             'bg-primary/10 border-primary inset rounded-sm border border-r border-dashed'
         )}
@@ -169,6 +169,8 @@ export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
   // Reference to the style element for cursor handling
   const styleRef = useRef<HTMLStyleElement | null>(null);
 
+  const memoizedModifiers = useMemo(() => [restrictToHorizontalAxis], []);
+
   const sensors = useSensors(
     useSensor(MouseSensor, {
       activationConstraint: {
@@ -257,15 +259,15 @@ export const DataGridHeader: React.FC<DataGridHeaderProps> = ({
   }, []);
 
   return (
-    <thead className="bg-background sticky top-0 z-10 w-full" suppressHydrationWarning>
+    <thead className="bg-background sticky top-0 z-10 w-full border-b" suppressHydrationWarning>
       <DndContext
         sensors={sensors}
-        modifiers={[restrictToHorizontalAxis]}
+        modifiers={memoizedModifiers}
         collisionDetection={pointerWithin}
         onDragStart={onDragStart}
         onDragOver={onDragOver}
         onDragEnd={onDragEnd}>
-        <tr className="flex border-b">
+        <tr className="flex">
           {table
             .getHeaderGroups()[0]
             ?.headers.map(

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

@@ -9,7 +9,7 @@ import {
   SortingState
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { defaultCellFormat, defaultHeaderFormat } from '../helpers';
+import { defaultCellFormat, defaultHeaderFormat } from './defaultFormat';
 import { cn } from '@/lib/classMerge';
 import { DataGridHeader } from './DataGridHeader';
 import { DataGridRow } from './DataGridRow';

web/src/components/ui/table/AppDataGrid/TanStackDataGrid/defaultFormat.ts

@@ -0,0 +1,4 @@
+import { makeHumanReadble } from '@/lib/text';
+
+export const defaultHeaderFormat = (v: any) => makeHumanReadble(v);
+export const defaultCellFormat = (v: any) => v;

web/src/components/ui/table/AppDataGrid/index.ts

@@ -1,4 +1,3 @@
-import AppDataGrid from './AppDataGrid';
-export { AppDataGrid };
+import { TanStackDataGrid } from './TanStackDataGrid';
 
-export default AppDataGrid;
+export { TanStackDataGrid as AppDataGrid };