Table

Table component with auto-truncating column headers: when a header overflows, hovering reveals the full text in a floating tooltip. Pass column definitions via :columns as plain strings or as arrays when you need icons, custom classes, or per-column truncation control. Bulk row selection binds to a Livewire property via bulk, adding a select-all checkbox, per-row checkboxes via x-wirestrap::table.check, and an animated actions bar that slides in when at least one row is selected.

Columns

Pass an array of strings to :columns for simple column headers:

<x-wirestrap::table :columns="['Name', 'Email', 'Role']">
    @foreach ($users as $user)
        <tr wire:key="user-{{ $user->id }}">
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
            <td>{{ $user->role }}</td>
        </tr>
    @endforeach
</x-wirestrap::table>

Each column can also be an array. Use icon to add an icon to the header, class to add classes to the label, or any other key to spread it as an HTML attribute:

<x-wirestrap::table
    :columns="[
        ['label' => 'Name', 'icon' => 'bi-person'],
        'Email',
        ['label' => 'Role', 'class' => 'text-end'],
    ]"
>
    ...
</x-wirestrap::table>

Truncation and tooltip

Truncation is on by default. When a header overflows, a tooltip shows the full label on hover. Use 'truncate' => false to opt out on a column. The tooltip key lets you set a custom tooltip text, it will always be visible regardless of overflow:

$columns = [
    ['label' => 'Note', 'tooltip' => 'Internal note, not visible to the user'], // custom tooltip, always visible
    'Full Name', // truncates; tooltip shows the label on overflow
    ['label' => 'Role', 'truncate' => false], // no truncation, no tooltip
];

Head, foot and caption

When :columns isn't enough, use the head slot to write <thead> manually. foot and caption work the same way:

<x-wirestrap::table>
    <x-slot:head> ... </x-slot:head>

    <x-slot:foot> ... </x-slot:foot>

    @foreach ($users as $user)
        <tr wire:key="user-{{ $user->id }}">
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
        </tr>
    @endforeach
</x-wirestrap::table>

Animate

Set animate to animate row reorders and additions with FLIP, and apply a fade and height collapse when a row is removed. Each row must have a wire:key so Livewire can track it across morph updates.

Due to CSS restrictions on table element animations, Wirestrap wraps each cell's content in a temporary element when a row is removed. With many columns this may noticeably impact client performance, which is why animate is off by default.

<x-wirestrap::table ... animate>
    @foreach ($users as $user)
        <tr wire:key="user-{{ $user->id }}">
            ...
        </tr>
    @endforeach
</x-wirestrap::table>

Bulk selection

Set bulk to the name of a Livewire property. A select-all checkbox with indeterminate state is added to the header automatically. Place x-wirestrap::table.check in each row for the per-row checkbox. Pass an array to :bulk-actions for a built-in actions bar, or use the bulk-actions slot for custom content. Keys other than label, icon, and icon-placement are spread as attributes on the <button>.

<x-wirestrap::table bulk="selectedIds" :columns="['Name', 'Email']">
    @foreach ($users as $user)
        <tr wire:key="user-{{ $user->id }}">
            <x-wirestrap::table.check :value="$user->id" />
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
        </tr>
    @endforeach
</x-wirestrap::table>

<x-wirestrap::table
    bulk="selectedIds"
    :bulk-actions="[
        ['label' => 'Delete', 'class' => 'btn-danger', 'wire:click' => 'deleteSelected'],
        ['label' => 'Export', 'class' => 'btn-secondary', 'wire:click' => 'export'],
    ]"
    :columns="['Name', 'Email']"
>
    ...
</x-wirestrap::table>

<x-wirestrap::table bulk="selectedIds" :columns="['Name', 'Email']">
    <x-slot:bulk-actions>
        <div class="d-flex gap-2 mb-3">
            <span x-text="$wire.selectedIds.length + ' selected'"></span>
            <button class="btn-danger" wire:click="deleteSelected">Delete</button>
        </div>
    </x-slot:bulk-actions>

    @foreach ($users as $user)
        <tr wire:key="user-{{ $user->id }}">
            <x-wirestrap::table.check :value="$user->id" />
            <td>{{ $user->name }}</td>
            <td>{{ $user->email }}</td>
        </tr>
    @endforeach
</x-wirestrap::table>

Props

x-wirestrap::table

Column definition

Bulk actions definition

x-wirestrap::table.check