Correct syntax for Table Component - collection.getChildren(collection.body.key)

[calthejuggler]

Hello there :)
I'm making a table component and have been following the documentation, but I notice that childNodes is deprecated. As per the suggestion, I have changed it to collection.getChildren(headerRow.key), which works well, but the problem is the body of the table. collection.getChildren(collection.body.key) renders nothing in the table, whereas collection.body.childNodes.map() does.

Could someone give me a pointer as to the correct syntax for the new getChildren function in a Table body?

Here is my component so far:

interface TableComponentProps<T> extends AriaTableProps<T>, TableProps<T> {
	selectionBehaviour?: SelectionBehavior;
	className?: string;
}

export const Table = <T extends Record<string, unknown>>({
	selectionMode,
	selectionBehaviour,
	className,
	...props
}: TableComponentProps<T>): React.JSX.Element => {
	const state = useTableState({
		...props,
		showSelectionCheckboxes: selectionMode === "multiple" && selectionBehaviour !== "replace"
	});

	const ref = useRef<HTMLTableElement>(null);

	const { collection } = state;
	const { gridProps } = useTable({ ...props }, state, ref);

	return (
		<table {...gridProps} ref={ref} className={twMerge("border-collapse", className)}>
			<TableRowGroup type={"thead"}>
				{collection.headerRows.map(headerRow => (
					<TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
						{[...(collection.getChildren?.(headerRow.key) ?? [])].map(column => (
							<TableColumnHeader key={column.key} column={column} state={state} />
						))}
					</TableHeaderRow>
				))}
			</TableRowGroup>
			<TableRowGroup type={"tbody"}>
				{[...(collection.getChildren?.(collection.body.key) ?? [])].map(row => (
					<TableRow key={row.key} item={row} state={state}>
						{[...(collection.getChildren?.(row.key) ?? [])].map(cell => (
							<TableCell key={cell.key} cell={cell} state={state} />
						))}
					</TableRow>
				))}
				{/*
				    The above renders nothing, but:
				    ```
						{[...collection.body.childNodes].map(row => (
				    ```
				    works as expected with a deprecation warning.
				*/}
			</TableRowGroup>
		</table>
	);
};

Please and thank you in advance :)

[LFDanLu]

I think this is a bug/something missed within the original TableCollection implementation when we introduced the new RAC collections api (in this case specifically the addition of getChildNodes/getChildren). The original TableCollection (aka the one returned by useTableState by default) doesn't actually include the body in the key map it generates hence why collection.getChildren doesn't work. You can continue using [...collection.body.childNodes] and suppress the warning for now or use [...collection].map(... instead since it should yield the body's nodes as well.

Alternatively, I'd recommend checking out the RAC Table component if you want to render a table but style it more easily without having to do this hooks glue work. It uses the new collections api which we hope to move all of our components to eventually. Do you have a use case that it doesn't support that you need to drop to the hooks level for?

[calthejuggler]

Hey there @LFDanLu :) Thanks for your response - I will update the code accordingly.
As for RAC, my company decided to move to React Aria a few months ago, but at that time this page said that RAC was still in beta. We wanted something stable to work with, so we went directly for the hooks approach.

I actually have another question about useTable, but I will open another discussion for it.

Thanks again!