@idealyst/datagrid 1.0.83 → 1.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/datagrid",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "description": "High-performance datagrid component for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/datagrid#readme",
   "readme": "README.md",
@@ -36,8 +36,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.83",
-    "@idealyst/theme": "^1.0.83",
+    "@idealyst/components": "^1.0.84",
+    "@idealyst/theme": "^1.0.84",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-unistyles": "^3.0.4",
@@ -61,8 +61,13 @@
     }
   },
   "devDependencies": {
+    "@idealyst/components": "^1.0.84",
+    "@idealyst/theme": "^1.0.84",
     "@types/react": "^19.1.0",
     "@types/react-window": "^1.8.8",
+    "react": "^19.1.0",
+    "react-native": "^0.80.1",
+    "react-native-unistyles": "^3.0.10",
     "typescript": "^5.0.0"
   },
   "files": [

package/src/DataGrid/DataGrid.native.tsx

@@ -71,6 +71,7 @@ export function DataGrid<T extends Record<string, any>>({
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.1,
         shadowRadius: 4,
+        minHeight: 300,
       },
       headerStyle
     ]}>
@@ -97,7 +98,7 @@ export function DataGrid<T extends Record<string, any>>({
           >
             <Text 
               weight="bold" 
-              size="small"
+              size="sm"
               onPress={column.sortable ? () => handleSort(column) : undefined}
               style={{ 
                 color: '#374151',
@@ -163,7 +164,7 @@ export function DataGrid<T extends Record<string, any>>({
                 ]}
               >
                 {typeof cellContent === 'string' || typeof cellContent === 'number' ? (
-                  <Text size="small" numberOfLines={1}>
+                  <Text size="sm" numberOfLines={1}>
                     {cellContent}
                   </Text>
                 ) : (

package/src/DataGrid/DataGrid.styles.tsx

@@ -0,0 +1,188 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles } from '@idealyst/theme';
+
+type CellAlignment = 'left' | 'center' | 'right';
+
+type DataGridVariants = {
+  stickyHeader: boolean;
+  virtualized: boolean;
+  selected: boolean;
+  clickable: boolean;
+  alignment: CellAlignment;
+};
+
+export type ExpandedDataGridStyles = StylesheetStyles<keyof DataGridVariants>;
+
+export type DataGridStylesheet = {
+  container: ExpandedDataGridStyles;
+  scrollView: ExpandedDataGridStyles;
+  scrollViewContent: ExpandedDataGridStyles;
+  table: ExpandedDataGridStyles;
+  header: ExpandedDataGridStyles;
+  headerRow: ExpandedDataGridStyles;
+  headerCell: ExpandedDataGridStyles;
+  headerText: ExpandedDataGridStyles;
+  row: ExpandedDataGridStyles;
+  cell: ExpandedDataGridStyles;
+  spacerRow: ExpandedDataGridStyles;
+  spacerCell: ExpandedDataGridStyles;
+};
+
+/**
+ * Generate DataGrid styles
+ */
+export const dataGridStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+      borderWidth: 1,
+      borderColor: theme.colors.border.primary,
+      borderStyle: 'solid',
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+      _web: {
+        boxSizing: 'border-box',
+      },
+    },
+
+    scrollView: {
+      flex: 1,
+    },
+
+    scrollViewContent: {
+      // Dynamic width set in component based on column widths
+    },
+
+    table: {
+      // Dynamic width and height set in component
+    },
+
+    header: ({ stickyHeader }: DataGridVariants) => ({
+      variants: {
+        stickyHeader: {
+          true: {
+            _web: {
+              position: 'sticky',
+              top: 0,
+              zIndex: 100,
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+            },
+            _native: {
+              elevation: 4,
+              zIndex: 100,
+              shadowColor: '#000',
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.1,
+              shadowRadius: 4,
+            },
+          },
+          false: {},
+        },
+      },
+    }),
+
+    headerRow: ({ stickyHeader }: DataGridVariants) => ({
+      backgroundColor: stickyHeader ? theme.colors.surface.primary : theme.colors.surface.secondary,
+      borderBottomWidth: 2,
+      borderBottomColor: theme.colors.border.secondary,
+      borderStyle: 'solid',
+      flexDirection: 'row',
+      variants: {
+        stickyHeader: {
+          true: {
+            backgroundColor: theme.colors.surface.primary,
+          },
+          false: {
+            backgroundColor: theme.colors.surface.secondary,
+          },
+        },
+      },
+    }),
+
+    headerCell: {
+      padding: theme.sizes.view.md.spacing,
+      borderRightWidth: 1,
+      borderRightColor: theme.colors.border.secondary,
+      borderStyle: 'solid',
+      _web: {
+        boxSizing: 'border-box',
+      },
+    },
+
+    headerText: ({ clickable }: DataGridVariants) => ({
+      userSelect: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      variants: {
+        clickable: {
+          true: {
+            _web: {
+              cursor: 'pointer',
+            },
+          },
+          false: {
+            _web: {
+              cursor: 'default',
+            },
+          },
+        },
+      },
+    }),
+
+    row: ({ selected }: DataGridVariants) => ({
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border.primary,
+      borderStyle: 'solid',
+      backgroundColor: theme.colors.surface.primary,
+      flexDirection: 'row',
+      _web: {
+        transition: 'background-color 0.2s ease',
+      },
+      variants: {
+        selected: {
+          true: {
+            backgroundColor: theme.intents.primary.hover,
+          },
+          false: {
+            backgroundColor: theme.colors.surface.primary,
+          },
+        },
+      },
+    }),
+
+    cell: ({ alignment }: DataGridVariants) => ({
+      padding: theme.sizes.view.md.spacing,
+      borderRightWidth: 1,
+      borderRightColor: theme.colors.border.primary,
+      borderStyle: 'solid',
+      _web: {
+        boxSizing: 'border-box',
+      },
+      variants: {
+        alignment: {
+          left: {
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+          },
+          center: {
+            justifyContent: 'center',
+            alignItems: 'center',
+          },
+          right: {
+            justifyContent: 'flex-end',
+            alignItems: 'flex-end',
+          },
+        },
+      },
+    }),
+
+    spacerRow: {
+      // Dynamic height set in component
+    },
+
+    spacerCell: {
+      padding: 0,
+      borderWidth: 0,
+    },
+  };
+});

package/src/DataGrid/DataGrid.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useMemo, useRef } from 'react';
 import { View, Text } from '@idealyst/components';
 import { ScrollView } from '../primitives/ScrollView';
 import { Table, TableRow, TableCell, TableHeader, TableBody } from '../primitives/Table';
 import type { DataGridProps, Column } from './types';
