Question: How to Combine Accordion with a Table for Expandable Rows?

[jamesepirus]

I'm working on a UI where I need to display a table with rows that can expand to show additional details for each item. I thought about using an accordion inside the table to achieve this, but I'm running into some challenges. Here's a simplified version of what I'm trying to do:

<Table>
    <TableHeader>
        <TableRow>
            <TableHead>Item Name</TableHead>
            <TableHead>Category</TableHead>
            <TableHead>Description</TableHead>
            <TableHead>Date Added</TableHead>
            <TableHead>Actions</TableHead>
        </TableRow>
    </TableHeader>
    <Accordion.Root>
        <TableBody>
            {#each items as item (item.id)}
                <Accordion.Item value=`${item.id}`>
                    <TableRow>
                        <Accordion.Trigger>
                            {#if editingItem && editingItem.id === item.id }
                                <TableCell>
                                    <Input bind:value={editingItem.name}/>
                                </TableCell>
                                <TableCell>
                                    <Input bind:value={editingItem.category}/>
                                </TableCell>
                                <TableCell>
                                    <Textarea bind:value={editingItem.description}/>
                                </TableCell>
                                <TableCell>
                                    <Button onclick={() => saveItem(item)}>Save</Button>
                                    <Button onclick={() => cancelEdit(item)}>Cancel</Button>
                                    <Button onclick={() => deleteItem(item)}>Delete</Button>
                                </TableCell>
                            {:else}
                                <TableCell>{item.name}</TableCell>
                                <TableCell>{item.category}</TableCell>
                                <TableCell>{item.description}</TableCell>
                                <TableCell>{item.date_added}</TableCell>
                                <TableCell>
                                    <Button onclick={() => editItem(item)}>Edit</Button>
                                </TableCell>
                            {/if}
                        </Accordion.Trigger>
                        <Accordion.Content>
                            <!-- Additional details or content about the item goes here -->
                            Here are more details about the item...
                        </Accordion.Content>
                    </TableRow>
                </Accordion.Item>
            {/each}
        </TableBody>
    </Accordion.Root>
</Table>

What I'm trying to achieve:

When I try to implement this, it changes the way the table looks, as if the accordion item is only for the first column. I tried using asChild prop, but I wasn't sure where I have to place the let:builder value pass along to what component.

Issues:
I want to ensure proper accessibility and alignment of the accordion content within the table structure.
Is there a better approach to combining the accordion with the table structure like this?

I've tried using the