Use the Table Row component inside a custom Table component to include expandable sections. Set the group property value on the parent Table to link the expandable sections (only one will be open at a time). To expand a section on page load, set the open property.
'open' => false, 'group' => false, // inherited 'details' => false, // slot
<x-table semantic="false" group="sample-table"> <x-tableRow> <x-tableHeader>Datum</x-tableHeader> <x-tableHeader>Transaktion</x-tableHeader> <x-tableHeader class="ml-auto">Summe</x-tableHeader> </x-tableRow> <x-tableRow open> <x-tableCell>01.12.25</x-tableCell> <x-tableCell>Auszahlung</x-tableCell> <x-tableCell class="ml-auto">+100,00 €</x-tableCell> <x-slot:details>{{-- ... --}}</x-slot> </x-tableRow> <x-tableRow> <x-tableCell>28.11.25</x-tableCell> <x-tableCell>Zahlung</x-tableCell> <x-tableCell class="ml-auto">-100 €</x-tableCell> <x-slot:details>{{-- ... --}}</x-slot> </x-tableRow> <x-tableRow> <x-tableCell>27.11.25</x-tableCell> <x-tableCell>Rückerstattung</x-tableCell> <x-tableCell class="ml-auto">+100,00 €</x-tableCell> <x-slot:details>{{-- ... --}}</x-slot> </x-tableRow> </x-table>