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.

[emlai]

@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

https://github.com/orgs/adobe/projects/19/views/18?filterQuery=issue-type%3A%22%F0%9F%AA%90Epic%22+coll&pane=issue&itemId=10905751

is currently blocked by work on

https://github.com/orgs/adobe/projects/19/views/18?filterQuery=issue-type%3A%22%F0%9F%AA%90Epic%22+coll&pane=issue&itemId=10041236