Livewire Tables Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require luckykenlin/livewire-tables
   php artisan make:table UsersTable --model=User
   

   This generates a scaffolded table component in app/Http/Livewire/UsersTable.php.

2. First Use Case: Register the component in a Blade view:

   @livewire('users-table')
   

   The table will automatically render with default columns (ID, name, email, etc.) for the specified model.

3. Key Files to Review:

   • app/Http/Livewire/UsersTable.php (auto-generated table logic)
   • resources/views/livewire/users-table.blade.php (auto-generated view)
   • Official Docs (for API reference).

Implementation Patterns

Core Workflow

1. Define Columns: Override the columns() method to customize columns:

   public function columns()
   {
       return [
           Column::make('ID', 'id'),
           Column::make('Name', 'name')->sortable(),
           Column::make('Email', 'email')->searchable(),
           Column::make('Actions', 'actions', Action::class)
               ->format(fn($value, $row) => [
                   'edit' => route('users.edit', $row),
                   'delete' => route('users.destroy', $row),
               ]),
       ];
   }
   

2. Query Scoping: Use query() to modify the base query:

   public function query()
   {
       return User::query()->where('active', true);
   }
   

3. Pagination & Sorting: Enable via column definitions:

   Column::make('Created At', 'created_at')->sortable()->searchable();
   

   Pagination is auto-handled (default: 10 items/page).

4. Actions: Define reusable action buttons:

   public function actions()
   {
       return [
           Action::make('Edit', 'edit')
               ->icon('edit')
               ->url(fn($row) => route('users.edit', $row)),
           Action::make('Delete', 'delete')
               ->icon('trash')
               ->method('deleteUser')
               ->confirm('Are you sure?'),
       ];
   }
   

5. Bulk Actions: Add a bulk action dropdown:

   public function bulkActions()
   {
       return [
           Action::make('Delete Selected', 'bulk-delete')
               ->method('deleteSelected')
               ->confirm('Delete selected users?'),
       ];
   }
   

6. Integration with Livewire Hooks: Use Livewire lifecycle methods for custom logic:

   public function mount()
   {
       $this->authorize('view-users');
   }
   
   public function updatedSearch($value)
   {
       $this->applySearch($value);
   }
   

Gotchas and Tips

Pitfalls

1. Model Binding:

   • If the model changes after table creation, manually update the query() method or regenerate the table:

     php artisan make:table UsersTable --model=User --force
     

2. Column Naming Conflicts:

   • Avoid column names matching Laravel’s reserved keywords (e.g., created_at vs createdAt). Use Column::make('Label', 'column_name').

3. TailwindCSS Dependency:

   • The package relies on Tailwind for styling. If using a different CSS framework, override the Blade view (resources/views/livewire/users-table.blade.php).

4. Eager Loading:

   • For relationships, manually eager load in query():

     public function query()
     {
         return User::with('role')->get();
     }
     

   • Then access in columns:

     Column::make('Role', 'role.name')
     

5. Performance:

   • Disable sorting/search on large columns:

     Column::make('Large Text', 'description')->sortable(false)->searchable(false)
     

Debugging Tips

1. Query Logging: Enable Laravel’s query logging to inspect the generated SQL:

   public function query()
   {
       \DB::enableQueryLog();
       $query = User::query();
       $this->tableData = $query->get();
       \Log::info(\DB::getQueryLog());
       return $query;
   }
   

2. Livewire State: Dump the table state for debugging:

   public function render()
   {
       \Log::debug($this->tableData);
       return view('livewire.users-table');
   }
   

3. Column Formatting: Use format() for custom rendering:

   Column::make('Status', 'status')
       ->format(fn($value) => $value === 'active' ? 'Active' : 'Inactive')
   

Extension Points

1. Custom Views: Override the default Blade view by publishing assets:

   php artisan vendor:publish --tag=livewire-tables-views
   

   Then modify resources/views/vendor/livewire-tables/table.blade.php.

2. Dynamic Columns: Load columns dynamically based on user roles:

   public function columns()
   {
       $columns = [Column::make('ID', 'id')];
       if (auth()->user()->can('manage_users')) {
           $columns[] = Column::make('Actions', 'actions', Action::class);
       }
       return $columns;
   }
   

3. API Integration: Extend the table to fetch data from an external API:

   public function getTableData()
   {
       $response = Http::get('https://api.example.com/users');
       return collect($response->json());
   }
   

4. Localization: Localize column labels and action text:

   Column::make(__('users-table.name'), 'name')