+import { dataGridStyles } from './DataGrid.styles';
 
 export function DataGrid<T extends Record<string, any>>({
   data,
@@ -25,7 +26,6 @@ export function DataGrid<T extends Record<string, any>>({
   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(() => {
@@ -72,7 +72,7 @@ export function DataGrid<T extends Record<string, any>>({
       boxSizing: 'border-box' as const,
       flexShrink: 0,
     };
-    
+
     if (column.width) {
       return {
         ...baseStyle,
@@ -91,39 +91,6 @@ export function DataGrid<T extends Record<string, any>>({
     }
   };
 
-  // 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;
     
@@ -151,37 +118,28 @@ export function DataGrid<T extends Record<string, any>>({
   }, [selectedRows, onSelectionChange, multiSelect, onRowClick]);
 
   const renderHeader = () => (
-    <TableRow style={(theme) => ({
-      backgroundColor: stickyHeader ? '#ffffff' : theme.colors.neutral[50],
-      borderBottomWidth: 2,
-      borderBottomColor: theme.colors.neutral[200],
+    <TableRow style={{
+      ...dataGridStyles.headerRow({ stickyHeader }),
       minHeight: headerHeight,
-      flexDirection: 'row',
-      ...getStickyHeaderStyle(theme),
       ...headerStyle,
-    })}>
+    }}>
       {columns.map((column) => (
         <TableCell
           key={column.key}
           width={column.width}
-          style={(theme) => ({
-            ...getCellBaseStyle(theme),
-            borderRightColor: theme.colors.neutral[200],
-            backgroundColor: stickyHeader ? '#ffffff' : theme.colors.neutral[50],
-            ...column.headerStyle,
-          })}
+          style={{
+            ...dataGridStyles.headerCell,
+            ...getColumnStyle(column),
+          }}
+          onPress={column.sortable ? () => handleSort(column) : undefined}
         >
-          <Text weight="bold" style={(theme) => ({
-            fontSize: 14,
-            color: theme.colors.neutral[700],
-          })}>
+          <Text
+            weight="bold"
+            style={dataGridStyles.headerText({ clickable: column.sortable || false })}
+          >
             {column.header}
             {column.sortable && (
-              <Text as="span" style={(theme) => ({
-                fontSize: 10,
-                marginLeft: theme.spacing.xs,
-                color: theme.colors.primary[500],
-              })}>
+              <Text style={{ marginLeft: 4 }}>
                 {sortColumn === column.key ? ` ${sortDirection === 'asc' ? '▲' : '▼'}` : ''}
               </Text>
             )}
@@ -195,36 +153,33 @@ export function DataGrid<T extends Record<string, any>>({
     const actualIndex = virtualized ? visibleRange.start + virtualIndex : virtualIndex;
     const isSelected = selectedRows.includes(actualIndex);
     const computedRowStyle = typeof rowStyle === 'function' ? rowStyle(item, actualIndex) : rowStyle;
-    
+
     return (
       <TableRow
         key={actualIndex}
-        style={(theme) => ({
-          borderBottomWidth: 1,
-          borderBottomColor: theme.colors.neutral[100],
-          backgroundColor: isSelected ? theme.colors.primary[50] : theme.colors.background,
+        style={{
+          ...dataGridStyles.row({ selected: isSelected }),
           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, actualIndex) : value;
-          const computedCellStyle = typeof column.cellStyle === 'function' 
-            ? column.cellStyle(value, item) 
+          const computedCellStyle = typeof column.cellStyle === 'function'
+            ? column.cellStyle(value, item)
             : column.cellStyle;
-          
+
           return (
             <TableCell
               key={column.key}
               width={column.width}
-              style={(theme) => ({
-                ...getCellBaseStyle(theme),
-                borderRightColor: theme.colors.neutral[100],
+              style={{
+                ...dataGridStyles.cell({ alignment: column.align || 'left' }),
+                ...getColumnStyle(column),
                 ...computedCellStyle,
-              })}
+              }}
             >
               {typeof cellContent === 'string' || typeof cellContent === 'number' ? (
                 <Text>{cellContent}</Text>
@@ -241,57 +196,53 @@ export function DataGrid<T extends Record<string, any>>({
   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',
+    <View style={{
+      ...dataGridStyles.container,
       width,
       height,
-      display: 'flex',
-      flexDirection: 'column',
       ...style,
-    })}>
+    }}>
       <ScrollView
-        style={{ 
-          flex: 1,
+        style={{
+          ...dataGridStyles.scrollView,
           ...(containerHeight ? { maxHeight: containerHeight } : {})
         }}
         contentContainerStyle={{
+          ...dataGridStyles.scrollViewContent,
           width: minTableWidth,
         }}
         showsVerticalScrollIndicator={true}
         showsHorizontalScrollIndicator={true}
-        bounces={false}
-        directionalLockEnabled={false}
         onScroll={handleScroll}
         scrollEventThrottle={16}
       >
         <Table style={{
+          ...dataGridStyles.table,
           width: minTableWidth,
           ...(virtualized ? { height: totalHeight } : {})
         }}>
-          <TableHeader>
+          <TableHeader style={dataGridStyles.header({ stickyHeader })}>
             {renderHeader()}
           </TableHeader>
           <TableBody>
             {virtualized && visibleRange.offsetY > 0 && (
-              <TableRow style={{ height: visibleRange.offsetY }}>
-                <TableCell 
-                  style={{ padding: 0, borderWidth: 0, height: visibleRange.offsetY }} 
+              <TableRow style={{ ...dataGridStyles.spacerRow, height: visibleRange.offsetY }}>
+                <TableCell
+                  style={{ ...dataGridStyles.spacerCell, height: visibleRange.offsetY }}
                   colSpan={columns.length}
                 >
+                  <View />
                 </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 }} 
+              <TableRow style={{ ...dataGridStyles.spacerRow, height: (data.length - visibleRange.end - 1) * rowHeight }}>
+                <TableCell
+                  style={{ ...dataGridStyles.spacerCell, height: (data.length - visibleRange.end - 1) * rowHeight }}
                   colSpan={columns.length}
                 >
+                  <View />
                 </TableCell>
               </TableRow>
             )}

package/src/DataGrid/types.ts

@@ -8,6 +8,7 @@ export interface Column<T = any> {
   maxWidth?: number;
   resizable?: boolean;
   sortable?: boolean;
+  align?: 'left' | 'center' | 'right';
   accessor?: (row: T) => any;
   render?: (value: any, row: T, index: number) => React.ReactNode;
   headerStyle?: ViewStyle;

package/src/examples/BasicExample.tsx

@@ -57,7 +57,7 @@ export function BasicExample() {
       width: 100,
       render: (value) => (
         <View style={{ paddingHorizontal: 8, paddingVertical: 4, backgroundColor: '#f0f0f0', borderRadius: 4 }}>
-          <Text size="small">{value}</Text>
+          <Text size="sm">{value}</Text>
         </View>
       ),
     },
@@ -67,7 +67,7 @@ export function BasicExample() {
       width: 100,
       render: (value) => (
         <Text 
-          size="small" 
+          size="sm" 
           weight="medium"
           style={{ color: value === 'active' ? '#22c55e' : '#ef4444' }}
         >
@@ -103,13 +103,13 @@ export function BasicExample() {
 
   return (
     <View spacing="lg" style={{ padding: 20 }}>
-      <Text size="xlarge" weight="bold">DataGrid Example</Text>
+      <Text size="xl" weight="bold">DataGrid Example</Text>
       
       <View spacing="sm">
         <Text>Selected rows: {selectedRows.length}</Text>
         {selectedRows.length > 0 && (
           <Button 
-            size="small" 
+            size="sm" 
             variant="outlined"
             onPress={() => setSelectedRows([])}
           >

package/src/examples/DataGridShowcase.tsx

@@ -73,7 +73,7 @@ export function DataGridShowcase({
       width: showAllColumns ? 120 : 100,
       sortable: true,
       render: (value) => (
-        <Badge variant="outlined" size="small">
+        <Badge variant="outlined" size="sm">
           {value}
         </Badge>
       ),
@@ -84,7 +84,7 @@ export function DataGridShowcase({
       width: showAllColumns ? 100 : 80,
       sortable: true,
       render: (value) => (
-        <Text weight="semibold" size={showAllColumns ? 'medium' : 'small'}>
+        <Text weight="semibold" size={showAllColumns ? 'md' : 'sm'}>
           ${value.toFixed(2)}
         </Text>
       ),
@@ -96,7 +96,7 @@ export function DataGridShowcase({
       sortable: true,
       render: (value, row) => (
         <Text
-          size="small"
+          size="sm"
           style={{ 
             color: row.status === 'out-of-stock' ? '#ef4444' : 
                    row.status === 'low-stock' ? '#f59e0b' : '#22c55e' 
@@ -114,7 +114,7 @@ export function DataGridShowcase({
         const intent = value === 'in-stock' ? 'success' : 
                        value === 'low-stock' ? 'warning' : 'error';
         return (
-          <Badge variant="filled" intent={intent} size="small">
+          <Badge variant="filled" intent={intent} size="sm">
             {value}
           </Badge>
         );
@@ -171,13 +171,13 @@ export function DataGridShowcase({
   return (
     <Screen background="primary" safeArea scrollable={false}>
       <View spacing={showAllColumns ? "lg" : "md"} style={{ padding: showAllColumns ? 16 : 12, flex: 1 }}>
-        <Text size={showAllColumns ? "xlarge" : "large"} weight="bold">
+        <Text size={showAllColumns ? "xl" : "lg"} weight="bold">
           DataGrid {showAllColumns ? 'Component ' : ''}Showcase
         </Text>
         
         <Card variant="outlined">
           <View spacing={showAllColumns ? "md" : "sm"}>
-            <Text weight="semibold" size="medium">Controls</Text>
+            <Text weight="semibold" size="md">Controls</Text>
             
             <View 
               spacing="sm" 
@@ -190,7 +190,7 @@ export function DataGridShowcase({
             >
               <Button
                 variant="outlined"
-                size="small"
+                size="sm"
                 onPress={() => setVirtualized(!virtualized)}
               >
                 {virtualized ? 'Disable' : 'Enable'} Virtualization
@@ -200,7 +200,7 @@ export function DataGridShowcase({
                 <View style={{ flexDirection: 'row', gap: 8 }}>
                   <Button
                     variant="outlined"
-                    size="small"
+                    size="sm"
                     onPress={() => setSelectedRows([])}
                     disabled={selectedRows.length === 0}
                   >
@@ -210,7 +210,7 @@ export function DataGridShowcase({
                   <Button
                     variant="outlined"
                     intent="error"
-                    size="small"
+                    size="sm"
                     onPress={handleDeleteSelected}
                     disabled={selectedRows.length === 0}
                   >
@@ -223,7 +223,7 @@ export function DataGridShowcase({
                 <>
                   <Button
                     variant="outlined"
-                    size="small"
+                    size="sm"
                     onPress={() => setSelectedRows([])}
                     disabled={selectedRows.length === 0}
                   >
@@ -233,7 +233,7 @@ export function DataGridShowcase({
                   <Button
                     variant="outlined"
                     intent="error"
-                    size="small"
+                    size="sm"
                     onPress={handleDeleteSelected}
                     disabled={selectedRows.length === 0}
                   >
@@ -244,7 +244,7 @@ export function DataGridShowcase({
               
               <Button
                 variant="outlined"
-                size="small"
+                size="sm"
                 onPress={handleResetData}
               >
                 Reset Data
@@ -252,9 +252,9 @@ export function DataGridShowcase({
             </View>
             
             <View spacing="xs">
-              <Text size="small">• {showAllColumns ? 'Total ' : ''}Products: {products.length}</Text>
-              <Text size="small">• Selected: {selectedRows.length}</Text>
-              <Text size="small">• Virtualization: {virtualized ? (showAllColumns ? 'Enabled' : 'On') : (showAllColumns ? 'Disabled' : 'Off')}</Text>
+              <Text size="sm">• {showAllColumns ? 'Total ' : ''}Products: {products.length}</Text>
+              <Text size="sm">• Selected: {selectedRows.length}</Text>
+              <Text size="sm">• Virtualization: {virtualized ? (showAllColumns ? 'Enabled' : 'On') : (showAllColumns ? 'Disabled' : 'Off')}</Text>
             </View>
           </View>
         </Card>
@@ -280,14 +280,14 @@ export function DataGridShowcase({
         
         <Card variant="outlined">
           <View spacing={showAllColumns ? "sm" : "xs"}>
-            <Text weight="semibold" size="medium">Features {showAllColumns ? 'Demonstrated' : ''}</Text>
-            <Text size="small">✓ Virtualized rendering{showAllColumns ? ` with ${productCount} rows` : ''}</Text>
-            <Text size="small">✓ Sortable columns{showAllColumns ? ' (ID, Name, Category, Price, Stock, Vendor, Date)' : ''}</Text>
-            <Text size="small">✓ Multi-row selection{showAllColumns ? ' with visual feedback' : ''}</Text>
-            <Text size="small">✓ Custom cell rendering{showAllColumns ? ' (badges, colored text)' : ''}</Text>
-            <Text size="small">✓ Sticky header{showAllColumns ? ' while scrolling' : ''}</Text>
-            <Text size="small">✓ Alternating row colors</Text>
-            {showAllColumns && <Text size="small">✓ Responsive column widths</Text>}
+            <Text weight="semibold" size="md">Features {showAllColumns ? 'Demonstrated' : ''}</Text>
+            <Text size="sm">✓ Virtualized rendering{showAllColumns ? ` with ${productCount} rows` : ''}</Text>
+            <Text size="sm">✓ Sortable columns{showAllColumns ? ' (ID, Name, Category, Price, Stock, Vendor, Date)' : ''}</Text>
+            <Text size="sm">✓ Multi-row selection{showAllColumns ? ' with visual feedback' : ''}</Text>
+            <Text size="sm">✓ Custom cell rendering{showAllColumns ? ' (badges, colored text)' : ''}</Text>
+            <Text size="sm">✓ Sticky header{showAllColumns ? ' while scrolling' : ''}</Text>
+            <Text size="sm">✓ Alternating row colors</Text>
+            {showAllColumns && <Text size="sm">✓ Responsive column widths</Text>}
           </View>
         </Card>
       </View>

package/src/primitives/Table/Table.native.tsx

@@ -69,11 +69,13 @@ interface TableCellProps {
   style?: any;
   width?: number | string;
   colSpan?: number;
+  onPress?: () => void;
 }
 
-export const TableCell: React.FC<TableCellProps> = ({ children, style, width, colSpan }) => {
+export const TableCell: React.FC<TableCellProps> = ({ children, style, width, colSpan, onPress }) => {
   const flexValue = colSpan ? colSpan : 1;
-  
+  const Wrapper = onPress ? TouchableOpacity : View;
+
   let resolvedStyle = {};
   if (typeof style === 'function') {
     try {
@@ -84,16 +86,16 @@ export const TableCell: React.FC<TableCellProps> = ({ children, style, width, co
   } else if (style) {
     resolvedStyle = style;
   }
-  
+
   const combinedStyle = [
     { justifyContent: 'center' },
     width ? { width, flex: 0 } : { flex: flexValue },
     resolvedStyle
   ];
-  
+
   return (
-    <View style={combinedStyle}>
+    <Wrapper style={combinedStyle} onPress={onPress}>
       {children}
-    </View>
+    </Wrapper>
   );
 };

package/src/primitives/Table/Table.web.tsx

@@ -74,9 +74,10 @@ interface TableCellProps {
   style?: any;
   width?: number | string;
   colSpan?: number;
+  onPress?: () => void;
 }
 
-export const TableCell: React.FC<TableCellProps> = ({ children, style, width, colSpan }) => {
+export const TableCell: React.FC<TableCellProps> = ({ children, style, width, colSpan, onPress }) => {
   let resolvedStyle = {};
   if (typeof style === 'function') {
     try {
@@ -87,15 +88,27 @@ export const TableCell: React.FC<TableCellProps> = ({ children, style, width, co
   } else if (style) {
     resolvedStyle = style;
   }
-  
+
   const combinedStyle = {
     verticalAlign: 'middle',
     ...(width && { width }),
     ...resolvedStyle,
   };
-  
+
   return (
-    <td style={combinedStyle} colSpan={colSpan}>
+    <td
+      style={combinedStyle}
+      colSpan={colSpan}
+      onClick={onPress}
+      role={onPress ? 'button' : undefined}
+      tabIndex={onPress ? 0 : undefined}
+      onKeyDown={onPress ? (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onPress();
+        }
+      } : undefined}
+    >
       {children}
     </td>
   );