Table Component

The Table component provides a styled, responsive table with bordered rows and dark mode support.

Basic Usage

Create a table with head and body slots:

<x-table>
    <x-slot:head>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
    </x-slot:head>

    <x-slot:body>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>Editor</td>
        </tr>
        <tr>
            <td>Bob Johnson</td>
            <td>bob@example.com</td>
            <td>Viewer</td>
        </tr>
    </x-slot:body>
</x-table>

With Badges

Combine with other components for richer content:

<x-table>
    <x-slot:head>
        <th>Product</th>
        <th>Status</th>
        <th>Price</th>
    </x-slot:head>

    <x-slot:body>
        <tr>
            <td>Premium Plan</td>
            <td><x-badge variant="success">Active</x-badge></td>
            <td>$99/mo</td>
        </tr>
        <tr>
            <td>Basic Plan</td>
            <td><x-badge variant="warning">Pending</x-badge></td>
            <td>$29/mo</td>
        </tr>
        <tr>
            <td>Enterprise</td>
            <td><x-badge variant="info">Trial</x-badge></td>
            <td>$299/mo</td>
        </tr>
    </x-slot:body>
</x-table>

Props Reference

Prop	Type	Default	Description
headClass	string	''	Additional CSS classes for the table header.
bodyClass	string	''	Additional CSS classes for the table body.

Slots

Slot	Description
head	Required. Table header content. Contains <th> elements.
body	Required. Table body content. Contains <tr> and <td> elements.

References

Category	Path / Name	Description
Component	resources/views/components/table.blade.php	Table component file

For the detailed documentation, please visit the Penguin UI Tables.