Table

A responsive table component.

Looking for advanced features like sorting, filtering, and pagination? Check out the Data Table component.

Examples

Basic Table

Standard table with rows and columns.

Name	Title	Email	Role
Lindsay Walton	Front-end Developer	lindsay.walton@example.com	Member
Courtney Henry	Designer	courtney.henry@example.com	Admin

blade

<x-plume::table class="w-full">
    <x-plume::table.thead>
        <x-plume::table.tr>
            <x-plume::table.th>Name</x-plume::table.th>
            <x-plume::table.th>Title</x-plume::table.th>
            <x-plume::table.th>Email</x-plume::table.th>
            <x-plume::table.th>Role</x-plume::table.th>
        </x-plume::table.tr>
    </x-plume::table.thead>
    <x-plume::table.tbody>
        <x-plume::table.tr>
            <x-plume::table.td class="font-medium">Lindsay
                Walton</x-plume::table.td>
            <x-plume::table.td>Front-end Developer</x-plume::table.td>
            <x-plume::table.td>lindsay.walton@example.com</x-plume::table.td>
            <x-plume::table.td>Member</x-plume::table.td>
        </x-plume::table.tr>
        ...
    </x-plume::table.tbody>
</x-plume::table>

Striped Rows

Alternate row background colors for better readability.

Project	Status
Plume UI	Active
Workbench	Active
Library	Active

blade

<x-plume::table striped hoverable class="w-full">
    <x-plume::table.thead>
        <x-plume::table.tr>
            <x-plume::table.th>Project</x-plume::table.th>
            <x-plume::table.th>Status</x-plume::table.th>
        </x-plume::table.tr>
    </x-plume::table.thead>
    <x-plume::table.tbody>
        @foreach (['Plume UI', 'Workbench', 'Library'] as $proj)
            <x-plume::table.tr>
                <x-plume::table.td>{{ $proj }}</x-plume::table.td>
                <x-plume::table.td>Active</x-plume::table.td>
            </x-plume::table.tr>
        @endforeach
    </x-plume::table.tbody>
</x-plume::table>

Sticky Header & Alignment

Table with fixed header and aligned cells.

Item	Qty	Price
Product 1	2	$29.00
Product 2	10	$26.00
Product 3	9	$95.00
Product 4	7	$27.00
Product 5	8	$98.00
Product 6	10	$59.00
Product 7	9	$59.00
Product 8	2	$69.00
Product 9	9	$34.00
Product 10	5	$12.00

blade

<x-plume::table sticky-header class="w-full h-48">
    <x-plume::table.thead sticky>
        <x-plume::table.tr>
            <x-plume::table.th>Item</x-plume::table.th>
            <x-plume::table.th align="center">Qty</x-plume::table.th>
            <x-plume::table.th align="right">Price</x-plume::table.th>
        </x-plume::table.tr>
    </x-plume::table.thead>
    <x-plume::table.tbody>
        @foreach (range(1, 10) as $i)
            <x-plume::table.tr>
                <x-plume::table.td>Product
                    {{ $i }}</x-plume::table.td>
                <x-plume::table.td align="center">{{ rand(1, 10) }}</x-plume::table.td>
                <x-plume::table.td align="right">${{ rand(10, 100) }}.00</x-plume::table.td>
            </x-plume::table.tr>
        @endforeach
    </x-plume::table.tbody>
</x-plume::table>

Prop	Type	Default	Description
striped	bool	false	Whether to alternate row colors.
hoverable	bool	false	Whether to highlight rows on hover.
stickyHeader	bool	false	Whether to keep the header visible when scrolling.
density	string	'default'	Spacing density: 'compact', 'default', 'loose'.

Usage

blade

<x-plume::table striped hoverable>
    <x-plume::table.thead>
        <x-plume::table.tr>
            <x-plume::table.th>Header</x-plume::table.th>
        </x-plume::table.tr>
    </x-plume::table.thead>
    <x-plume::table.tbody>
        <x-plume::table.tr>
            <x-plume::table.td>John Doe</x-plume::table.td>
        </x-plume::table.tr>
    </x-plume::table.tbody>
</x-plume::table>