Columns

Customizing how data is displayed in your table cells.

Constructed Columns

Constructed columns allow you to combine multiple fields or wrap data in HTML using simple placeholders. Use {key} to reference any property in your row object.

Combining Fields

Combine multiple fields or wrap them in HTML using {key} placeholders.

Loading...
blade 
<x-plume::card class="p-0 overflow-hidden w-full">
    @php
        $users = [
            ['id' => 1, 'name' => 'John Doe', 'email' => 'john@example.com'],
            ['id' => 2, 'name' => 'Jane Smith', 'email' => 'jane@example.com'],
            ['id' => 3, 'name' => 'Bob Johnson', 'email' => 'bob@example.com'],
        ];
        $cols = [
            ['key' => 'id', 'label' => 'ID'],
            [
                'key' => 'user',
                'label' => 'User',
                'constructed' =>
                    '<div class="flex flex-col"><span class="font-medium">{name}</span><span class="text-xs text-foreground/50">{email}</span></div>',
            ],
            [
                'key' => 'action',
                'label' => 'Action',
                'constructed' =>
                    "<a href='/users/{id}' class='text-primary hover:underline text-sm font-medium'>View Profile</a>",
            ],
        ];
    @endphp
    <x-plume::data-table :data="$users" :columns="$cols" hoverable />
</x-plume::card>

Slot-based Columns

For more complex rendering that requires full Blade power (like logic or other components), use slot-based columns. Reference a named slot using {slot:name} in your column definition.

Slot-based Columns

Reference named slots for complex cell content defined in Blade.

Loading...
blade 
<x-plume::card class="p-0 overflow-hidden w-full">
    @php
        $users = [
            ['id' => 1, 'name' => 'John Doe', 'email' => 'john@example.com', 'role' => 'Admin'],
            ['id' => 2, 'name' => 'Jane Smith', 'email' => 'jane@example.com', 'role' => 'Editor'],
        ];
        $cols = [
            ['key' => 'id', 'label' => 'ID'],
            ['key' => 'user', 'label' => 'User', 'constructed' => '{slot:user_cell}'],
            ['key' => 'role', 'label' => 'Role', 'constructed' => '{slot:role_badge}'],
        ];
    @endphp
    <x-plume::data-table :data="$users" :columns="$cols" hoverable>
        <x-slot:user_cell>
            <div class="flex flex-col">
                <span class="font-medium">{name}</span>
                <span class="text-xs text-foreground/50">{email}</span>
            </div>
        </x-slot:user_cell>
        <x-slot:role_badge>
            <x-plume::badge style="default" size="sm">{role}</x-plume::badge>
        </x-slot:role_badge>
    </x-plume::data-table>
</x-plume::card>