Features

Demo App Repo

Requirements

Installation

composer require mediconesystems/livewire-datatables

composer require psr/simple-cache:^1.0 maatwebsite/excel

Optional

php artisan vendor:publish --provider="Mediconesystems\LivewireDatatables\LivewireDatatablesServiceProvider"

[x-cloak] {display: none;}

Basic Usage

...<livewire:datatablemodel="App\User"name="all-users"/>...

Template Syntax

<livewire:datatablemodel="App\User"name="users"include="id, name, dob, created_at"dates="dob"/>

Props

Component Syntax

Create a livewire component that extendsMediconesystems\LivewireDatatables\LivewireDatatable

Provide a datasource by declaring public property$modelOR public methodbuilder() that returns an instance ofIlluminate\Database\Eloquent\Builder

Declare a public methodcolumns that returns an array containing one or moreMediconesystems\LivewireDatatables\Column

Columns

class ComplexDemoTableextends LivewireDatatable{publicfunctionbuilder()    {return User::query();    }publicfunctioncolumns()    {return [            NumberColumn::name('id')                ->label('ID')                ->linkTo('job',6),            BooleanColumn::name('email_verified_at')                ->label('Email Verified')                ->format()                ->filterable(),            Column::name('name')                ->defaultSort('asc')                ->group('group1')                ->searchable()                ->hideable()                ->filterable(),            Column::name('planet.name')                ->label('Planet')                ->group('group1')                ->searchable()                ->hideable()                ->filterable($this->planets),// Column that counts every line from 1 upwards, independent of content            Column::index($this);            DateColumn::name('dob')                ->label('DOB')                ->group('group2')                ->filterable()                ->hide(),            (newLabelColumn())                ->label('My custom heading')                ->content('This fixed string appears in every row'),            NumberColumn::name('dollars_spent')                ->enableSummary(),        ];    }}

Column Methods

Listener

Eloquent Column Names

NumberColumn::name('students.age:sum')->label('Student Sum'),NumberColumn::name('students.age:avg')->label('Student Avg'),NumberColumn::name('students.age:min')->label('Student Min'),NumberColumn::name('students.age:max')->label('Student Max'),

Column Groups

class GroupDemoTableextends LivewireDatatable{public$groupLabels = ['group1' =>'app.translation_for_group_1','group2' =>'app.translation_for_group_2'    ];publicfunction columns()    {return [            Column::name('planets.name')                ->group('group1')                ->label('Planet'),            Column::name('planets.name')                ->group('group2')                ->label('Planet'),

Summary row

publicfunction columns(){return [        Column::name('dollars_spent')            ->label('Expenses in Dollar')            ->enableSummary(),        Column::name('euro_spent')            ->label('Expenses in Euro')            ->enableSummary(),

Mass (Bulk) Action

publicfunctionbuildActions()    {return [            Action::value('edit')->label('Edit Selected')->group('Default Options')->callback(function ($mode,$items) {// $items contains an array with the primary keys of the selected items            }),            Action::value('update')->label('Update Selected')->group('Default Options')->callback(function ($mode,$items) {// $items contains an array with the primary keys of the selected items            }),            Action::groupBy('Export Options',function () {return [                    Action::value('csv')->label('Export CSV')->export('SalesOrders.csv'),                    Action::value('html')->label('Export HTML')->export('SalesOrders.html'),                    Action::value('xlsx')->label('Export XLSX')->export('SalesOrders.xlsx')->styles($this->exportStyles)->widths($this->exportWidths)                ];            }),        ];    }

Mass Action Style

publicfunctiongetExportStylesProperty()    {return ['1'  => ['font' => ['bold' =>true]],'B2' => ['font' => ['italic' =>true]],'C'  => ['font' => ['size' =>16]],        ];    }publicfunctiongetExportWidthsProperty()    {return ['A' =>55,'B' =>45,        ];    }

Pin Records

useMediconesystems\LivewireDatatables\Traits\CanPinRecords;class RecordTableextends LivewireDatatable{use CanPinRecords;public$model = Record::class;publicfunction columns()    {return [            Column::checkbox(),// ...

Custom column names

publicfunctionbuilder(){return User::query()        ->leftJoin('planets','planets.id','users.planet_id')        ->leftJoin('moons','moons.id','planets.moon_id')        ->groupBy('users.id');}publicfunctioncolumns(){return [        NumberColumn::name('id')            ->filterable(),        Column::name('planets.name')            ->label('Planet'),        Column::raw('GROUP_CONCAT(planets.name SEPARATOR " | ") AS `Moon`'),...}

Callbacks

class CallbackDemoTableextends LivewireDatatable{public$model = User::class    publicfunctioncolumns()    {        return [            Column::name('users.id'),            Column::name('users.dob')->format(),            Column::callback(['dob', 'signup_date'], function ($dob,$signupDate) {$age =$signupDate->diffInYears($dob);return$age >18                    ?'<span>' .$age .'</span>'                    :$age;            })->exportCallback(function ($dob,$signupDate), {return$age =$signupDate->diffInYears($dob);            }),            ...    }}

Default Filters

class CallbackDemoTableextends LivewireDatatable{public$defaultFilters = ['deleted_at' =>'0',    ];publicfunctionbuilder()    {return User::query()->withTrashed();    }publicfunctioncolumns()    {return [            Column::name('id'),            BooleanColumn::name('deleted_at')->filterable(),        ];    }}

Views

class CallbackDemoTableextends LivewireDatatable{public$model = User::class    publicfunctioncolumns()    {        return [            Column::name('users.id'),            Column::name('users.dob')->view('tables.dateview'),            Column::name('users.signup_date')->format(),        ];    }

'tables/dateview.blade.php'<spanclass="mx-4 my-2 bg-pink-500"><x-date-thing:value="$value"/></span>

Editable Columns

class EditableTableextends LivewireDatatable{public$model = User::class;publicfunction columns()    {return [            Column::name('id')                ->label('ID')                ->linkTo('job',6),            Column::name('email')                ->editable(),...        ];    }}

Complex Query Builder

publicfunctiongetPersistKeyProperty(){return Auth::id() .'-' .parent::getPersistKeyProperty();}

Example:

/* Migration */class CreateComplexQueriesTableextends Migration{publicfunctionup()    {        Schema::create('complex_queries',function (Blueprint$table) {$table->id();$table->unsignedInteger('user_id');$table->string('table');$table->json('rules');$table->string('name');$table->timestamps();        });    }}/* Model */class ComplexQueryextends BaseModel{protected$casts = ['rules' =>'array'];publicfunctionuser()    {return$this->belongsTo(User::class);    }}/* Datatable Class */class TableWithSavingextends LivewireDatatable{    ...publicfunctionsaveQuery($name,$rules)    {        Auth::user()->complex_queries()->create(['table' =>$this->name,'name' =>$name,'rules' =>$rules        ]);$this->emit('updateSavedQueries',$this->getSavedQueries());    }publicfunctiondeleteQuery($id)    {        ComplexQuery::destroy($id);$this->emit('updateSavedQueries',$this->getSavedQueries());    }publicfunctiongetSavedQueries()    {return Auth::user()->complex_queries()->where('table',$this->name)->get();    }...}

Styling

publicfunctionrowClasses($row,$loop){return'divide-x divide-gray-100 text-sm text-gray-900' . ($this->rowIsSelected($row) ?'bg-yellow-100' : ($row->{'car.model'} ==='Ferrari' ?'bg-red-500' : ($loop->even ?'bg-gray-100' :'bg-gray-50')));}publicfunctioncellClasses($row,$column){return'text-sm' . ($this->rowIsSelected($row) ?' text-gray-900' : ($row->{'car.model'} ==='Ferrari' ?' text-white' :' text-gray-900'));}

Credits and Influences