Table(react-aria-components): Nested columns causing page freeze

[leijuns]

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

react-aria-components@1.0.0-beta.1

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

[chrstntdd]

I have encountered something similar in newer releases of react-aria-components. Version 1.0.0-alpha.3 was the last version I was able to use without this behavior you are describing, but I haven't been able to fully diagnose the issue. Can you try your code with that version I mentioned?

Edit: Have forked the original repo and downgraded to the last version that worked: https://codesandbox.io/s/intelligent-dawn-kwd63m?file=/src/App.tsx

[yihuiliao]

While investigating another issue related to nested columns, we’ve decided that we’d like to update the API for nested columns. Since we plan to release RAC for GA soon, we are opting to remove support for nested columns in the short term as we work on a follow-up with the API changes. I’m unsure if those changes will fix this issue but I want to make sure we revisit this issue while working on that follow-up. Also thanks @chrstntdd for pointing out that this used to work before in a previous version! It was helpful to pinpoint the PR that this broke which was https://github.com/adobe/react-spectrum/pull/4536

[sebald]

@yihuiliao thanks for investing this so quickly!

Is the re-enabling of the nested columns feature something you will work on next year? We already switched our table to rc.0 but we make use of the nested column a lot. Asking because we need to decide if we revert the migration for now or if we sit it out 🙃

[yihuiliao]

Yes, it would likely be something we'd work on next year but unfortunately, I don't know enough to give you a timeline or estimate. I’ll update this ticket if I know more though.