Support multiple TableBody elements

[mike-wheel]

Provide a general summary of the issue here

According to the <tbody> MDN documentation:

It's permitted to use more than one <tbody> per table as long as they are all consecutive. This allows to divide the rows (<tr> elements) in large tables into sections, each of which may be separately formatted if so desired.

When I try to add two react-aria <TableBody> elements like this, only the last one is rendered.

🤔 Expected Behavior?

Both <TableBody> elements are rendered.

😯 Current Behavior

<TableBody className="folders"> is not rendered

💁 Possible Solution

I kind of took a look at the code, and it looks like this.body gets overwritten every time in Table.tsx. This logic would need to be updated to concat all the tablebody nodes together in a React.Fragment or something.

🔦 Context

Using multiple <tbody> elements can assist in implemented grouped/collapsible rows, like this https://codepen.io/andornagy/pen/gaGBZz?editors=1000

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/thirsty-panini-d3mgyv
Notice that the first <TableBody className="folders"> is not rendered.

Version

1.3.3

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge, Other

If other, please specify.

No response

What operating system are you using?

macOS Sonoma 14.6.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

@mike-wheel Thanks for reporting this! Do you expect additional <TableBody /> sections to be collapsible or are you just looking for visual separation for now?

[LFDanLu]

In addition to @nwidynski's question, would you expect each "section" to be individually scrollable/support its own async infinite scrolling? When we first started on support for TableSections in RSP, we only considered having the section be a wrapping row group or having it just represented as a row itself with an appropriate aria-row span, but having them be TableBody's is interesting, would need to see how the accessibility support is for something like that. However, from an API standpoint it is a bit inconsistent to support TableBody's in place of a TableSection when other collection components already support some form of a Section.

[nwidynski]

@LFDanLu On this point, have you guys thought about a cell colSpan of more than 1? There would be some remaining work to do on the keyboard delegate but i could see the use case, especially once table sections make it over to RAC.

[LFDanLu]

With regards to the TableSection itself, we added support to apply the proper colSpan and the keyboard navigation required to skip past it automatically, but we haven't done much exploration with arbitrary cells having colSpan of more than 1. We would definitely need to update stuff on the keyboard delegate's end as you mentioned as well as investigate if RAC's new collections code needs any tweaking to support that as well since the old work predated RAC collections

[mike-wheel]

Thanks for the responses!

Honestly, my plan was to create the table sections with <tbody> like in the POC I found, and animate the <tbody> open/closed to build the expandable/collapable table rows. It turns out that it doesn't appear that <tbody> can be animated like that because it doesn't respect a height or overflow: hidden 🫤.

Either way, I find the spec permitting multiple tbodys interesting, and wonder if RAC should support that. But I'm also not familiar with the infinite scroll feature, so this might interfere with that.

I'm not familiar with TableSection and I don't see any documentation about it, can you point me to some documentation?

[LFDanLu]

@mike-wheel Haha, yeah using the native table elements can make styling a challenge. As for TableSection there isn't any documentation for it yet since work for it had been halted due to other priorities. If you'd like, you can peruse this PR for the prior work done for it in React Spectrum, but the eventual React Aria Components implementation will probably have differences due to the use of native table elements when not virtualized and the different collection API as mentioned previously