Skip to content

Commit 139fe90

Browse files
LFDanLuLFDanLu
authored
fix: use min-width so Firefox respects applied column widths (#9871)
* 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 * code comment to FF bug * add RAC story to chromatic * chromatic without fix * bring back fix for chromatic
1 parent 46be285 commit 139fe90

File tree

3 files changed

+114
-62
lines changed

3 files changed

+114
-62
lines changed

‎packages/@react-spectrum/s2/chromatic/TableView.stories.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
import {action} from 'storybook/actions';
1414
import {Cell, Column, Row, TableBody, TableHeader, TableView, TableViewProps} from '../src/TableView';
1515
import {Content, Heading} from '../src/Content';
16+
import {FixedColumnWidths} from '../../../react-aria-components/stories/Table.stories';
1617
import FolderOpen from '../spectrum-illustrations/linear/FolderOpen';
1718
import {IllustratedMessage} from '../src/IllustratedMessage';
1819
import {Link} from '../src/Link';
@@ -501,3 +502,14 @@ export const TableWithNestedRows: StoryObj<typeof TableView> = {
501502
defaultExpandedKeys: ['apps']
502503
}
503504
};
505+
506+
export const RACFixedWidth = {
507+
render: FixedColumnWidths,
508+
parameters: {
509+
chromaticProvider: {
510+
locales: ['en-US'],
511+
scales: ['medium'],
512+
colorSchemes: ['light']
513+
}
514+
}
515+
};

‎packages/react-aria-components/src/Table.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
257257
if (k == null) {
258258
k = node.parentKey;
259259
}
260-
260+
261261
if (k != null && this.getItem(k)?.type === 'tablebody') {
262262
return null;
263263
}
@@ -687,7 +687,9 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
687687
style = {
688688
...style,
689689
tableLayout: 'fixed',
690-
width: 'fit-content'
690+
// due to https://bugzilla.mozilla.org/show_bug.cgi?id=1959353, we can't use "fit-content".
691+
// Causes the table columns to grow to fill the available space in Firefox, ignoring user set column widths
692+
width: 'min-content'
691693
};
692694
}
693695
}

‎packages/react-aria-components/stories/Table.stories.tsx‎

Lines changed: 98 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -141,68 +141,106 @@ const TableExample: TableStory = (args) => {
141141
});
142142

143143
return (
144-
<ResizableTableContainer style={{width: 400, overflow: 'auto'}}>
145-
<Table aria-label="Example table" {...args}>
146-
<TableHeader>
147-
<Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
148-
<MyColumn isRowHeader defaultWidth="30%">Name</MyColumn>
149-
<MyColumn>Type</MyColumn>
150-
<MyColumn>Date Modified</MyColumn>
151-
<MyColumn>Actions</MyColumn>
152-
</TableHeader>
153-
<TableBody items={list.items}>
154-
{item => (
155-
<Row>
156-
<Cell><MyCheckbox slot="selection" /></Cell>
157-
<Cell>{item.name}</Cell>
158-
<Cell>{item.type}</Cell>
159-
<Cell>{item.date}</Cell>
160-
<Cell>
161-
<DialogTrigger>
162-
<Button>Delete</Button>
163-
<ModalOverlay
164-
style={{
165-
position: 'fixed',
166-
zIndex: 100,
167-
top: 0,
168-
left: 0,
169-
bottom: 0,
170-
right: 0,
171-
background: 'rgba(0, 0, 0, 0.5)',
172-
display: 'flex',
173-
alignItems: 'center',
174-
justifyContent: 'center'
175-
}}>
176-
<Modal
144+
<div style={{width: 600, overflow: 'auto'}}>
145+
<ResizableTableContainer>
146+
<Table aria-label="Example table" {...args}>
147+
<TableHeader>
148+
<Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
149+
<MyColumn isRowHeader defaultWidth="30%">Name</MyColumn>
150+
<MyColumn>Type</MyColumn>
151+
<MyColumn>Date Modified</MyColumn>
152+
<MyColumn>Actions</MyColumn>
153+
</TableHeader>
154+
<TableBody items={list.items}>
155+
{item => (
156+
<Row>
157+
<Cell><MyCheckbox slot="selection" /></Cell>
158+
<Cell>{item.name}</Cell>
159+
<Cell>{item.type}</Cell>
160+
<Cell>{item.date}</Cell>
161+
<Cell>
162+
<DialogTrigger>
163+
<Button>Delete</Button>
164+
<ModalOverlay
177165
style={{
178-
background: 'Canvas',
179-
color: 'CanvasText',
180-
border: '1px solid gray',
181-
padding: 30
166+
position: 'fixed',
167+
zIndex: 100,
168+
top: 0,
169+
left: 0,
170+
bottom: 0,
171+
right: 0,
172+
background: 'rgba(0, 0, 0, 0.5)',
173+
display: 'flex',
174+
alignItems: 'center',
175+
justifyContent: 'center'
182176
}}>
183-
<Dialog>
184-
{({close}) => (<>
185-
<Heading slot="title">Delete item</Heading>
186-
<p>Are you sure?</p>
187-
<Button onPress={close}>Cancel</Button>
188-
<Button
189-
onPress={() => {
190-
close();
191-
list.remove(item.id);
192-
}}>
193-
Delete
194-
</Button>
195-
</>)}
196-
</Dialog>
197-
</Modal>
198-
</ModalOverlay>
199-
</DialogTrigger>
200-
</Cell>
201-
</Row>
202-
)}
203-
</TableBody>
204-
</Table>
205-
</ResizableTableContainer>
177+
<Modal
178+
style={{
179+
background: 'Canvas',
180+
color: 'CanvasText',
181+
border: '1px solid gray',
182+
padding: 30
183+
}}>
184+
<Dialog>
185+
{({close}) => (<>
186+
<Heading slot="title">Delete item</Heading>
187+
<p>Are you sure?</p>
188+
<Button onPress={close}>Cancel</Button>
189+
<Button
190+
onPress={() => {
191+
close();
192+
list.remove(item.id);
193+
}}>
194+
Delete
195+
</Button>
196+
</>)}
197+
</Dialog>
198+
</Modal>
199+
</ModalOverlay>
200+
</DialogTrigger>
201+
</Cell>
202+
</Row>
203+
)}
204+
</TableBody>
205+
</Table>
206+
</ResizableTableContainer>
207+
</div>
208+
);
209+
};
210+
211+
export const FixedColumnWidths: TableStory = (args) => {
212+
let list = useListData({
213+
initialItems: [
214+
{id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
215+
{id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder'},
216+
{id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file'},
217+
{id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
218+
]
219+
});
220+
221+
return (
222+
<div style={{width: 600, overflow: 'auto'}}>
223+
<ResizableTableContainer>
224+
<Table aria-label="Example table with fixed column widths" {...args}>
225+
<TableHeader>
226+
<Column width={30} minWidth={0}><MyCheckbox slot="selection" /></Column>
227+
<MyColumn isRowHeader width={100}>Name</MyColumn>
228+
<MyColumn width={100}>Type</MyColumn>
229+
<MyColumn width={100}>Date Modified</MyColumn>
230+
</TableHeader>
231+
<TableBody items={list.items}>
232+
{item => (
233+
<Row>
234+
<Cell><MyCheckbox slot="selection" /></Cell>
235+
<Cell>{item.name}</Cell>
236+
<Cell>{item.type}</Cell>
237+
<Cell>{item.date}</Cell>
238+
</Row>
239+
)}
240+
</TableBody>
241+
</Table>
242+
</ResizableTableContainer>
243+
</div>
206244
);
207245
};
208246

0 commit comments

Comments
 (0)