@idealyst/components 1.2.128 → 1.2.130

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.128",
+  "version": "1.2.130",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.128",
+    "@idealyst/theme": "^1.2.130",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -81,10 +81,10 @@
     "@mdi/react": {
       "optional": true
     },
-    "@react-navigation/bottom-tabs": {
+    "@react-native/normalize-colors": {
       "optional": true
     },
-    "@react-native/normalize-colors": {
+    "@react-navigation/bottom-tabs": {
       "optional": true
     },
     "react-native": {
@@ -111,8 +111,8 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.128",
-    "@idealyst/tooling": "^1.2.128",
+    "@idealyst/theme": "^1.2.130",
+    "@idealyst/tooling": "^1.2.130",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",

package/src/Table/Table.native.tsx

@@ -256,6 +256,96 @@ function TableInner<T = any>({
     return column.footer;
   };
 
+  // Split columns into sticky left, scrollable, and sticky right
+  const leftCols = useMemo(() => columns.filter((c) => c.sticky === true || c.sticky === 'left'), [columns]);
+  const rightCols = useMemo(() => columns.filter((c) => c.sticky === 'right'), [columns]);
+  const scrollCols = useMemo(() => columns.filter((c) => !c.sticky), [columns]);
+  const hasStickyColumns = leftCols.length > 0 || rightCols.length > 0;
+
+  // Renders a column group (header + body + footer) for a set of columns
+  const renderColumnGroup = (cols: TableColumn<T>[]) => (
+    <View>
+      {/* Header */}
+      <View style={theadStyle}>
+        <View style={{ flexDirection: 'row' }}>
+          {cols.map((column) => (
+            <TH key={column.key} size={size} type={type} align={column.align} width={column.width}>
+              {column.title}
+            </TH>
+          ))}
+        </View>
+      </View>
+
+      {/* Body */}
+      <View style={tbodyStyle}>
+        {data.length === 0 && emptyState ? (
+          <View style={{ alignItems: 'center', padding: 16 }}>
+            {emptyState}
+          </View>
+        ) : (
+          data.map((row, rowIndex) => (
+            <TR
+              key={rowIndex}
+              size={size}
+              type={type}
+              clickable={isClickable}
+              onPress={() => onRowPress?.(row, rowIndex)}
+              testID={testID ? `${testID}-row-${rowIndex}` : undefined}
+            >
+              {cols.map((column) => (
+                <TD key={column.key} size={size} type={type} align={column.align} width={column.width}>
+                  {getCellValue(column, row, rowIndex)}
+                </TD>
+              ))}
+            </TR>
+          ))
+        )}
+      </View>
+
+      {/* Footer */}
+      {hasFooter && (
+        <View style={(tableStyles.tfoot as any)({})}>
+          <View style={{ flexDirection: 'row' }}>
+            {cols.map((column) => (
+              <TF key={column.key} size={size} type={type} align={column.align} width={column.width}>
+                {getFooterContent(column) ?? null}
+              </TF>
+            ))}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+
+  // When there are sticky columns, render as: [left sticky] [scrollable] [right sticky]
+  if (hasStickyColumns) {
+    return (
+      <View
+        nativeID={id}
+        style={[containerStyle, { flexDirection: 'row' }, style]}
+        testID={testID}
+        {...nativeA11yProps}
+      >
+        {leftCols.length > 0 && (
+          <View style={{ zIndex: 1, backgroundColor: theadStyle.backgroundColor || containerStyle.backgroundColor }}>
+            {renderColumnGroup(leftCols)}
+          </View>
+        )}
+        <ScrollView ref={ref} horizontal style={{ flex: 1 }}>
+          <View style={tableStyle}>
+            {renderColumnGroup(scrollCols)}
+          </View>
+        </ScrollView>
+        {rightCols.length > 0 && (
+          <View style={{ zIndex: 1, backgroundColor: theadStyle.backgroundColor || containerStyle.backgroundColor }}>
+            {renderColumnGroup(rightCols)}
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  // No sticky columns — original simple layout
   return (
     <ScrollView
       ref={ref}
@@ -266,73 +356,7 @@ function TableInner<T = any>({
       {...nativeA11yProps}
     >
       <View style={tableStyle}>
-        {/* Header */}
-        <View style={theadStyle}>
-          <View style={{ flexDirection: 'row' }}>
-            {columns.map((column) => (
-              <TH
-                key={column.key}
-                size={size}
-                type={type}
-                align={column.align}
-                width={column.width}
-              >
-                {column.title}
-              </TH>
-            ))}
-          </View>
-        </View>
-
-        {/* Body */}
-        <View style={tbodyStyle}>
-          {data.length === 0 && emptyState ? (
-            <View style={{ alignItems: 'center', padding: 16 }}>
-              {emptyState}
-            </View>
-          ) : (
-            data.map((row, rowIndex) => (
-              <TR
-                key={rowIndex}
-                size={size}
-                type={type}
-                clickable={isClickable}
-                onPress={() => onRowPress?.(row, rowIndex)}
-                testID={testID ? `${testID}-row-${rowIndex}` : undefined}
-              >
-                {columns.map((column) => (
-                  <TD
-                    key={column.key}
-                    size={size}
-                    type={type}
-                    align={column.align}
-                    width={column.width}
-                  >
-                    {getCellValue(column, row, rowIndex)}
-                  </TD>
-                ))}
-              </TR>
-            ))
-          )}
-        </View>
-
-        {/* Footer */}
-        {hasFooter && (
-          <View style={(tableStyles.tfoot as any)({})}>
-            <View style={{ flexDirection: 'row' }}>
-              {columns.map((column) => (
-                <TF
-                  key={column.key}
-                  size={size}
-                  type={type}
-                  align={column.align}
-                  width={column.width}
-                >
-                  {getFooterContent(column) ?? null}
-                </TF>
-              ))}
-            </View>
-          </View>
-        )}
+        {renderColumnGroup(columns)}
       </View>
     </ScrollView>
   );

package/src/Table/Table.web.tsx

@@ -4,6 +4,25 @@ import { tableStyles } from './Table.styles';
 import type { TableProps, TableColumn, TableType, TableSizeVariant, TableAlignVariant } from './types';
 import { getWebAriaProps } from '../utils/accessibility';
 
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function getStickyStyle(
+  sticky: boolean | 'left' | 'right' | undefined,
+  offset: number | string | undefined,
+  zIndex: number,
+): React.CSSProperties | undefined {
+  if (!sticky) return undefined;
+  const side = sticky === 'right' ? 'right' : 'left';
+  return {
+    position: 'sticky',
+    [side]: offset ?? 0,
+    zIndex,
+    backgroundColor: 'inherit',
+  };
+}
+
 // ============================================================================
 // Sub-component Props
 // ============================================================================
@@ -23,8 +42,8 @@ interface THProps {
   type?: TableType;
   align?: TableAlignVariant;
   width?: number | string;
-  sticky?: boolean;
-  stickyLeft?: number | string;
+  sticky?: boolean | 'left' | 'right';
+  stickyOffset?: number | string;
   resizable?: boolean;
   onResize?: (width: number) => void;
   minWidth?: number;
@@ -37,8 +56,8 @@ interface TDProps {
   type?: TableType;
   align?: TableAlignVariant;
   width?: number | string;
-  sticky?: boolean;
-  stickyLeft?: number | string;
+  sticky?: boolean | 'left' | 'right';
+  stickyOffset?: number | string;
 }
 
 // ============================================================================
@@ -83,7 +102,7 @@ function TH({
   align = 'left',
   width,
   sticky,
-  stickyLeft,
+  stickyOffset,
   resizable,
   onResize,
   minWidth = 50,
@@ -129,20 +148,13 @@ function TH({
     document.addEventListener('pointerup', handlePointerUp);
   }, [minWidth, onResize]);
 
-  const stickyStyle: React.CSSProperties | undefined = sticky ? {
-    position: 'sticky',
-    left: stickyLeft ?? 0,
-    zIndex: 11,
-    backgroundColor: 'inherit',
-  } : undefined;
-
   return (
     <th
       {...headerCellProps}
       ref={thRef}
       scope="col"
       aria-sort={accessibilitySort}
-      style={{ width, ...stickyStyle }}
+      style={{ width, ...getStickyStyle(sticky, stickyOffset, 11) }}
     >
       {children}
       {resizable && (
@@ -174,7 +186,7 @@ function TD({
   align = 'left',
   width,
   sticky,
-  stickyLeft,
+  stickyOffset,
 }: TDProps) {
   tableStyles.useVariants({
     size,
@@ -184,17 +196,10 @@ function TD({
 
   const cellProps = getWebProps([(tableStyles.cell as any)({})]);
 
-  const stickyStyle: React.CSSProperties | undefined = sticky ? {
-    position: 'sticky',
-    left: stickyLeft ?? 0,
-    zIndex: 1,
-    backgroundColor: 'inherit',
-  } : undefined;
-
   return (
     <td
       {...cellProps}
-      style={{ width, ...stickyStyle }}
+      style={{ width, ...getStickyStyle(sticky, stickyOffset, 1) }}
     >
       {children}
     </td>
@@ -211,8 +216,8 @@ interface TFProps {
   type?: TableType;
   align?: TableAlignVariant;
   width?: number | string;
-  sticky?: boolean;
-  stickyLeft?: number | string;
+  sticky?: boolean | 'left' | 'right';
+  stickyOffset?: number | string;
 }
 
 function TF({
@@ -222,7 +227,7 @@ function TF({
   align = 'left',
   width,
   sticky,
-  stickyLeft,
+  stickyOffset,
 }: TFProps) {
   tableStyles.useVariants({
     size,
@@ -232,17 +237,10 @@ function TF({
 
   const footerCellProps = getWebProps([(tableStyles.footerCell as any)({})]);
 
-  const stickyStyle: React.CSSProperties | undefined = sticky ? {
-    position: 'sticky',
-    left: stickyLeft ?? 0,
-    zIndex: 1,
-    backgroundColor: 'inherit',
-  } : undefined;
-
   return (
     <td
       {...footerCellProps}
-      style={{ width, ...stickyStyle }}
+      style={{ width, ...getStickyStyle(sticky, stickyOffset, 1) }}
     >
       {children}
     </td>
@@ -329,21 +327,32 @@ function Table<T = any>({
     return column.footer;
   };
 
-  // Compute cumulative left offsets for sticky columns
-  const stickyLeftMap = useMemo(() => {
-    const map = new Map<string, number | string>();
+  // Compute cumulative offsets for sticky columns (left and right independently)
+  const stickyOffsetMap = useMemo(() => {
+    const map = new Map<string, number>();
+
+    // Left sticky: accumulate left-to-right
     let cumulativeLeft = 0;
     for (const col of columns) {
-      if (!col.sticky) continue;
+      const side = col.sticky === 'right' ? 'right' : col.sticky ? 'left' : null;
+      if (side !== 'left') continue;
       map.set(col.key, cumulativeLeft);
       if (typeof col.width === 'number') {
         cumulativeLeft += col.width;
-      } else if (typeof col.width === 'string') {
-        // For string widths (e.g. '200px'), use as-is for the first, then can't accumulate
-        // Only numeric widths support proper multi-column stacking
-        map.set(col.key, cumulativeLeft > 0 ? cumulativeLeft : 0);
       }
     }
+
+    // Right sticky: accumulate right-to-left
+    let cumulativeRight = 0;
+    for (let i = columns.length - 1; i >= 0; i--) {
+      const col = columns[i];
+      if (col.sticky !== 'right') continue;
+      map.set(col.key, cumulativeRight);
+      if (typeof col.width === 'number') {
+        cumulativeRight += col.width;
+      }
+    }
+
     return map;
   }, [columns]);
 
@@ -360,7 +369,7 @@ function Table<T = any>({
                 align={column.align}
                 width={column.width}
                 sticky={column.sticky}
-                stickyLeft={stickyLeftMap.get(column.key)}
+                stickyOffset={stickyOffsetMap.get(column.key)}
                 resizable={column.resizable}
                 minWidth={column.minWidth}
                 onResize={onColumnResize ? (w) => onColumnResize(column.key, w) : undefined}
@@ -396,7 +405,7 @@ function Table<T = any>({
                     align={column.align}
                     width={column.width}
                     sticky={column.sticky}
-                    stickyLeft={stickyLeftMap.get(column.key)}
+                    stickyOffset={stickyOffsetMap.get(column.key)}
                   >
                     {getCellValue(column, row, rowIndex)}
                   </TD>
@@ -416,7 +425,7 @@ function Table<T = any>({
                   align={column.align}
                   width={column.width}
                   sticky={column.sticky}
-                  stickyLeft={stickyLeftMap.get(column.key)}
+                  stickyOffset={stickyOffsetMap.get(column.key)}
                 >
                   {getFooterContent(column) ?? null}
                 </TF>

package/src/Table/types.ts

@@ -19,9 +19,10 @@ export interface TableColumn<T = any> extends SortableAccessibilityProps {
   align?: TableAlignVariant;
   /**
    * Makes this column sticky (pinned) when scrolling horizontally.
-   * Web only — uses CSS `position: sticky`.
+   * `true` or `'left'` pins to the left, `'right'` pins to the right.
+   * On web uses CSS `position: sticky`, on native renders outside the ScrollView.
    */
-  sticky?: boolean;
+  sticky?: boolean | 'left' | 'right';
   /**
    * Allows the column to be resized by dragging the right edge of the header.
    * Web only.