create personalized button in vue-good-table-next

Question

I´m trying to create a datatable with vue-good-table-next and Vue 3 in laravel 9. I´m filled all data with axios and it´s ok. My problem it´s that I need create a personalized button, edit and remove. I´m reading documentation but i can´t create this button. I´m trying with this code :

<template>
  <div>
    <vue-good-table :columns="columns" :rows="fisios" :search-options="{enabled: true}" >
        <template slot="table-row" slot-scope="props">
            <span v-if="props.column.field == 'actions'">
                <button class="btn btn-warning">Edit</button>
            </span>
            <span v-else>
                {{props.formattedRow[props.column.field]}}
            </span>
        </template>
    </vue-good-table>
  </div>
</template>

<script>

    export default {
        created: function () {
            axios.get('/fisios/getFisios').then(({data}) => this.fisios = data);
        },
        methods: {
            edit() {},
            remove() {},
        },
        data(){
            return {
                searchTerm: '',
                fisios: [],
                
                columns: [
                    {
                        label: 'Name',
                        field: 'nombre',
                    },
                    {
                        label: 'Surname',
                        field: 'apellidos',
                    },
                    {
                        label: 'tlf1',
                        field: 'tlf1',
                    },
                    {
                        label: 'tlf2',
                        field: 'tlf2',
                    },
                    {
                        label: 'Actions',
                        field: 'actions',
                        sortable: false,
                    },
                ],
                
            };
        },
    };
</script>

Answer 1

I solve my problem.

<template #table-row="props">
            <span v-if="props.column.field == 'edit'">
                <button type="button" class="btn btn-warning" v-on:click="edit(props.row.id)"><i class="fas fa-edit"></i></button>
            </span>
            <span v-else-if="props.column.field == 'remove'">
                <button type="button" class="btn btn-danger" v-on:click="remove(props.row.id)"><i class="fas fa-trash-alt"></i></button>
            </span>
            <span v-else>
                {{props.formattedRow[props.column.field]}}
            </span>
        </template>

in template i do this.

And in definition table i do this, two columns. My two button i can´t to do in only one row.

columns: [
                    {
                        label: 'ID',
                        field: 'id',
                    },
                    {
                        label: 'Name',
                        field: 'nombre',
                    },
                    {
                        label: 'Surname',
                        field: 'apellidos',
                    },
                    {
                        label: 'tlf1',
                        field: 'tlf1',
                    },
                    {
                        label: 'tlf2',
                        field: 'tlf2',
                    },
                    {
                        label: 'Edit',
                        field: 'edit'
                    },
                    
                    {
                        label: 'Remove',
                        field: 'remove'
                    },
                ],