Laravel Livewire Tables Laravel Package

Getting Started

Start by installing the package via Composer and ensuring Alpine.js 3+ is available in your app. Run composer require rappasoft/laravel-livewire-tables, then use the Artisan command php artisan make:datatable UsersTable User to scaffold a basic table component. The generated component extends DataTableComponent, and you’ll immediately configure the $model, primary key, and define columns using the fluent columns() method. Minimal initial setup is required—just enough to render a sortable table. Next, render the component in your Blade view with @livewire('users-table'). The package works out of the box with Tailwind, Bootstrap 4/5, and custom designs via configuration.

Implementation Patterns

Leverage this package by extending DataTableComponent and overriding core methods: configure() for global settings (pagination, sorting, filters), query() to customize the Eloquent builder, and columns() to define data presentation. Use Column::make() with modifiers like sortable(), searchable(), formatUsing() for callbacks, and sortable(false) to disable sorting per column. Implement mass actions with actions() and bulk selection via selectableRows(). For filtering, define filters() using built-in types like TextFilter, DateRangeFilter, or custom Filter classes. Integrate custom layouts by publishing config (php artisan vendor:publish --tag=livewire-tables-config) and overriding view paths (setViewsPath()). For dynamic behavior, use mount() to seed filters or state, and updated*() hooks to respond to filter/sort changes.

Gotchas and Tips

Be aware of common pitfalls: pagination breaks when using simplePaginate without enabling setShouldRetrieveTotalItemCountStatus(true) (or risk missing total counts), and avoid modifying columns after columns() is called—rebuild on state changes via doNotRebuild(false). Remember Alpine.js must be loaded before the component, and if using custom bundling, disable inject_*_assets_enabled and register blade directives manually. When debugging, inspect livewire-tables.js in browser DevTools or enable APP_DEBUG=true to see raw query logs. Custom styling is easiest by overriding config keys like config('livewire-tables.theme') or injecting Tailwind utility classes into setColumnAttributes(). Tip: use Column::make('Name')->priority(1) to make columns collapsible on mobile, and Column::make()->label() for actionable links (e.g., “Edit” buttons) without polluting the query. Finally, always test filtering/sorting with large datasets—cursorPaginate performs better than paginate for 10k+ rows.