@idealyst/datagrid 1.0.41 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datagrid",
-  "version": "1.0.41",
+  "version": "1.0.45",
   "description": "High-performance datagrid component for React and React Native",
   "documentation": "https://github.com/your-username/idealyst-framework/tree/main/packages/datagrid#readme",
   "main": "src/index.ts",
@@ -35,8 +35,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.40",
-    "@idealyst/theme": "^1.0.40",
+    "@idealyst/components": "^1.0.45",
+    "@idealyst/theme": "^1.0.45",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-unistyles": "^3.0.4",

package/src/DataGrid/DataGrid.native.tsx

@@ -0,0 +1,267 @@
+import React, { useState, useCallback, useMemo, memo } from 'react';
+import { FlatList, FlatListProps, TouchableOpacity, ScrollView } from 'react-native';
+import { View, Text } from '@idealyst/components';
+import type { DataGridProps, Column } from './types';
+
+export function DataGrid<T extends Record<string, any>>({
+  data,
+  columns,
+  rowHeight = 48,
+  headerHeight = 56,
+  onRowClick,
+  onSort,
+  virtualized = true,
+  height = 400,
+  width = '100%',
+  style,
+  headerStyle,
+  rowStyle,
+  selectedRows = [],
+  onSelectionChange,
+  multiSelect = false,
+  stickyHeader = true,
+}: DataGridProps<T>) {
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+
+  // Calculate column widths and total width
+  const { columnWidths, totalWidth } = useMemo(() => {
+    const widths = columns.map(col => col.width || 120);
+    const total = widths.reduce((sum, width) => sum + (typeof width === 'number' ? width : 120), 0);
+    return { columnWidths: widths, totalWidth: total };
+  }, [columns]);
+
+  const handleSort = useCallback((column: Column<T>) => {
+    if (!column.sortable) return;
+    
+    const newDirection = sortColumn === column.key && sortDirection === 'asc' ? 'desc' : 'asc';
+    setSortColumn(column.key);
+    setSortDirection(newDirection);
+    onSort?.(column, newDirection);
+  }, [sortColumn, sortDirection, onSort]);
+
+  const handleRowPress = useCallback((item: T, index: number) => {
+    if (onSelectionChange) {
+      let newSelection: number[];
+      if (multiSelect) {
+        if (selectedRows.includes(index)) {
+          newSelection = selectedRows.filter(i => i !== index);
+        } else {
+          newSelection = [...selectedRows, index];
+        }
+      } else {
+        newSelection = selectedRows.includes(index) ? [] : [index];
+      }
+      onSelectionChange(newSelection);
+    }
+    onRowClick?.(item, index);
+  }, [selectedRows, onSelectionChange, multiSelect, onRowClick]);
+
+  const renderHeader = useMemo(() => (
+    <View style={[
+      {
+        flexDirection: 'row',
+        backgroundColor: '#ffffff',
+        borderBottomWidth: 2,
+        borderBottomColor: '#ddd',
+        height: headerHeight,
+        width: totalWidth,
+        elevation: stickyHeader ? 4 : 0,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+      },
+      headerStyle
+    ]}>
+      {columns.map((column, colIndex) => {
+        const width = columnWidths[colIndex];
+        const isLastColumn = colIndex === columns.length - 1;
+        
+        return (
+          <View
+            key={column.key}
+            style={[
+              {
+                width: typeof width === 'number' ? width : 120,
+                height: '100%',
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+                borderRightWidth: isLastColumn ? 0 : 1,
+                borderRightColor: '#ddd',
+                justifyContent: 'center',
+                backgroundColor: '#ffffff',
+              },
+              column.headerStyle
+            ]}
+          >
+            <Text 
+              weight="bold" 
+              size="small"
+              onPress={column.sortable ? () => handleSort(column) : undefined}
+              style={{ 
+                color: '#374151',
+                ...(column.sortable ? { textDecorationLine: 'underline' } : {})
+              }}
+            >
+              {column.header}
+              {column.sortable && sortColumn === column.key && (
+                <Text style={{ fontSize: 10, color: '#6366f1' }}>
+                  {sortDirection === 'asc' ? ' ▲' : ' ▼'}
+                </Text>
+              )}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  ), [columns, columnWidths, headerHeight, stickyHeader, headerStyle, sortColumn, sortDirection, handleSort]);
+
+  // Memoized row component to prevent unnecessary re-renders
+  const MemoizedRow = memo<{ item: T; index: number; isSelected: boolean; onPress: () => void }>(
+    ({ item, index, isSelected, onPress }) => {
+      const computedRowStyle = typeof rowStyle === 'function' ? rowStyle(item, index) : rowStyle;
+      
+      return (
+        <TouchableOpacity
+          onPress={onPress}
+          style={[
+            {
+              flexDirection: 'row',
+              backgroundColor: isSelected ? '#e0e7ff' : (index % 2 === 0 ? '#fafafa' : '#ffffff'),
+              borderBottomWidth: 1,
+              borderBottomColor: '#e5e7eb',
+              height: rowHeight,
+              width: totalWidth,
+            },
+            computedRowStyle
+          ]}
+        >
+          {columns.map((column, colIndex) => {
+            const value = column.accessor ? column.accessor(item) : item[column.key];
+            const cellContent = column.render ? column.render(value, item, index) : value;
+            const computedCellStyle = typeof column.cellStyle === 'function' 
+              ? column.cellStyle(value, item) 
+              : column.cellStyle;
+            const width = columnWidths[colIndex];
+            const isLastColumn = colIndex === columns.length - 1;
+
+            return (
+              <View
+                key={column.key}
+                style={[
+                  {
+                    width: typeof width === 'number' ? width : 120,
+                    height: '100%',
+                    paddingHorizontal: 12,
+                    paddingVertical: 8,
+                    borderRightWidth: isLastColumn ? 0 : 1,
+                    borderRightColor: '#e5e7eb',
+                    justifyContent: 'center',
+                  },
+                  computedCellStyle
+                ]}
+              >
+                {typeof cellContent === 'string' || typeof cellContent === 'number' ? (
+                  <Text size="small" numberOfLines={1}>
+                    {cellContent}
+                  </Text>
+                ) : (
+                  cellContent
+                )}
+              </View>
+            );
+          })}
+        </TouchableOpacity>
+      );
+    },
+    // Custom comparison function to prevent unnecessary re-renders
+    (prevProps, nextProps) => {
+      // Only re-render if the item, selection state, or index changes
+      return (
+        prevProps.item === nextProps.item &&
+        prevProps.isSelected === nextProps.isSelected &&
+        prevProps.index === nextProps.index
+      );
+    }
+  );
+
+  const renderRow = useCallback(({ item, index }: { item: T; index: number }) => {
+    const isSelected = selectedRows.includes(index);
+    
+    return (
+      <MemoizedRow
+        item={item}
+        index={index}
+        isSelected={isSelected}
+        onPress={() => handleRowPress(item, index)}
+      />
+    );
+  }, [selectedRows, handleRowPress]);
+
+  // Memoize the key extractor
+  const keyExtractor = useCallback((item: T, index: number) => {
+    // Use a unique key based on item data if available, otherwise use index
+    return item.id ? `row-${item.id}` : `row-${index}`;
+  }, []);
+
+  const flatListProps: Partial<FlatListProps<T>> = {
+    data,
+    renderItem: renderRow,
+    keyExtractor,
+    getItemLayout: virtualized ? (data, index) => ({
+      length: rowHeight,
+      offset: rowHeight * index,
+      index,
+    }) : undefined,
+    removeClippedSubviews: virtualized,
+    maxToRenderPerBatch: virtualized ? 15 : data.length,
+    windowSize: virtualized ? 15 : 21,
+    initialNumToRender: virtualized ? 10 : data.length,
+    updateCellsBatchingPeriod: 100,
+    showsVerticalScrollIndicator: true,
+    showsHorizontalScrollIndicator: true,
+    horizontal: false,
+    style: {
+      flex: 1,
+      backgroundColor: '#ffffff',
+    },
+    ListHeaderComponent: stickyHeader ? renderHeader : undefined,
+    stickyHeaderIndices: stickyHeader ? [0] : undefined,
+  };
+
+  return (
+    <View style={[
+      {
+        backgroundColor: '#ffffff',
+        borderWidth: 1,
+        borderColor: '#d1d5db',
+        borderRadius: 8,
+        overflow: 'hidden',
+        width,
+        height,
+      },
+      style
+    ]}>
+      <ScrollView 
+        horizontal 
+        showsHorizontalScrollIndicator={true}
+        style={{ flex: 1 }}
+        contentContainerStyle={{ minWidth: totalWidth }}
+      >
+        <View style={{ width: totalWidth, flex: 1 }}>
+          {!stickyHeader && renderHeader()}
+          <FlatList 
+            {...flatListProps}
+            style={{ flex: 1 }}
+            showsVerticalScrollIndicator={true}
+            ListHeaderComponent={stickyHeader ? renderHeader : undefined}
+            stickyHeaderIndices={stickyHeader ? [0] : undefined}
+            scrollEnabled={true}
+            nestedScrollEnabled={true}
+          />
+        </View>
+      </ScrollView>
+    </View>
+  );
+}

package/src/DataGrid/DataGrid.tsx

@@ -1,8 +1,7 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { View, Text } from '@idealyst/components';
-import { UnistylesRuntime } from 'react-native-unistyles';
 import { ScrollView } from '../primitives/ScrollView';
-import { VirtualizedList } from '../primitives/VirtualizedList';
+import { Table, TableRow, TableCell, TableHeader, TableBody } from '../primitives/Table';
 import type { DataGridProps, Column } from './types';
 
 export function DataGrid<T extends Record<string, any>>({
@@ -25,6 +24,105 @@ export function DataGrid<T extends Record<string, any>>({
 }: DataGridProps<T>) {
   const [sortColumn, setSortColumn] = useState<string | null>(null);
   const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [scrollTop, setScrollTop] = useState(0);
+  const scrollRef = useRef<any>(null);
+
+  // Virtualization calculations
+  const visibleRange = useMemo(() => {
+    if (!virtualized || typeof height !== 'number') {
+      return { start: 0, end: data.length - 1, offsetY: 0 };
+    }
+
+    const containerHeight = height - headerHeight;
+    const startIndex = Math.floor(scrollTop / rowHeight);
+    const visibleCount = Math.ceil(containerHeight / rowHeight) + 2; // Add buffer
+    const endIndex = Math.min(startIndex + visibleCount, data.length - 1);
+    const offsetY = startIndex * rowHeight;
+
+    return { start: startIndex, end: endIndex, offsetY };
+  }, [scrollTop, height, headerHeight, rowHeight, data.length, virtualized]);
+
+  const totalHeight = useMemo(() => {
+    return virtualized ? data.length * rowHeight : 'auto';
+  }, [data.length, rowHeight, virtualized]);
+
+  const visibleData = useMemo(() => {
+    if (!virtualized) return data;
+    return data.slice(visibleRange.start, visibleRange.end + 1);
+  }, [data, visibleRange.start, visibleRange.end, virtualized]);
+
+  // Calculate minimum table width for horizontal scrolling
+  const minTableWidth = useMemo(() => {
+    return columns.reduce((total, column) => {
+      return total + (column.width ? (typeof column.width === 'number' ? column.width : 120) : 120);
+    }, 0);
+  }, [columns]);
+
+  const handleScroll = useCallback((e: any) => {
+    if (virtualized) {
+      // Handle both web and React Native scroll events
+      const scrollY = e.currentTarget?.scrollTop ?? e.nativeEvent?.contentOffset?.y ?? 0;
+      setScrollTop(scrollY);
+    }
+  }, [virtualized]);
+
+  // Helper function to get consistent column styles
+  const getColumnStyle = (column: Column<T>) => {
+    const baseStyle = {
+      boxSizing: 'border-box' as const,
+      flexShrink: 0,
+    };
+    
+    if (column.width) {
+      return {
+        ...baseStyle,
+        width: column.width,
+        flexGrow: 0,
+        flexBasis: column.width,
+      };
+    } else {
+      return {
+        ...baseStyle,
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: column.minWidth || 120,
+        ...(column.maxWidth ? { maxWidth: column.maxWidth } : {}),
+      };
+    }
+  };
+
+  // Helper function for consistent cell base styles  
+  const getCellBaseStyle = (theme: any) => ({
+    padding: theme.spacing.sm,
+    borderRightWidth: 1,
+  });
+
+  // Helper function for platform-specific header styles
+  const getStickyHeaderStyle = (theme: any) => {
+    if (!stickyHeader) return {};
+    
+    // Platform detection - check if we're on web or native
+    const isWeb = typeof document !== 'undefined';
+    
+    if (isWeb) {
+      return {
+        position: 'sticky' as const,
+        top: 0,
+        zIndex: 100,
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+      };
+    } else {
+      // React Native - use elevation instead of boxShadow
+      return {
+        elevation: 4,
+        zIndex: 100,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+      };
+    }
+  };
 
   const handleSort = useCallback((column: Column<T>) => {
     if (!column.sortable) return;
@@ -53,136 +151,153 @@ export function DataGrid<T extends Record<string, any>>({
   }, [selectedRows, onSelectionChange, multiSelect, onRowClick]);
 
   const renderHeader = () => (
-    <View style={[
-      (theme) => ({
-        flexDirection: 'row',
-        backgroundColor: theme.colors.neutral[50],
-        borderBottomWidth: 2,
-        borderBottomColor: theme.colors.neutral[200],
-      }),
-      headerStyle
-    ]}>
+    <TableRow style={(theme) => ({
+      backgroundColor: stickyHeader ? '#ffffff' : theme.colors.neutral[50],
+      borderBottomWidth: 2,
+      borderBottomColor: theme.colors.neutral[200],
+      minHeight: headerHeight,
+      flexDirection: 'row',
+      ...getStickyHeaderStyle(theme),
+      ...headerStyle,
+    })}>
       {columns.map((column) => (
-        <View
+        <TableCell
           key={column.key}
-          style={[
-            (theme) => ({
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              padding: theme.spacing.sm,
-              borderRightWidth: 1,
-              borderRightColor: theme.colors.neutral[200],
-            }),
-            { width: column.width || 'auto', minWidth: column.minWidth, maxWidth: column.maxWidth },
-            column.headerStyle,
-          ]}
+          width={column.width}
+          style={(theme) => ({
+            ...getCellBaseStyle(theme),
+            borderRightColor: theme.colors.neutral[200],
+            backgroundColor: stickyHeader ? '#ffffff' : theme.colors.neutral[50],
+            ...column.headerStyle,
+          })}
         >
           <Text weight="bold" style={(theme) => ({
             fontSize: 14,
             color: theme.colors.neutral[700],
           })}>
             {column.header}
+            {column.sortable && (
+              <Text as="span" style={(theme) => ({
+                fontSize: 10,
+                marginLeft: theme.spacing.xs,
+                color: theme.colors.primary[500],
+              })}>
+                {sortColumn === column.key ? ` ${sortDirection === 'asc' ? '▲' : '▼'}` : ''}
+              </Text>
+            )}
           </Text>
-          {column.sortable && (
-            <Text style={(theme) => ({
-              fontSize: 10,
-              marginLeft: theme.spacing.xs,
-              color: theme.colors.primary[500],
-            })}>
-              {sortColumn === column.key ? (sortDirection === 'asc' ? '▲' : '▼') : ''}
-            </Text>
-          )}
-        </View>
+        </TableCell>
       ))}
-    </View>
+    </TableRow>
   );
 
-  const renderRow = ({ item, index }: { item: T; index: number }) => {
-    const isSelected = selectedRows.includes(index);
-    const computedRowStyle = typeof rowStyle === 'function' ? rowStyle(item, index) : rowStyle;
+  const renderRow = (item: T, virtualIndex: number) => {
+    const actualIndex = virtualized ? visibleRange.start + virtualIndex : virtualIndex;
+    const isSelected = selectedRows.includes(actualIndex);
+    const computedRowStyle = typeof rowStyle === 'function' ? rowStyle(item, actualIndex) : rowStyle;
     
     return (
-      <View
-        style={[
-          (theme) => ({
-            flexDirection: 'row',
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.neutral[100],
-            backgroundColor: theme.colors.background,
-          }),
-          isSelected && ((theme) => ({
-            backgroundColor: theme.colors.primary[50],
-          })),
-          computedRowStyle,
-        ]}
-        onPress={() => handleRowClick(item, index)}
+      <TableRow
+        key={actualIndex}
+        style={(theme) => ({
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.neutral[100],
+          backgroundColor: isSelected ? theme.colors.primary[50] : theme.colors.background,
+          minHeight: rowHeight,
+          flexDirection: 'row',
+          ...computedRowStyle,
+        })}
+        onPress={() => handleRowClick(item, actualIndex)}
       >
         {columns.map((column) => {
           const value = column.accessor ? column.accessor(item) : item[column.key];
-          const cellContent = column.render ? column.render(value, item, index) : value;
+          const cellContent = column.render ? column.render(value, item, actualIndex) : value;
           const computedCellStyle = typeof column.cellStyle === 'function' 
             ? column.cellStyle(value, item) 
             : column.cellStyle;
           
           return (
-            <View
+            <TableCell
               key={column.key}
-              style={[
-                (theme) => ({
-                  padding: theme.spacing.sm,
-                  borderRightWidth: 1,
-                  borderRightColor: theme.colors.neutral[100],
-                  justifyContent: 'center',
-                }),
-                { width: column.width || 'auto', minWidth: column.minWidth, maxWidth: column.maxWidth },
-                computedCellStyle,
-              ]}
+              width={column.width}
+              style={(theme) => ({
+                ...getCellBaseStyle(theme),
+                borderRightColor: theme.colors.neutral[100],
+                ...computedCellStyle,
+              })}
             >
               {typeof cellContent === 'string' || typeof cellContent === 'number' ? (
                 <Text>{cellContent}</Text>
               ) : (
                 cellContent
               )}
-            </View>
+            </TableCell>
           );
         })}
-      </View>
+      </TableRow>
     );
   };
 
   const containerHeight = typeof height === 'number' ? height : undefined;
 
   return (
-    <View style={[
-      (theme) => ({
-        backgroundColor: theme.colors.background,
-        borderWidth: 1,
-        borderColor: theme.colors.neutral[200],
-        borderRadius: theme.radius.md,
-        overflow: 'hidden',
-      }),
-      { width, height },
-      style
-    ]}>
-      {stickyHeader && renderHeader()}
-      {virtualized && containerHeight ? (
-        <VirtualizedList
-          data={data}
-          renderItem={renderRow}
-          itemHeight={rowHeight}
-          height={containerHeight - (stickyHeader ? headerHeight : 0)}
-          width={width}
-        />
-      ) : (
-        <ScrollView
-          style={{ flex: 1 }}
-          showsVerticalScrollIndicator={true}
-        >
-          {!stickyHeader && renderHeader()}
-          {data.map((item, index) => renderRow({ item, index }))}
-        </ScrollView>
-      )}
+    <View style={(theme) => ({
+      backgroundColor: theme.colors.background,
+      borderWidth: 1,
+      borderColor: theme.colors.neutral[200],
+      borderRadius: theme.radius.md,
+      overflow: 'hidden',
+      width,
+      height,
+      display: 'flex',
+      flexDirection: 'column',
+      ...style,
+    })}>
+      <ScrollView
+        style={{ 
+          flex: 1,
+          ...(containerHeight ? { maxHeight: containerHeight } : {})
+        }}
+        contentContainerStyle={{
+          width: minTableWidth,
+        }}
+        showsVerticalScrollIndicator={true}
+        showsHorizontalScrollIndicator={true}
+        bounces={false}
+        directionalLockEnabled={false}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+      >
+        <Table style={{
+          width: minTableWidth,
+          ...(virtualized ? { height: totalHeight } : {})
+        }}>
+          <TableHeader>
+            {renderHeader()}
+          </TableHeader>
+          <TableBody>
+            {virtualized && visibleRange.offsetY > 0 && (
+              <TableRow style={{ height: visibleRange.offsetY }}>
+                <TableCell 
+                  style={{ padding: 0, borderWidth: 0, height: visibleRange.offsetY }} 
+                  colSpan={columns.length}
+                >
+                </TableCell>
+              </TableRow>
+            )}
+            {visibleData.map((item, index) => renderRow(item, index))}
+            {virtualized && (data.length - visibleRange.end - 1) > 0 && (
+              <TableRow style={{ height: (data.length - visibleRange.end - 1) * rowHeight }}>
+                <TableCell 
+                  style={{ padding: 0, borderWidth: 0, height: (data.length - visibleRange.end - 1) * rowHeight }} 
+                  colSpan={columns.length}
+                >
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </ScrollView>
     </View>
   );
 }