DEV Community

Nasrul Hazim Bin Mohamad
Nasrul Hazim Bin Mohamad

Posted on

Livewire Datatable Action

If you are using Rappasoft Laravel Livewire Table version 2, then you might have the situation to add a standard Actions column. Version 2 is a bit different that Version 1.

First of all, you need to extend the Column class, name it as ActionColumn:

<?php

namespace App\View;

use Illuminate\Database\Eloquent\Model;
use Rappasoft\LaravelLivewireTables\Views\Column;

class ActionColumn extends Column
{
    public function setView($view)
    {
        $this->view = $view;

        return $this;
    }

    public function getView(): string
    {
        return property_exists($this, 'view') ? $this->view : 'livewire.datatable-actions';
    }

    public function getContents(Model $row)
    {
        return view($this->getView())
            ->withColumn($this)
            ->withRow($row);
    }
}
Enter fullscreen mode Exit fullscreen mode

Then add the resources/views/livewire/datatable-actions.blade.php:

<div class="flex justify-items-center">
    @can('view', $row)
        <a class="cursor-pointer mr-4" href="{{ $row->getResourceUrl('show') }}">
            <x-icon name="o-eye" class="text-indigo hover:font-bold mr-3 flex-shrink-0 h-6 w-6">
            </x-icon>
        </a>
    @endcan

    @can('update', $row)
        <a class="cursor-pointer mr-4" 
            @if($form) 
                wire:click="$emitTo('{{ $form }}', 'showRecord', '{{ $row->uuid }}')" 
            @else 
                href="{{ $row->getResourceUrl('edit') }}"
            @endif>
            <x-icon name="o-pencil" class="text-indigo hover:font-bold mr-3 flex-shrink-0 h-6 w-6">
            </x-icon>
        </a>
    @endcan

    @can('delete', $row)
        <div class="cursor-pointer"
            wire:click="$emitTo('confirm', 'displayConfirmation', 'Delete Record', 'Are you sure?', '{{ $form }}', 'destroyRecord', '{{ $row->uuid }}')">
            <x-icon name="o-trash" class="text-indigo hover:text-red-500 mr-3 flex-shrink-0 h-6 w-6">
            </x-icon>
        </div>
    @endcan
</div>
Enter fullscreen mode Exit fullscreen mode

Few things happened in the above blade file:

  1. I use @can('method', $object) to determined either to show / hide the icon. You need to setup proper policy for given model.
  2. I use $emitTo('confirm'), which referred to my post here.
  3. I use $row->getResourceUrl() method as my post in here.

Then the usage in your datatable quite straightforward:

<?php

namespace App\Livewire;

use App\Models\User;
use App\View\ActionColumn;
use Illuminate\Database\Eloquent\Builder;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UserDatatable extends DataTableComponent
{
    protected $model = User::class;

    /**
     * Set any configuration options
     */
    public function configure(): void
    {
        $this->setPrimaryKey('uuid');
    }

    /**
     * The array defining the columns of the table.
     *
     * @return array
     */
    public function columns(): array
    {
        return [
            Column::make('Name', 'name')
                ->sortable(),
            Column::make('Email', 'email')
                ->sortable(),
            Column::make('Created at', 'created_at')
                ->sortable(),
            Column::make('Updated at', 'updated_at')
                ->sortable(),
            ActionColumn::make('Actions', 'uuid'),
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

You may set different datatable-actions view if needed:

ActionColumn::make('Actions', 'uuid')
   ->setView('custom.dt-actions');
Enter fullscreen mode Exit fullscreen mode

Latest comments (1)

Collapse
 
parrotsoft profile image
Miguel Angel Lopez Ariza

Muchas gracias, esto es de mucha utilidad para agregar funcionalidad al paquete Livewire Datatable