From f4854385e13fe767a72d56708057f6abcd691d7e Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Fri, 5 Sep 2025 15:17:50 +1000
Subject: [PATCH 1/2] feat: S2 Table Cell layout customisation

---
 packages/@react-spectrum/s2/src/TableView.tsx | 11 +++--
 .../s2/stories/TableView.stories.tsx          | 46 +++++++++++++++++++
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 27c8cb292ac..89f91c558b6 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -44,7 +44,7 @@ import {
   useTableOptions,
   Virtualizer
 } from 'react-aria-components';
-import {centerPadding, controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {centerPadding, controlFont, getAllowedOverrides, StylesPropWithHeight, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {ColumnSize} from '@react-types/table';
@@ -1004,11 +1004,12 @@ const cellContent = style({
   }
 });
 
-export interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'showDivider'> {
+export interface CellProps extends Omit<RACCellProps, 'className' | 'style'>, Pick<ColumnProps, 'align' | 'showDivider'> {
   /** @private */
   isSticky?: boolean,
   /** The content to render as the cell children. */
-  children: ReactNode
+  children: ReactNode,
+  styles?: StylesPropWithoutWidth
 }
 
 /**
@@ -1026,11 +1027,11 @@ export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLD
       // Also isSticky prop is applied just for the layout, will decide what the RAC api should be later
       // @ts-ignore
       isSticky={isSticky}
-      className={renderProps => cell({
+      className={renderProps => mergeStyles(cell({
         ...renderProps,
         ...tableVisualOptions,
         isDivider: showDivider
-      })}
+      }), props.styles)}
       textValue={textValue}
       {...otherProps}>
       {({isFocusVisible}) => (
diff --git a/packages/@react-spectrum/s2/stories/TableView.stories.tsx b/packages/@react-spectrum/s2/stories/TableView.stories.tsx
index c08479b0263..4a896bd7fb3 100644
--- a/packages/@react-spectrum/s2/stories/TableView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/TableView.stories.tsx
@@ -129,6 +129,52 @@ export const DisabledRows: StoryObj<typeof StaticTable> = {
   }
 };
 
+export const WrappingCells: StoryObj<typeof StaticTable> = {
+  render: (args: any) => (
+    <TableView aria-label="Files" {...args} styles={style({width: 320, height: 320})}>
+      <TableHeader>
+        <Column isRowHeader>Name</Column>
+        <Column>Type</Column>
+        <Column>Date Modified</Column>
+        <Column>Size</Column>
+        <Column>B</Column>
+      </TableHeader>
+      <TableBody>
+        <Row id="1">
+          <Cell styles={style({alignItems: 'start'})}>Games</Cell>
+          <Cell>File folder</Cell>
+          <Cell>6/7/2020</Cell>
+          <Cell>74 GB</Cell>
+          <Cell>Long long long long long long long cell</Cell>
+        </Row>
+        <Row id="2">
+          <Cell>Program Files</Cell>
+          <Cell>File folder</Cell>
+          <Cell>4/7/2021</Cell>
+          <Cell>1.2 GB</Cell>
+          <Cell>Long long long long long long long cell</Cell>
+        </Row>
+        <Row id="3">
+          <Cell>bootmgr</Cell>
+          <Cell>System file</Cell>
+          <Cell>11/20/2010</Cell>
+          <Cell>0.2 GB</Cell>
+          <Cell>Long long long long long long long cell</Cell>
+        </Row>
+      </TableBody>
+    </TableView>
+  ),
+  args: {
+    ...Example.args,
+    overflowMode: 'wrap'
+  },
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
 let columns = [
   {name: 'Foo', id: 'foo', isRowHeader: true},
   {name: 'Bar', id: 'bar'},

From e0bb199f951aaf5d49cf114e99ec6cb058cb16b9 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Sun, 7 Sep 2025 10:20:46 +1000
Subject: [PATCH 2/2] allow any styles

---
 packages/@react-spectrum/s2/src/TableView.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 89f91c558b6..6498e155add 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {baseColor, colorMix, focusRing, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
+import {baseColor, colorMix, focusRing, fontRelative, lightDark, space, style, StyleString} from '../style' with {type: 'macro'};
 import {
   Button,
   CellRenderProps,
@@ -44,7 +44,7 @@ import {
   useTableOptions,
   Virtualizer
 } from 'react-aria-components';
-import {centerPadding, controlFont, getAllowedOverrides, StylesPropWithHeight, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {centerPadding, controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {ColumnSize} from '@react-types/table';
@@ -1004,12 +1004,12 @@ const cellContent = style({
   }
 });
 
-export interface CellProps extends Omit<RACCellProps, 'className' | 'style'>, Pick<ColumnProps, 'align' | 'showDivider'> {
+export interface CellProps extends RACCellProps, Pick<ColumnProps, 'align' | 'showDivider'> {
   /** @private */
   isSticky?: boolean,
   /** The content to render as the cell children. */
   children: ReactNode,
-  styles?: StylesPropWithoutWidth
+  styles?: StyleString
 }
 
 /**