Action buttons in reuseable table component.

Hi all

I am in a middle of building a reuseable table components. I am passing 2 props in the component one is columns which is an array of objects which determine the table columns and another is data which is use to populate table. Here is the code so far:

//props
const columns = [
    { path: '#', label: "#" },
    { path: 'name', label: "Name", sortable: true },
];

//passing to component
<TableBody 
 :columns="columns"
:data="types"
/>

//TableBody Component

<script setup>
import _ from 'lodash';

const props = defineProps({
    columns: Array,
    data: Array
})


const renderCell = (item, column, index) => {
    if(column.label === '#') return index;
    return _.get(item, column.path)
}
</script>

<template>
    <tbody>
        <tr v-for="(item, index) in data" :key="index">
            <td v-for="(column, colIndex) in columns" :key="colIndex">
                {{renderCell(item, column, index + 1 )}}
            </td>
        </tr>
    </tbody>
</template>

The problem is here how to render action buttons like edit, delete or another buttons which should receive and send an id while emitting an event. Some component required more than 2 or three buttons.

I want to pass the button types from the parent component as i am sending the column types.