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
- 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
- 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):
exportdefault{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, @wireStackScripts, and the toast notification container:
<!DOCTYPE html>
<htmllang="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 3 includes Alpine.js automatically. Do not add Alpine.js separately.
@wireStackScriptsputs 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 throughwire:navigatecan 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.
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.
<?phpnamespaceApp\Livewire;
useLivewire\Component;
useNyonCode\WireTable\Concerns\WithTable;
useNyonCode\WireTable\Table;
useNyonCode\WireTable\Columns\TextColumn;
useNyonCode\WireTable\Columns\BadgeColumn;
useNyonCode\WireTable\Columns\BooleanColumn;
useNyonCode\WireCore\Actions\Action;
useNyonCode\WireCore\Actions\DeleteAction;
useNyonCode\WireTable\Filters\SelectFilter;
useApp\Models\User;
class UserTable extends Component
{
use WithTable;
publicfunctiontable(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();
}
publicfunctionrender()
{
returnview('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 |
| Exports | CSV, Excel, and PDF exports |
| 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 |
| Authorization | Gates, policies, permissions, and callbacks |
MIT