laravel-livewire-tables

Laravel Livewire Tables is a dynamic, responsive table component for Laravel Livewire. It provides a powerful and flexible way to create data tables with features like sorting, filtering, and pagination, all without writing JavaScript.

Pros

• Easy integration with Laravel and Livewire projects
• Highly customizable with a wide range of built-in features
• Responsive design out of the box
• Real-time updates without page reloads

Cons

• Learning curve for developers new to Livewire
• Limited to Laravel and Livewire ecosystem
• May require additional configuration for complex use cases
• Performance can be impacted with large datasets

Code Examples

1. Basic table setup:

use Rappasoft\LaravelLivewireTables\DataTableComponent;

class UsersTable extends DataTableComponent
{
    public function columns(): array
    {
        return [
            Column::make('Name'),
            Column::make('Email'),
            Column::make('Created At'),
        ];
    }

    public function query()
    {
        return User::query();
    }
}

2. Adding custom filters:

public function filters(): array
{
    return [
        'status' => Filter::make('Status')
            ->select([
                '' => 'All',
                'active' => 'Active',
                'inactive' => 'Inactive',
            ]),
    ];
}

3. Implementing bulk actions:

public function bulkActions(): array
{
    return [
        'delete' => ['title' => 'Delete', 'icon' => 'trash'],
    ];
}

public function delete()
{
    User::whereIn('id', $this->getSelected())->delete();
    $this->clearSelected();
}

Getting Started

1. Install the package:

composer require rappasoft/laravel-livewire-tables

2. Create a new Livewire component:

php artisan make:livewire UsersTable

3. Extend the DataTableComponent in your new component:

use Rappasoft\LaravelLivewireTables\DataTableComponent;

class UsersTable extends DataTableComponent
{
    public function columns(): array
    {
        return [
            Column::make('Name'),
            Column::make('Email'),
        ];
    }

    public function query()
    {
        return User::query();
    }
}

4. Use the component in your Blade view:

<livewire:users-table />