Expandable rows using tanstack table

[3bdallahz]

Hi everyone,
I'm trying to use tanstack table with react-aria-components
but it's not working
here is the code

export default function App() {
    const columns = useMemo<ColumnDef<Person>[]>(
        () => [
            {
                accessorKey: 'firstName',
                header: ({ table }) => (
                    <>
                        <IndeterminateCheckbox
                            {...{
                                checked: table.getIsAllRowsSelected(),
                                indeterminate: table.getIsSomeRowsSelected(),
                                onChange: table.getToggleAllRowsSelectedHandler(),
                            }}
                        />{' '}
                        <button
                            {...{
                                onClick: table.getToggleAllRowsExpandedHandler(),
                            }}
                        >
                            {table.getIsAllRowsExpanded() ? '👇' : '👉'}
                        </button>{' '}
                        First Name
                    </>
                ),
                cell: ({ row, getValue }) => (
                    <div
                        style={{
                            // Since rows are flattened by default,
                            // we can use the row.depth property
                            // and paddingLeft to visually indicate the depth
                            // of the row
                            paddingLeft: `${row.depth * 2}rem`,
                        }}
                    >
                        <div>
                            <IndeterminateCheckbox
                                {...{
                                    checked: row.getIsSelected(),
                                    indeterminate: row.getIsSomeSelected(),
                                    onChange: row.getToggleSelectedHandler(),
                                }}
                            />{' '}
                            {true ? (
                                <button onClick={() => row.toggleExpanded()}
                                >
                                    {row.getIsExpanded() ? '👇' : '👉'}
                                </button>
                            ) : (
                                '🔵'
                            )}{' '}
                            {getValue<boolean>()}
                        </div>
                    </div>
                ),
                footer: props => props.column.id,
            },
            {
                accessorFn: row => row.lastName,
                id: 'lastName',
                cell: info => info.getValue(),
                header: () => <span>Last Name</span>,
                footer: props => props.column.id,
            },
        ],
        []
    )
    const [data] = useState(() => [{
    firstName: "foo",
    lastName: "bar"
}])

    const [expanded, setExpanded] = useState<ExpandedState>({})

    const table = useReactTable({
        data,
        columns,
        state: {
            expanded,
        },
        onExpandedChange: setExpanded,
        // getSubRows: row => row.subRows,
        // getSubRows: row => [],
        getCoreRowModel: getCoreRowModel(),
        // getPaginationRowModel: getPaginationRowModel(),
        // getFilteredRowModel: getFilteredRowModel(),
        getExpandedRowModel: getExpandedRowModel(),
        // filterFromLeafRows: true,
        // maxLeafRowFilterDepth: 0,
        debugTable: true,
    })

    return (
        <div className="p-2">
            <div className="h-2" />
            <Table aria-label="campaign details">
                <TableHeader className={cn(
                    "border-tt border-[#f1f1f1] h-[34px] text-[#999999] text-left font-light test-[1rem]"
                )}>
                    <Collection items={table.getHeaderGroups()}>
                        {(headerGroup) => (
                            <Collection items={headerGroup.headers}>
                                {(header) => (
                                    <Column
                                        key={header.id}
                                        isRowHeader
                                        className={cn("border-r last:border-r-transparent border-r-[#f1f1f1] font-medium")}
                                    >
                                        {header.isPlaceholder
                                            ? null
                                            : flexRender(
                                                header.column.columnDef.header,
                                                header.getContext()
                                            )}
                                    </Column>
                                )}
                            </Collection>
                        )}
                    </Collection>
                </TableHeader>
                <TableBody items={table.getRowModel().rows}>
                    {(row) => (
                        <Row
                            key={row.id}
                            // data-state={row.getIsSelected() && "selected"}
                            className="h-[33px] border-t border-[#f1f1f1] last:border-b last:border-b-[#f1f1f1]"
                        >
                            <Collection items={row.getVisibleCells()}>
                                {(cell) => (
                                    <Cell
                                        key={cell.id}
                                        className="border-r last:border-r-transparent border-r-[#f1f1f1]"
                                    >
                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                    </Cell>
                                )}
                            </Collection>
                        </Row>
                    )}
                </TableBody>
            </Table>

            <label>Expanded State:</label>
            <pre>{JSON.stringify(expanded, null, 2)}</pre>
        </div>
    )
}

using raw table elements it works
Does react-aria-components not support expandable rows?

[snowystinger]

We don't support expandable rows yet, but it's in our roadmap. It unfortunately got its priority bumped down a little, but a lot of the needed support work is still ongoing.
#4323

#4641 and https://github.com/orgs/adobe/projects/19/views/4?sliceBy%5Bvalue%5D=TableView&pane=issue&itemId=33909238

[3bdallahz]

Thanks @snowystinger