Open
Description
Provide a general summary of the issue here
When I try to implement nested columns, I find that the page freezes when there are operations like setState in the component content. code like:
function App() {
const [count, setCount] = useState(0);
return (
<div>
{/* Clicking causes the page to freeze */}
<Button onClick={() => setCount(count + 1)}>click {count}</Button>
<Table aria-label="Example table with nested columns">
<TableHeader>
<Column title="Name">
<Column isRowHeader>First Name</Column>
<Column isRowHeader>Last Name</Column>
</Column>
<Column title="Information">
<Column>Age</Column>
<Column>Birthday</Column>
</Column>
</TableHeader>
<TableBody>
<Row>
<Cell>Sam</Cell>
<Cell>Smith</Cell>
<Cell>36</Cell>
<Cell>May 3</Cell>
</Row>
<Row>
<Cell>Julia</Cell>
<Cell>Jones</Cell>
<Cell>24</Cell>
<Cell>February 10</Cell>
</Row>
<Row>
<Cell>Peter</Cell>
<Cell>Parker</Cell>
<Cell>28</Cell>
<Cell>September 7</Cell>
</Row>
<Row>
<Cell>Bruce</Cell>
<Cell>Wayne</Cell>
<Cell>32</Cell>
<Cell>December 18</Cell>
</Row>
</TableBody>
</Table>
</div>
);
}
🤔 Expected Behavior?
It should display normally and not freeze.
😯 Current Behavior
The page is frozen/stuck.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
Please access this link: https://codesandbox.io/s/great-tdd-3myszn?file=/src/App.tsx.
Clicking the button on the page will reproduce it.
Version
What browsers are you seeing the problem on?
Chrome, Safari
If other, please specify.
No response
What operating system are you using?
macOS 13.5.2
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
🔬 To Investigate / Verify