Skip to content

[pull] main from adobe:main #345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 1 commit into from
Apr 3, 2026
Merged

[pull] main from adobe:main #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/@react-spectrum/s2/chromatic/TableView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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']
}
}
};
6 changes: 4 additions & 2 deletions packages/react-aria-components/src/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -687,7 +687,9 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
style = {
...style,
tableLayout: 'fixed',
width: 'fit-content'
// 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'
};
}
}
Expand Down
158 changes: 98 additions & 60 deletions packages/react-aria-components/stories/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
Loading