Enterprise-grade Livewire table component for Laravel. Inline editing, actions, bulk actions, filters, polling, modals, notifications, and more.
- 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
- 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
- Styling - Striped, bordered, compact, hoverable, custom CSS classes
- PHP 8.2+
- Laravel 10, 11, or 12
- Livewire 3.x
- Tailwind CSS 3.x
- Node.js & npm (for Vite asset compilation)
composer require nyoncode/wire-tableThis automatically installs wire-core and wire-forms as dependencies. Service providers are auto-discovered.
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 buildYour layout needs Vite assets, Livewire, and the toast notification container:
<!DOCTYPE html>
<html lang="en">
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body>
{{ $slot }}
<x-wire-notifications::toast-container />
@livewireScripts
</body>
</html>Note: Livewire 3 includes Alpine.js automatically. Do not add Alpine.js separately.
php artisan vendor:publish --tag=wire-table-config
php artisan vendor:publish --tag=wire-core-config
php artisan vendor:publish --tag=wire-forms-configphp artisan vendor:publish --tag=wire-table-views
php artisan vendor:publish --tag=wire-forms-views
php artisan vendor:publish --tag=wire-core-viewsFor the full installation guide including Vite setup and troubleshooting, see Installation.
<?php
namespace App\Livewire;
use Livewire\Component;
use NyonCode\WireTable\Contracts\HasTable;
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 implements HasTable
{
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');
}
}<div>
{{ $this->table }}
</div>| Section | Description |
|---|---|
| Installation | Requirements, setup, configuration |
| Tables | Table configuration, queries, styling |
| Columns | All 13 column types and their options |
| Actions | Row, bulk, header actions and action groups |
| Filters | Select, date, number range, ternary filters |
| Forms | Modal form fields for action dialogs |
| Sub-Rows | Expandable child records, flatten mode, filtering |
| Notifications | Notification drivers and customization |
| Advanced | Polling, lazy loading, debugging, keyboard shortcuts |
MIT