title: How can I display custom content in vue-good-table within my view-side component?
body: <p>I'm new to VueJS and decided to use a library called Vue-good-table (doc here : <a href="https://xaksis.github.io/vue-good-table/" rel="nofollow noreferrer">https://xaksis.github.io/vue-good-table/</a> ) 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 &quot;actions&quot; 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 :</p>
  <p>Php controller :</p>
  <pre><code>public function index() {
      $users = json_encode(User::latest()-&gt;get());
      $userColumns = json_encode([
              [
                  'label' =&gt; 'ID',
                  'field' =&gt; 'id'
              ],
              [
                  'label' =&gt; 'name',
                  'field' =&gt; 'name'
              ],
              [
                  'label' =&gt; 'Email',
                  'field' =&gt; 'email'
              ],
              [
                  'label' =&gt; 'Action',
                  'field' =&gt; 'actions'
              ]
      ]);
  
      return view('admin.users.index', compact('users', 'userColumns'));
  }
  </code></pre>
  <p>Vue component :</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;vue-good-table
          :columns=&quot;columns&quot;
          :rows=&quot;rows&quot;
          compactMode
      &gt;
          &lt;slot&gt;&lt;/slot&gt;
      &lt;/vue-good-table&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
     import { VueGoodTable } from 'vue-good-table';
  
     export default {
       props: ['rows', 'columns'],
       components : { VueGoodTable },
     }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  <p>The app.js file :</p>
  <pre><code>import Vue from 'vue';
  import Datatables from './components/datatables';
  
  
  
  const app = new Vue({
      el: '#app',
  
      components : {
          'bdfr-datatables' : Datatables,
      },
  }
  </code></pre>
  <p>View php file :</p>
  <pre><code>@section('content')
      &lt;bdfr-datatables :rows=&quot;{{ $users }}&quot; :columns=&quot;{{ $userColumns }}&quot;&gt;
          &lt;!-- wishing to display this part --&gt;
          &lt;template slot=&quot;table-row&quot; slot-scope=&quot;props&quot;&gt;
              &lt;span v-if=&quot;props.column.field === 'actions'&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;Edit&lt;/a&gt;
              &lt;/span&gt;
              &lt;span v-else&gt;
                  @{{props.formattedRow[props.column.field]}}
              &lt;/span&gt;
           &lt;/template&gt;
      &lt;/bdfr-datatables&gt;
  @endsection
  </code></pre>
  <p>What am I missing to make it work ? Thank you in advance.</p>