Tables Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require beartropy/tables
   

   Publish assets (if needed):

   php artisan vendor:publish --provider="Beartropy\Tables\BeartropyTableServiceProvider"
   

2. Generate a new table:

   php artisan make:btable UserTable
   

   This creates a Livewire component (app/Http/Livewire/UserTable.php) extending BeartropyTable.

3. Define columns in your table class:

   public function columns()
   {
       return [
           Column::make('name', 'Name')
               ->sortable()
               ->searchable(),
           Column::make('email', 'Email')
               ->sortable(),
       ];
   }
   

4. Use the table in Blade:

   @livewire('user-table')
   

First Use Case: Basic Eloquent Table

// app/Http/Livewire/UserTable.php
public function data()
{
    return User::query();
}

public function columns()
{
    return [
        Column::make('id', 'ID'),
        Column::make('name', 'Name')->sortable(),
        Column::make('email', 'Email')->searchable(),
    ];
}

Implementation Patterns

Core Workflow: CRUD Table

1. Data Source:

   public function data()
   {
       return $this->model->query()
           ->when($this->search, fn($q) => $q->where('name', 'like', "%{$this->search}%"));
   }
   

2. Column Configuration:

   public function columns()
   {
       return [
           Column::make('id', 'ID')->sortable(),
           Column::make('name', 'Name')
               ->sortable()
               ->searchable()
               ->centered(),
           Column::make('created_at', 'Created At')
               ->date()
               ->sortable(),
       ];
   }
   

3. Bulk Actions:

   public function bulkActions()
   {
       return [
           BulkAction::make('delete')
               ->label('Delete Selected')
               ->icon('trash')
               ->action(fn($rows) => $this->deleteSelected($rows)),
       ];
   }
   
   protected function deleteSelected($rows)
   {
       foreach ($rows as $row) {
           $this->model->find($row['id'])->delete();
       }
       $this->resetTable();
   }
   

Integration Patterns

1. With Inertia/Laravel Boost:

   public function mount()
   {
       $this->setComponentSize('md'); // Adjusts header button sizes
   }
   

2. Custom Query Scoping:

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

3. Dynamic Column Toggling:

   public function toggleableColumns()
   {
       return ['email', 'phone']; // Columns users can hide/show
   }
   

4. Export Integration:

   public function export()
   {
       return GenericExport::make()
           ->columns($this->columns())
           ->from($this->data());
   }
   

State Management

// Persist table state (search, sort, filters) between requests
protected $persistTableState = true;

// Cache data for 5 minutes
protected $cacheFor = 5;

Gotchas and Tips

Common Pitfalls

1. Column Key Mismatch:

   • Ensure Column::make('key', 'Label') uses the exact same key as your data source.
   • Fix: Use ->key('custom_key') if your data uses non-standard keys.

2. Livewire Serialization:

   • Complex objects in columns may not serialize properly.
   • Fix: Use ->serializable() or simplify data structure.

3. Pagination Conflicts:

   • Custom data() methods must return paginated results.
   • Fix: Always chain ->paginate() or use ->withQueryString().

4. Bulk Action IDs:

   • Ensure selected rows include unique identifiers.
   • Fix: Add ->selectable() to columns and verify $this->selected contains IDs.

Debugging Tips

1. Check Table State:

   dd($this->getTableState());
   

2. Inspect Data:

   dd($this->data()->get());
   

3. Column Modifiers:

   • Use ->debug() to see all applied modifiers:

   Column::make('name')->debug();
   

Performance Optimization

1. Eager Loading:

   public function query()
   {
       return parent::query()->with(['relationship']);
   }
   

2. Disable Persistence:

   protected $persistTableState = false;
   

3. Cache Invalidation:

   $this->resetTable(); // Clears cache and state
   

Extension Points

1. Custom Column Types:

   Column::make('status')
       ->badge()
       ->options([
           'active' => 'Active',
           'inactive' => 'Inactive',
       ]);
   

2. Override Views:

   • Publish views:

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

   • Modify resources/views/vendor/beartropy-tables/...

3. Custom Theming:

   public function mount()
   {
       $this->setTheme('dark');
       $this->setButtonThemeOverride('primary');
   }
   

4. Secondary Headers:

   Column::make('price')
       ->secondaryHeader(fn($rows) => 'Total: ' . $rows->sum('price'))
       ->currency();
   

Advanced Patterns

1. Conditional Columns:

   public function columns()
   {
       $columns = [
           Column::make('name'),
       ];
   
       if (auth()->can('view_emails')) {
           $columns[] = Column::make('email');
       }
   
       return $columns;
   }
   

2. Dynamic Data Sources:

   public function data()
   {
       return $this->request->has('filter')
           ? $this->filteredData()
           : $this->defaultData();
   }
   

3. Row Expansion:

   public function columns()
   {
       return [
           Column::make('name')
               ->expandable()
               ->expandedView('livewire.user-detail', ['user' => fn($row) => $row]),
       ];
   }
   

4. Virtual Columns:

   Column::make('full_name')
       ->virtual()
       ->label('Full Name')
       ->get(function($row) {
           return "{$row['first_name']} {$row['last_name']}";
       });