Table

Use the Table component to either display a well-styled regular HTML table or a custom (semantic=false) table with expandable sections.

If you chose the custom variant, you need to use the other custom table-related components (Table Cell), Table Header and Table Row). You must structure the table so that the count of headers or cells matches up for all rows. When you include expandable sections and wish to link them accordeon-style, you must provide a value for the group property.

Make sure to exclusively use the custom table to include expandable sections — for any other case use the regular table markup!

'group' => false,
'semantic' => true,
Datum Transaktion Summe
01.12.25 Auszahlung +100,00 €
28.11.25 Zahlung +100,00 €
27.11.25 Rückerstattung +100,00 € 
{{-- regular "semantic" HTML table --}}
<x-table>
    <tr>
        <th>Datum</th>
        <th class="w-full">Transaktion</th>
        <th class="min-w-[96px]">Summe</th>
    </tr>
    <tr>
        <td>01.12.25</td>
        <td>Auszahlung</td>
        <td>+100,00 €</td>
    </tr>
    <tr>
        <td>28.11.25</td>
        <td>Zahlung</td>
        <td>+100,00 €</td>
    </tr>
    <tr>
        <td>27.11.25</td>
        <td>Rückerstattung</td>
        <td>+100,00 €</td>
    </tr>
</x-table>
Datum
Transaktion
Summe
01.12.25
Auszahlung
+100,00 €
reiciendis ducimus non magni sunt voluptas architecto ducimus a aut architecto eveniet saepe atque aut dolorum
28.11.25
Zahlung
-100 €
laboriosam sit et non ratione maiores blanditiis ea corporis laboriosam corrupti eum molestias iusto accusantium numquam
27.11.25
Rückerstattung
+100,00 €
vitae fugiat perferendis quidem illo qui id aliquid beatae ullam blanditiis et sed sit nihil quo 
{{-- "faux" table --}}
<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>
        <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>