Table Row

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
Datum
Transaktion
Summe
01.12.25
Auszahlung
+100,00 €
quos non aut aliquam sit autem id temporibus ex est odit ipsam dolorem excepturi perferendis atque
28.11.25
Zahlung
-100 €
in soluta ipsum accusantium voluptatum sapiente eveniet delectus est cumque qui voluptatibus quas ipsum id veritatis
27.11.25
Rückerstattung
+100,00 €
et assumenda quia nisi est exercitationem ut nisi dignissimos dicta autem ut nam et excepturi quae
<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>