README

Livewire datatables is simple set of components for making nice and good UX datagrids and datatables easily and fast.

WARNING: This is still experimental package, do not use in production (or at your own risk). Please wait for version 1.0

Preconditions

Livewire 3+
Laravel 10+
PHP 8.2+
Bootstrap 5

Installation

Install from packagist

composer install trinetus/livewire-datatables

Add service provider

open config file: config/app.php,
search for providers array key,
move to the end of Package providers group and add new line:

Trinetus\LivewireDatatables\LivewireDatatablesServiceProvider::class,

Configuration and customizations

Livewire configuration

for more descriptive informations see official Livewire doc: https://livewire.laravel.com/docs/installation

Publish livewire (if not already done) and datatables configs:

     php artisan livewire:publish --config
     php artisan livewire-datatables:publish --config

Setup livewire base layout and modify in config/livewire.php:
```
     'layout' => 'path.to.livewire.layout.blade'
```
Don't forget to define livewire's @livewireStyles and @livewireScriptConfig in your layout blade.
Configure desired icon set in config/livewire-datatables.php config:
```
     'icon-set' => 'bootstrap-icons'
```

Include admin template scss file and link built css to template

Include scss file into your scss parent file (please double check proper relative path)

@import "../../vendor/trinetus/livewire-datatables/resources/scss/datatables.scss";

Create first datagrid page

WIP: description, examples

create component file (ext from vendor AbstractDatagridComponent) and customize it to your needs:
```
<?php
```

namespace App\Livewire;

use Trinetus\LivewireDatatables\Components\Column; use Trinetus\LivewireDatatables\Components\ColumnFormatters\DateFormatter; use Trinetus\LivewireDatatables\Components\ColumnFormatters\StringFormatter; use Trinetus\LivewireDatatables\Livewire\AbstractListingComponent; use App\Resources\ExampleResource;

class ExampleDatagrid extends AbstractListingComponent {

public string $sortColumn = 'name'; // default

protected function datagridName(): string
{
    return "example-listing";
}

protected function pageTitle(): string
{
    return "All items";
}

protected function viewPath(): string
{
    return "livewire.example";
}

protected function eloquentModel() : string
{
    return MyModel::class;
}

protected function resourceTransformer() : string
{
    return ExampleResource::class;
}

public function columnsConfig(): array
{
    return [
        new Column('id', 'ID', StringFormatter::class, false, true, false),
        new Column('name', 'Name', StringFormatter::class, true, true),
        new Column('created_at', 'Created at', DateFormatter::class, true, true),
    ];
}

public function actionButtons(): array
{
    return [
        //new ActionButton(VariantType::OUTLINE_INFO->value, 'Edit', 'bi-pencil', '', 'route.path.to.edit.view', ['id']),
        //new ActionButton(VariantType::OUTLINE_DANGER->value, 'Delete', 'bi-trash', '#'),
    ];
}

public function batchActions() : array
{
    return [
    ];
}

public function filters(): array
{
    return [
    ];
}

}


2. create view (call vendor component)

Example datagrid


3. Assign component to route (as full page component):

Route::get('example', \App\Livewire\ExampleDatagrid::class)->name('page-example');


## Advanced configuration

**WIP**

## License
MIT License - see LICENSE file.

trinetus / livewire-datatables

Maintainers

Details