Table

Production data tables supporting striped rows, compact modes, avatars, status badges, and action toolbars.

Component Syntax

blade

<x-aura::table>
    <x-slot:header>
        <x-aura::table.column>
            Member
        </x-aura::table.column>

        <x-aura::table.column align="right">
            Action
        </x-aura::table.column>
    </x-slot:header>

    <x-aura::table.row>
        <x-aura::table.cell>
            Alex Morgan
        </x-aura::table.cell>

        <x-aura::table.cell align="right">
            <x-aura::button size="xs">
                View
            </x-aura::button>
        </x-aura::table.cell>
    </x-aura::table.row>
</x-aura::table>

1. Directory Table with Avatars

blade

Member	Role	Status
Alex Morgan alex.morgan@example.com	Lead Engineer	Active
Sarah Chen sarah.chen@example.com	UI Designer	Active
Marcus Vance marcus.vance@example.com	Architect	Offline

<x-aura::table>
    <x-slot:header>
        <x-aura::table.column>
            Member
        </x-aura::table.column>

        <x-aura::table.column>
            Role
        </x-aura::table.column>

        <x-aura::table.column>
            Status
        </x-aura::table.column>

        <x-aura::table.column align="right">
            Action
        </x-aura::table.column>
    </x-slot:header>

    @foreach ($users as $user)
        <x-aura::table.row>
            <x-aura::table.cell>
                <x-aura::flex align="center" gap="3">
                    <x-aura::avatar src="{{ $user['avatar'] }}" size="sm" />

                    <x-aura::flex direction="col" align="start" gap="0.5">
                        <x-aura::text size="sm" weight="semibold">
                            {{ $user['name'] }}
                        </x-aura::text>

                        <x-aura::text size="xs" variant="subtle">
                            {{ $user['email'] }}
                        </x-aura::text>
                    </x-aura::flex>
                </x-aura::flex>
            </x-aura::table.cell>

            <x-aura::table.cell>
                <x-aura::text size="sm">
                    {{ $user['role'] }}
                </x-aura::text>
            </x-aura::table.cell>

            <x-aura::table.cell>
                <x-aura::badge variant="{{ $user['status'] === 'Active' ? 'neutral' : 'subtle' }}" size="sm">
                    {{ $user['status'] }}
                </x-aura::badge>
            </x-aura::table.cell>

            <x-aura::table.cell align="right">
                <x-aura::flex align="center" justify="end" gap="1.5">
                    <x-aura::icon-button icon="eye" variant="ghost" size="xs" label="View" />
                    <x-aura::icon-button icon="pencil" variant="ghost" size="xs" label="Edit" />
                </x-aura::flex>
            </x-aura::table.cell>
        </x-aura::table.row>
    @endforeach
</x-aura::table>

2. Striped Invoices Table with Footer

blade

Invoice ID	Client	Status	Amount
INV-2024-001	Acme Corporation	Paid	$1,250.00
INV-2024-002	Starlight Design Studio	Pending	$840.00
INV-2024-003	Global Logistics Inc	Paid	$3,400.00
Total Invoiced (3 Items)			$5,490.00

<x-aura::table :striped="true">
    <x-slot:header>
        <x-aura::table.column>
            Invoice ID
        </x-aura::table.column>

        <x-aura::table.column>
            Client
        </x-aura::table.column>

        <x-aura::table.column>
            Status
        </x-aura::table.column>

        <x-aura::table.column align="right">
            Amount
        </x-aura::table.column>
    </x-slot:header>

    @foreach ($invoices as $inv)
        <x-aura::table.row>
            <x-aura::table.cell>
                <x-aura::text variant="mono" size="sm">
                    {{ $inv['id'] }}
                </x-aura::text>
            </x-aura::table.cell>

            <x-aura::table.cell>
                <x-aura::text size="sm" weight="medium">
                    {{ $inv['client'] }}
                </x-aura::text>
            </x-aura::table.cell>

            <x-aura::table.cell>
                <x-aura::tag variant="{{ $inv['status'] === 'Paid' ? 'neutral' : 'subtle' }}" size="sm">
                    {{ $inv['status'] }}
                </x-aura::tag>
            </x-aura::table.cell>

            <x-aura::table.cell align="right">
                <x-aura::text size="sm" weight="semibold">
                    {{ $inv['amount'] }}
                </x-aura::text>
            </x-aura::table.cell>
        </x-aura::table.row>
    @endforeach

    <x-slot:footer>
        <tr>
            <td colspan="3" class="px-4 py-3 font-semibold">
                Total Invoiced (3 Items)
            </td>

            <td class="px-4 py-3 text-right font-bold">
                $5,490.00
            </td>
        </tr>
    </x-slot:footer>
</x-aura::table>

3. Compact Metrics Log Table

blade

HTTP Method	API Endpoint	Status	Latency
GET	/api/v1/users	200 OK	32ms
POST	/api/v1/auth/login	200 OK	115ms
POST	/api/v1/checkout	201 Created	84ms

<x-aura::table :compact="true">
    <x-slot:header>
        <x-aura::table.column>
            HTTP Method
        </x-aura::table.column>

        <x-aura::table.column>
            API Endpoint
        </x-aura::table.column>

        <x-aura::table.column>
            Status
        </x-aura::table.column>

        <x-aura::table.column align="right">
            Latency
        </x-aura::table.column>
    </x-slot:header>

    @foreach ($metrics as $metric)
        <x-aura::table.row>
            <x-aura::table.cell>
                <x-aura::tag variant="neutral" size="sm">
                    {{ $metric['method'] }}
                </x-aura::tag>
            </x-aura::table.cell>

            <x-aura::table.cell>
                <x-aura::text variant="mono" size="xs">
                    {{ $metric['endpoint'] }}
                </x-aura::text>
            </x-aura::table.cell>

            <x-aura::table.cell>
                <x-aura::badge variant="subtle" size="sm">
                    {{ $metric['status'] }}
                </x-aura::badge>
            </x-aura::table.cell>

            <x-aura::table.cell align="right">
                <x-aura::text variant="mono" size="xs">
                    {{ $metric['duration'] }}
                </x-aura::text>
            </x-aura::table.cell>
        </x-aura::table.row>
    @endforeach
</x-aura::table>

Component Props

Available properties and configurations for the table component.

Prop	Default	Available Values
striped	false	true false
compact	false	true false
hover	true	true false
borderless	false	true false

Aura Wire

Component Library

Table

Component Syntax

1. Directory Table with Avatars

2. Striped Invoices Table with Footer

3. Compact Metrics Log Table

Component Props

Empty

Stat

Aura Wire