Livewire Tables Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require coryrose/livewire-tables
   

   Add the service provider to config/app.php:

   'providers' => [
       // ...
       CoryRose\LivewireTables\LivewireTablesServiceProvider::class,
   ],
   

2. Basic Usage Create a Livewire component:

   php artisan make:livewire UserTable
   

   Define a table in your component:

   use CoryRose\LivewireTables\LivewireTable;
   
   public function table()
   {
       return LivewireTable::make()
           ->addColumn('id')
           ->addColumn('name')
           ->addColumn('email')
           ->paginate(10);
   }
   

3. First Use Case Display a paginated table of users in a Blade view:

   <livewire:user-table />
   

   The package auto-generates search, pagination, and sorting controls.

Implementation Patterns

Core Workflow

1. Table Definition Define columns and behavior in the table() method:

   public function table()
   {
       return LivewireTable::make()
           ->addColumn('name', 'Name')
           ->addColumn('email', 'Email')
           ->addColumn('created_at', 'Joined')
           ->sortable(['name', 'email'])
           ->searchable(['name', 'email'])
           ->paginate(15);
   }
   

2. Customizing Columns Use closures for dynamic column rendering:

   ->addColumn('status', function ($row) {
       return $row->status === 'active' ? 'Active' : 'Inactive';
   })
   

3. Integration with Eloquent Fetch data via a query builder or Eloquent model:

   ->setQuery($this->userModel->newQuery())
   

4. Reusable Components Extend the base table for shared functionality:

   class BaseTable extends LivewireComponent
   {
       public function table()
       {
           return LivewireTable::make()
               ->paginate(20)
               ->searchable(['name', 'email']);
       }
   }
   

5. Event Handling Listen to table events (e.g., sort, search) via wire:model or custom methods:

   protected $listeners = ['refreshTable' => 'refreshData'];
   

Gotchas and Tips

Common Pitfalls

1. Data Binding

   • Ensure the table() method returns a LivewireTable instance; missing this causes silent failures.
   • Fix: Verify the return type in your IDE or add a dd() check.

2. Pagination Conflicts

   • If using custom pagination logic (e.g., cursor()), override the getPagination() method:

     public function getPagination()
     {
         return $this->table->setPagination('cursor');
     }
     

3. Search/Sort Performance

   • Avoid searching/sorting on non-indexed columns in large datasets.
   • Tip: Use ->searchable(['indexed_column']) and add database indexes.

4. Blade Template Overrides

   • Default Blade templates may not render as expected if the table structure changes.
   • Tip: Extend the default view by publishing assets:

     php artisan vendor:publish --provider="CoryRose\LivewireTables\LivewireTablesServiceProvider"
     

Debugging Tips

• Log Queries: Enable query logging in config/database.php to inspect generated SQL:

  'log' => env('DB_LOG', false),
  

• Check Wire Events: Use dd($this->table->getQuery()) to debug the current query state.

Extension Points

1. Custom Views Override the default Blade templates by publishing and modifying:

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

2. Column Actions Add action buttons dynamically:

   ->addAction('edit', 'Edit', function ($row) {
       return '<a href="/users/' . $row->id . '/edit">Edit</a>';
   })
   

3. API Integration For SPAs, expose the table data via a custom API endpoint:

   public function getTableData()
   {
       return response()->json($this->table->getResults());
   }
   

4. Localization Customize labels (e.g., "Search", "Sort") via the setLabels() method:

   ->setLabels(['search' => 'Filter'])
   

Configuration Quirks

• Default Pagination: Set globally in config/livewire-tables.php:

  'default_per_page' => 25,
  

• Disable Features: Turn off search/sort globally:

  'enable_search' => false,
  'enable_sort' => false,