From df192248f78d61821981693a1d1b09471184e52e Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 1 Apr 2026 13:25:55 -0700
Subject: [PATCH 1/5] fix: use min-width so Firefox respects applied column
 widths

the table would also increase the rest of the column widths when trying to shrink a single column in some cases too
---
 packages/react-aria-components/src/Table.tsx  |   4 +-
 .../stories/Table.stories.tsx                 | 158 +++++++++++-------
 2 files changed, 100 insertions(+), 62 deletions(-)

diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index c6263318ee9..bc620a6ff31 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -257,7 +257,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
     if (k == null) {
       k = node.parentKey;
     }
-    
+
     if (k != null && this.getItem(k)?.type === 'tablebody') {
       return null;
     }
@@ -687,7 +687,7 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
       style = {
         ...style,
         tableLayout: 'fixed',
-        width: 'fit-content'
+        width: 'min-content'
       };
     }
   }
diff --git a/packages/react-aria-components/stories/Table.stories.tsx b/packages/react-aria-components/stories/Table.stories.tsx
index 8763da7f6b7..03f353256db 100644
--- a/packages/react-aria-components/stories/Table.stories.tsx
+++ b/packages/react-aria-components/stories/Table.stories.tsx
@@ -141,68 +141,106 @@ const TableExample: TableStory = (args) => {
   });
 
   return (
-    <ResizableTableContainer style={{width: 400, overflow: 'auto'}}>
-      <Table aria-label="Example table" {...args}>
-        <TableHeader>
-          <Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
-          <MyColumn isRowHeader defaultWidth="30%">Name</MyColumn>
-          <MyColumn>Type</MyColumn>
-          <MyColumn>Date Modified</MyColumn>
-          <MyColumn>Actions</MyColumn>
-        </TableHeader>
-        <TableBody items={list.items}>
-          {item => (
-            <Row>
-              <Cell><MyCheckbox slot="selection" /></Cell>
-              <Cell>{item.name}</Cell>
-              <Cell>{item.type}</Cell>
-              <Cell>{item.date}</Cell>
-              <Cell>
-                <DialogTrigger>
-                  <Button>Delete</Button>
-                  <ModalOverlay
-                    style={{
-                      position: 'fixed',
-                      zIndex: 100,
-                      top: 0,
-                      left: 0,
-                      bottom: 0,
-                      right: 0,
-                      background: 'rgba(0, 0, 0, 0.5)',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center'
-                    }}>
-                    <Modal
+    <div style={{width: 600, overflow: 'auto'}}>
+      <ResizableTableContainer>
+        <Table aria-label="Example table" {...args}>
+          <TableHeader>
+            <Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
+            <MyColumn isRowHeader defaultWidth="30%">Name</MyColumn>
+            <MyColumn>Type</MyColumn>
+            <MyColumn>Date Modified</MyColumn>
+            <MyColumn>Actions</MyColumn>
+          </TableHeader>
+          <TableBody items={list.items}>
+            {item => (
+              <Row>
+                <Cell><MyCheckbox slot="selection" /></Cell>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.type}</Cell>
+                <Cell>{item.date}</Cell>
+                <Cell>
+                  <DialogTrigger>
+                    <Button>Delete</Button>
+                    <ModalOverlay
                       style={{
-                        background: 'Canvas',
-                        color: 'CanvasText',
-                        border: '1px solid gray',
-                        padding: 30
+                        position: 'fixed',
+                        zIndex: 100,
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        right: 0,
+                        background: 'rgba(0, 0, 0, 0.5)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
                       }}>
-                      <Dialog>
-                        {({close}) => (<>
-                          <Heading slot="title">Delete item</Heading>
-                          <p>Are you sure?</p>
-                          <Button onPress={close}>Cancel</Button>
-                          <Button
-                            onPress={() => {
-                              close();
-                              list.remove(item.id);
-                            }}>
-                            Delete
-                          </Button>
-                        </>)}
-                      </Dialog>
-                    </Modal>
-                  </ModalOverlay>
-                </DialogTrigger>
-              </Cell>
-            </Row>
-          )}
-        </TableBody>
-      </Table>
-    </ResizableTableContainer>
+                      <Modal
+                        style={{
+                          background: 'Canvas',
+                          color: 'CanvasText',
+                          border: '1px solid gray',
+                          padding: 30
+                        }}>
+                        <Dialog>
+                          {({close}) => (<>
+                            <Heading slot="title">Delete item</Heading>
+                            <p>Are you sure?</p>
+                            <Button onPress={close}>Cancel</Button>
+                            <Button
+                              onPress={() => {
+                                close();
+                                list.remove(item.id);
+                              }}>
+                              Delete
+                            </Button>
+                          </>)}
+                        </Dialog>
+                      </Modal>
+                    </ModalOverlay>
+                  </DialogTrigger>
+                </Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </ResizableTableContainer>
+    </div>
+  );
+};
+
+export const FixedColumnWidths: TableStory = (args) => {
+  let list = useListData({
+    initialItems: [
+      {id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
+      {id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+      {id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+      {id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
+    ]
+  });
+
+  return (
+    <div style={{width: 600, overflow: 'auto'}}>
+      <ResizableTableContainer>
+        <Table aria-label="Example table with fixed column widths" {...args}>
+          <TableHeader>
+            <Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
+            <MyColumn isRowHeader width={100}>Name</MyColumn>
+            <MyColumn width={100}>Type</MyColumn>
+            <MyColumn width={100}>Date Modified</MyColumn>
+          </TableHeader>
+          <TableBody items={list.items}>
+            {item => (
+              <Row>
+                <Cell><MyCheckbox slot="selection" /></Cell>
+                <Cell>{item.name}</Cell>
+                <Cell>{item.type}</Cell>
+                <Cell>{item.date}</Cell>
+              </Row>
+            )}
+          </TableBody>
+        </Table>
+      </ResizableTableContainer>
+    </div>
   );
 };
 

From 3f80e4ab9ede2c9346ed26052ddc60dd387061a0 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 2 Apr 2026 09:39:16 -0700
Subject: [PATCH 2/5] code comment to FF bug

---
 packages/react-aria-components/src/Table.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index bc620a6ff31..6d7179d6cd4 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -687,6 +687,8 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
       style = {
         ...style,
         tableLayout: 'fixed',
+        // due to https://bugzilla.mozilla.org/show_bug.cgi?id=1959353, we can't use "fit-content".
+        // Causes the table columns to grow to fill the available space in Firefox, ignoring user set column widths
         width: 'min-content'
       };
     }

From 50dc384dd9b12bb0d29b5badc5ba4948d9cacbf2 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 2 Apr 2026 16:04:58 -0700
Subject: [PATCH 3/5] add RAC story to chromatic

---
 .../s2/chromatic/TableView.stories.tsx               | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx b/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
index 23057e6083b..b89f9e3d8a2 100644
--- a/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
@@ -13,6 +13,7 @@
 import {action} from 'storybook/actions';
 import {Cell, Column, Row, TableBody, TableHeader, TableView, TableViewProps} from '../src/TableView';
 import {Content, Heading} from '../src/Content';
+import {FixedColumnWidths} from '../../../react-aria-components/stories/Table.stories';
 import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
 import {IllustratedMessage} from '../src/IllustratedMessage';
 import {Link} from '../src/Link';
@@ -501,3 +502,14 @@ export const TableWithNestedRows: StoryObj<typeof TableView> = {
     defaultExpandedKeys: ['apps']
   }
 };
+
+export const RACFixedWidth = {
+  render: FixedColumnWidths,
+  parameters: {
+    chromaticProvider: {
+      locales: ['en-US'],
+      scales: ['medium'],
+      colorSchemes: ['light']
+    }
+  }
+};

From 2856576a0f14bf19dde5620fae8c930e0c33af7f Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 2 Apr 2026 17:22:51 -0700
Subject: [PATCH 4/5] chromatic without fix

---
 packages/react-aria-components/src/Table.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 6d7179d6cd4..c0e87749dc6 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -689,7 +689,8 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
         tableLayout: 'fixed',
         // due to https://bugzilla.mozilla.org/show_bug.cgi?id=1959353, we can't use "fit-content".
         // Causes the table columns to grow to fill the available space in Firefox, ignoring user set column widths
-        width: 'min-content'
+        // width: 'min-content'
+        width: 'fit-content'
       };
     }
   }

From f25ca63675fa058f181763c493141016efa3b1fb Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 2 Apr 2026 17:27:14 -0700
Subject: [PATCH 5/5] bring back fix for chromatic

---
 packages/react-aria-components/src/Table.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index c0e87749dc6..6d7179d6cd4 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -689,8 +689,7 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
         tableLayout: 'fixed',
         // due to https://bugzilla.mozilla.org/show_bug.cgi?id=1959353, we can't use "fit-content".
         // Causes the table columns to grow to fill the available space in Firefox, ignoring user set column widths
-        // width: 'min-content'
-        width: 'fit-content'
+        width: 'min-content'
       };
     }
   }