Best Practices for row groups in useTable

[calthejuggler]

Hello there :) I'm implementing a table component and am really impressed by the functionalities provided by useTable, but I have a question. Is there currently (or plans for) support for row groups? The aim would be to have a table that looks something like this:

Snacks/Country

Name	Amount purchased	Price	Total
United Kingdom
Crisps	3,000,000	1.00	3,000,000
Choco	5,000	2.00	10,000
United States
Crisps	3,000,000	1.00	3,000,000
Choco	5,000	2.00	10,000
The Netherlands
etc.

...where the table rows are split up into another layer of grouping. Sorting would then happen inside each group, rather than per row.

Is there a way to do this with useTable? Or should I go straight for useGrid utilities instead?

Thank you in advance 🙂

If it helps, this is my current Table component:

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 text-left", 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.body.childNodes].map(row => (
					<TableRow key={row.key} item={row} state={state}>
						{[...(collection.getChildren?.(row.key) ?? [])].map((cell, index) => (
							<TableCell isFirst={index === 0} key={cell.key} cell={cell} state={state} />
						))}
					</TableRow>
				))}
			</TableRowGroup>
		</table>
	);
};

[LFDanLu]

I had done some work earlier this year for supporting this use case in the React Spectrum TableView and ListView. You can see this code #4210 and #4173. At the moment, it isn't supported within useTable and useGrid because the GridCollection/TableCollection need some section (aka rowgroups) specific updates to process the new TableSection wrapper. There are quite a number of changes in those PRs but you can focus on looking at the changes in the aria table hooks and the stately table changes to start with.

Things to keep in mind:

• official aria support for nested rowgroups is pretty rough/non-existant, with aria-rowspan and aria-colspan behaving worse than if you were to use native html elements to construct the same row group structure
• RAC components collections may make the api for implementing this much easier but we haven't got to that point in implementation (part of the reason why the PRs are on hold)

We plan to pick up this work in the future but it may be a while due to other priorities

[calthejuggler]

Okay, thanks for the detailed reply 😊

[4RSIM3R]

So how we can use colSpan and rowSpan?