How can I display custom content in vue-good-table within my view-side component?

I'm new to VueJS and decided to use a library called Vue-good-table (doc here : https://xaksis.github.io/vue-good-table/ ) to display a datatable in my laravel project instead of the usual Yajra datatables which uses jQuery. I have been able to display my data from backend but now I'm struggling to include an edit button in a custom "actions" column. I've tried many ways but none has been successful. I need a way to redirect to the edit page on button's click so my guess is I need to handle the custom column template in my php view file. Here's the code to make it more explicit :

Php controller :

public function index() {
    $users = json_encode(User::latest()->get());
    $userColumns = json_encode([
            [
                'label' => 'ID',
                'field' => 'id'
            ],
            [
                'label' => 'name',
                'field' => 'name'
            ],
            [
                'label' => 'Email',
                'field' => 'email'
            ],
            [
                'label' => 'Action',
                'field' => 'actions'
            ]
    ]);

    return view('admin.users.index', compact('users', 'userColumns'));
}

Vue component :

<template>
<div>
    <vue-good-table
        :columns="columns"
        :rows="rows"
        compactMode
    >
        <slot></slot>
    </vue-good-table>

</div>
</template>

<script>
   import { VueGoodTable } from 'vue-good-table';

   export default {
     props: ['rows', 'columns'],
     components : { VueGoodTable },
   }
</script>

<style scoped>

</style>

The app.js file :

import Vue from 'vue';
import Datatables from './components/datatables';



const app = new Vue({
    el: '#app',

    components : {
        'bdfr-datatables' : Datatables,
    },
}

View php file :

@section('content')
    <bdfr-datatables :rows="{{ $users }}" :columns="{{ $userColumns }}">
        <!-- wishing to display this part -->
        <template slot="table-row" slot-scope="props">
            <span v-if="props.column.field === 'actions'">
                <a href="#">Edit</a>
            </span>
            <span v-else>
                @{{props.formattedRow[props.column.field]}}
            </span>
         </template>
    </bdfr-datatables>
@endsection

What am I missing to make it work ? Thank you in advance.

Solution

I'm struggling to include an edit button in a custom "actions" column. I've tried many ways but none has been successful. I need a way to redirect to the edit page on button's click

If I understood your question correctly, you would like to display a link that redirect's to the user edition's form, via an url that would look like /user/1/edit.

First, check what Laravels returns

You may want to go with dd(User::latest()->get()); for that. By default, you should get the id alongside other informations, unless you explicitly $guarded them.

Then, adapt your solution with vue-good-table's template system

If you check this link, it shows you an example of a table that seems to display the "age" column with a specific style, and the rest by default. What's interesting here is that it shows you that each of your users can be reached via props.row.

So what you'd need to do is something like follows:

  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'actions'">
      <a :href="`/user/${props.row.id}/edit`">Edit</a>
    </span>
    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
  </template>
</vue-good-table>