Is expandable table rows possible?

[tilds]

Hi I am trying to create a table with expandable rows like in this example: https://tanstack.com/table/v8/docs/examples/react/expanding

So when you click on the row it expands to show it's "child" rows.

I have tried to create a structure like this, where an expandable row is defined as a group with a header row and a list of "child" rows.

<Table aria-label="Example of Nested table" style={{height: '210px', maxWidth: '400px'}}>
  <Table.TableHeader>
    <Table.Column allowsSorting>Name</Table.Column>
  </Table.TableHeader>
  <Table.TableBody>
    <Table.Group>
      <Table.GroupHeader>
        <Table.Row>
          <Table.Cell>Parent</Table.Cell>
        </Table.Row>
      </Table.GroupHeader>
      <Table.GroupRows>
        <Table.Row>
          <Table.Cell>Child 1</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Child 2</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>Child 3</Table.Cell>
        </Table.Row>
      </Table.GroupRows>
    </Table.Group>
  </Table.TableBody>
</Table>

These elements don't render anything themselves but instead just render their children with additional props.

import {React, useState} from 'react';

const childrenWithProps = (children, props) =>
	React.Children.map(children, child => {
		if (React.isValidElement(child)) {
			return React.cloneElement(child, props);
		}
		return child;
	});

export const TableGroup = props => {
	const [expanded, setExpanded] = useState(false);
	return childrenWithProps(props.children, {expanded, toggleExpanded: () => setExpanded(!expanded)});
};

export const TableGroupHeader = ({expanded, toggleExpanded, children, ...props}) => {
	return childrenWithProps(children, {isGroupheader: true, expanded, onClick: toggleExpanded, ...props});
};

export const TableGroupRows = ({expanded, toggleExpanded, children, ...props}) => {
	return expanded ? childrenWithProps(children, {level: 1, ...props}) : null;
};

This unfortuantely doesn't work as I am getting TypeError: type.getCollectionNode is not a function

I am guessing it's because it expects the children of Body to be Rows, but I am unsure how to get around this.

Does anyone know if this is possible?

[devongovett]

For accessibility, this needs to implement the treegrid ARIA pattern. This is on our roadmap to work on later this year, but at the moment it isn't really possible.

[emillaine]

@devongovett Thanks! We're also looking forward to expandable rows support. Any updates, is it still on the roadmap for later this year?

[ihaback]

@devongovett is this request still on the roadmap?

[snowystinger]

It's still on the roadmap, but it's been bumped back in priority. Unfortunately, I don't have an update on the timeline.

[nonken]

Also interested in this or some pointers to how to implement this.

[jussirantala]

Interested as well. Is it possible to follow the progress somehow? Your roadmap is not public, right?

[snowystinger]

I think it's public

RSP Component Milestones (view)

is currently blocked by work on

RSP Component Milestones (view)

[NatalieLoyzaga]

Also interested in the collapsible rows - Is there an update on that epic ?

[snowystinger]

according to the comment above, it looks like the blocker has been completed. We have not picked up this work yet though as we have some other priorities getting the S2 components to mostly feature parity and stable release. We should pick this up soon after that if someone hasn't made a PR contributing it yet.

[kirkobyte]

I see Implement TreeView component is now completed but TableView: Collapsible Rows is still marked as blocked.

Could users likely create a table with expandable rows combining the Treeview and Table React Aria components/hooks?

[snowystinger]

Not quite yet with React Aria Components, with the hooks though, yes. You can see our implementation of it in React Spectrum https://reactspectrum.blob.core.windows.net/reactspectrum/d5ba547da6fa9fa94afcd848964fdad49ed5c9ec/storybook/index.html?path=/story/tableview-expandable-rows--static-expandable-rows&providerSwitcher-express=false

We haven't had priority to work on it in RAC and our newer version of React Spectrum which is built on RAC.

If you use TreeView, you'll just get a single column Table is all.

[cheema-corellian]

Is it correct to assume that expandable rows for TableView, as shown in the linked demo, are not yet released for React Spectrum either?

[snowystinger]

Expandable rows is in v3 TableView, see the source for the story though, it's "prerelease", so not documented.

[AwelTeam]

This would help my team also
Really hoping the team can prioritize this in the next quarter — happy to help test or even contribute if it moves forward.
Thanks!

[dannify]

Hey @AwelTeam. We will not be able to take on this work before the end of the year. If you are interested in helping, you can look at the implementation we have in RSP v3 mentioned by Rob above, and propose an implementation plan for this feature to be added in React Aria Components. Feel free to make an issue and add all your thoughts there. We can take a look, and if you have time, guide a contribution. Otherwise we will try to get to this in a few months. I don't have a solid timeline yet.

[dannify]

Update to the latest release for expanding rows in tables - https://react-aria.adobe.com/releases/v1-17-0#table