Why the DataTable is not refresh or automatically display after I stored new data in the database?

[anonymouse703]

Why do I need to refresh the page to see the updated data in the DataTable after I save/store data to the database?

I have three component

1. PermissionTable - for my landing page
2. Permission Form - for my Modal Form
3. PermissionDataTable - for the query of my DataTable

Permission Table

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Spatie\Permission\Models\Permission;
use Livewire\WithPagination;

class PermissionTable extends Component
{
    use WithPagination;

    public $permissionId;

    protected $listeners = [
        'refreshParent' => '$refresh',
        'deletePermission',
        'showEmitedFlashMessage'
    ];

    public function showEmitedFlashMessage($action)
    {
        if($action == 'edit') {
            session()->flash('edit','Permission Updated Successfully.');
        } else {
            session()->flash('store','Permission Created Successfully.');
        }    
    }

    public function render()
    {
        return view('livewire.permission-table',[
            'permissions' => Permission::paginate(10)->sortBy('id'),
        ]);
    }

    public function createPermission(){
        $this->emit('resetInputFields');
        $this->emit('openPermissionModal');
    }
}

and my Form component

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Spatie\Permission\Models\Permission;

class PermissionForm extends Component
{
    public $slug, $permissionId, $name;

    protected $listeners = [
        'permissionId',
        'resetInputFields'
    ];

    public function resetInputFields(){
        $this->reset();
    }

    public function permissionId($permissionId){
        $this->permissionId = $permissionId;
        $permission = Permission::find($permissionId);
        $this->name = $permission->name;
    }

    public function render()
    {
        return view('livewire.permission-form');
    }

    public function store(){

        $action = '';

        $data = $this->validate([
            'name' => 'required',
        ]);

        if($this->permissionId){
            Permission::find($this->permissionId)->update($data);
            $action = 'edit';
        }else{
            Permission::create($data);
            $action = 'store';
        }
        $this->emit('showEmitedFlashMessage', $action);
        $this->resetInputFields();
        $this->emit('refreshParent');
        $this->emit('closePermissionModal');

    }
}

and the PermissionDatatable component

<?php

namespace App\Http\Livewire;

use App\Models\Permission;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;

class PermissionDatatable extends LivewireDatatable
{
    public $model = Permission::class;

    public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->defaultSort('asc')
                ->sortBy('id'),

            Column::name('name')
                ->label('Permission')
                ->searchable(),

            Column::delete()

        ];
    }
}

and my scripts

<script>

    window.livewire.on('closePermissionModal', () => {
        $('#permissionModal').modal('hide');
    });

    window.livewire.on('openPermissionModal', () => {
        $('#permissionModal').modal('show');
    });

</script>

and this my view

<div>
     <!-- page content -->
     <div class="row">
        <div class="col-md-12 col-sm-12 ">

            <div class="dashboard_graph">
                <div class="row x_title">
                    <div class="col-md-6">
                        <h3>Permissions</h3>
                    </div>
                </div>
                <div class="row">
                    @if (session()->has('store'))
                        <div class=" col-md-12 alert alert-success">
                            {{ session('store') }}
                        </div>
                    @endif
                    @if (session()->has('edit'))
                        <div class="col-md-12 alert alert-success">
                            {{ session('edit') }}
                        </div>
                    @endif
                    <!-- Button trigger modal -->
                    <button type="button" wire:click="createPermission" class="btn btn-primary ml-3" data-keyboard="false">
                        <i class="glyphicon glyphicon-plus"></i>&nbsp Add Permission
                    </button>

                    <div class="col-md-12 col-sm-12 ">
                        <div class="x_panel">
                            <div class="x_content">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="card-box table-responsive">                                
                                            <div class="display">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <livewire:permission-datatable exportable/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--end sa table row--->

                </div>         
            </div>
        </div>

    </div>
    <!-- /page content -->

     <!-- The Modal -->
     <div wire.ignore.self class="modal fade" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="permissionModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <livewire:permission-form />
        </div>
    </div>
</div>

@section('custom_script')
    @include('layouts.shared.scripts.permission_scripts'); 
@endsection

[pepijndik]

I think that you can fix it with: $this->refreshLivewireDatatable(); and build for this a event listner

[anonymouse703]

@pepijndik where to put this $this->refreshLivewireDatatable();?

[pepijndik]

<?php

namespace App\Http\Livewire;

use App\Models\Permission;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;

class PermissionDatatable extends LivewireDatatable
{
    public $model = Permission::class;
    protected $listeners = ['refreshDataTable' => 'refreshTable'];

    public function refreshTable()
    {
     $this->refreshLivewireDatatable();
    }
    public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->defaultSort('asc')
                ->sortBy('id'),

            Column::name('name')
                ->label('Permission')
                ->searchable(),

            Column::delete()

        ];
    }
}

and then call a $this->emit('refreshDataTable') after that you have created the new table element.

[anonymouse703]

<?php

namespace App\Http\Livewire;

use App\Models\Permission;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\NumberColumn;

class PermissionDatatable extends LivewireDatatable
{
    public $model = Permission::class;
    protected $listeners = ['refreshDataTable' => 'refreshTable'];

    public function refreshTable()
    {
     $this->refreshLivewireDatatable();
    }
    public function columns()
    {
        return [
            NumberColumn::name('id')
                ->label('ID')
                ->defaultSort('asc')
                ->sortBy('id'),

            Column::name('name')
                ->label('Permission')
                ->searchable(),

            Column::delete()

        ];
    }
}

and then call a $this->emit('refreshDataTable') after that you have created the new table element.

Thanks sir working....

[anonymouse703]

@pepijndik how to add another column name actions where I can put edit and delete button? There's is only Column::delete() and I don't know how to put the custom column coz when I follow this link https://livewire-datatables.com/actions it's too complex and what I want is something like this like in yajra

->addColumn('actions', function($q) {
    return '
        <div class="btn-group pull-right" style="border: transparent;">
            <a type="button" class="btn btn-success shadow btn-xs sharp mr-1" href="'.url('news-edit/'.$q->id).'" title="Edit News"><i class="fa fa-edit"></i></a>
            <form action="'.url('news-delete/'.$q->id).'" method="POST">
                <input type="hidden" name="_method" value="DELETE">
                <input name="_token" value="' . csrf_token() . '" type="hidden">
                <button class="btn btn-info shadow btn-xs sharp mr-1" title="Delete News"><i class="fa fa-trash"></i></button>
            </form>
        </div>
    ';
})

[pepijndik]

@anonymouse703

Just do it like so:

Column::callback(['id'], function ($id) {
                return view('quotation::Livewire.TableAction', ['id' => $id]);
            })->label('Actie')

and then in your view you can define all your actions. example of mine:

@can('admin.quotation') @endcan @can('admin.quotation.edit') @endcan @can('admin.quotation.delete') @endcan

[anonymouse703]

admin.

where did you get this admin.?

[pepijndik]

i am using the @/can for my custom gates This is for permissions. Maybe its a good idea to read first the laravel docs about that or at all start with a basics laravel app