nyoncode/wire-table

WireTable

Enterprise-grade Livewire table component for Laravel. Inline editing, actions, bulk actions, filters, polling, modals, notifications, and more.

Features

• Columns - 13 column types including text, badge, boolean, toggle, image, select, text input, button, icon, stacked, split, poll
• Inline Editing - TextInputColumn, SelectColumn, ToggleColumn with validation, permissions, optimistic locking
• Actions - Row actions, bulk actions, header actions, action groups with keyboard shortcuts
• Modals - Confirmation dialogs, form modals, multi-step wizards, slide-overs
• Filters - Select, date, date range, number range, ternary (yes/no/all)
• Search - Global search across multiple columns, relationship search, custom search callbacks
• Sorting - Column sorting with custom sort callbacks, default sort
• Pagination - Configurable per-page options, lazy loading
• Exports - CSV, Excel, and PDF export for the current table query
• Polling - Table-level and row-level polling with configurable intervals
• Notifications - Pluggable notification drivers (session, Livewire events, Flasher)
• Responsive - Stacked mobile layout, responsive column visibility
• Sub-rows - Expandable row content with filtering
• Inactive records - rowInactive(): a cancelled/archived row stays listed, dims (struck through and tinted on request) and stops being writable, enforced server-side
• Styling - Striped, bordered, compact, hoverable, custom CSS classes

Requirements

• PHP 8.2+
• Laravel 12.61+ or 13.12+
• Livewire 4.x
• Tailwind CSS 3.x
• Node.js & npm (for Vite asset compilation)

Installation

composer require nyoncode/wire-table

This automatically installs wire-core and wire-forms as dependencies. Service providers are auto-discovered.

Tailwind CSS Setup

Add the Wire packages' Blade views to your Tailwind content paths:

Tailwind 3 (tailwind.config.js):

export default {
    content: [
        './resources/**/*.blade.php',
        './app/**/*.php',
        './vendor/nyoncode/wire-core/resources/views/**/*.blade.php',
        './vendor/nyoncode/wire-forms/resources/views/**/*.blade.php',
        './vendor/nyoncode/wire-table/resources/views/**/*.blade.php',
    ],
    darkMode: 'class',
    plugins: [require('@tailwindcss/forms')],
}

Tailwind 4 (resources/css/app.css):

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@source "../../vendor/nyoncode/wire-core/resources/views";
@source "../../vendor/nyoncode/wire-forms/resources/views";
@source "../../vendor/nyoncode/wire-table/resources/views";

Then rebuild:

npm install -D @tailwindcss/forms
npm run build

Layout Template

Your layout needs Vite assets, Livewire, @wireStackScripts, and the toast notification container:

<!DOCTYPE html>
<html lang="en">
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @wireStackScripts
</head>
<body>
    {{ $slot }}
    <x-wire-notifications::toast-container />
    @livewireScripts
</body>
</html>

Note: Livewire 4 includes Alpine.js automatically. Do not add Alpine.js separately.

@wireStackScripts puts every installed Wire package's Alpine controllers in the document. It is additive — the table still emits its own bundles when it renders — but without it a table first reached through wire:navigate can come up dead (wireRecordSelection is not defined), because Livewire's cached Back/Forward path does not wait for newly injected <head> scripts. See JavaScript Assets.

Publish Config (optional)

php artisan vendor:publish --tag=wire-table-config
php artisan vendor:publish --tag=wire-core-config
php artisan vendor:publish --tag=wire-forms-config

Publish Views (optional)

php artisan vendor:publish --tag=wire-table-views
php artisan vendor:publish --tag=wire-forms-views
php artisan vendor:publish --tag=wire-core-views

For the full installation guide including Vite setup and troubleshooting, see Installation.

Quick Start

1. Create a Livewire Component

<?php

namespace App\Livewire;

use Livewire\Component;
use NyonCode\WireTable\Concerns\WithTable;
use NyonCode\WireTable\Table;
use NyonCode\WireTable\Columns\TextColumn;
use NyonCode\WireTable\Columns\BadgeColumn;
use NyonCode\WireTable\Columns\BooleanColumn;
use NyonCode\WireCore\Actions\Action;
use NyonCode\WireCore\Actions\DeleteAction;
use NyonCode\WireTable\Filters\SelectFilter;
use App\Models\User;

class UserTable extends Component
{
    use WithTable;

    public function table(Table $table): Table
    {
        return $table
            ->model(User::class)
            ->columns([
                TextColumn::make('name')
                    ->sortable()
                    ->searchable(),

                TextColumn::make('email')
                    ->sortable()
                    ->searchable(),

                BadgeColumn::make('role')
                    ->colors([
                        'admin' => 'danger',
                        'editor' => 'warning',
                        'user' => 'success',
                    ]),

                BooleanColumn::make('is_active')
                    ->sortable(),
            ])
            ->filters([
                SelectFilter::make('role')
                    ->options([
                        'admin' => 'Admin',
                        'editor' => 'Editor',
                        'user' => 'User',
                    ]),
            ])
            ->actions([
                Action::make('edit')
                    ->icon('pencil')
                    ->url(fn ($record) => route('users.edit', $record)),

                DeleteAction::make(),
            ])
            ->defaultSort('name')
            ->searchable()
            ->paginated();
    }

    public function render()
    {
        return view('livewire.user-table');
    }
}

2. Create the Blade View

<div>
    {{ $this->table }}
</div>

Documentation

License

MIT