Table component vith emits and props

TableComponent2.vue

<template>
  <div class="q-pa-md full-width">
    <q-table :rows="props.rows" :columns="props.columns" row-key="id" @row-click="onClickRow">
      <template v-slot:body-cell-action="props">
        <q-td :props="props">
          <div>
            <q-btn v-for="(actionButton, index) in actionButtons" :key="index" :icon="actionButton.icon"
              :color="actionButton.color" @click.stop="onClickButton(props.value, actionButton.name)" dense flat
              size="sm" padding="xs" />
          </div>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script setup>
const props = defineProps({
  columns: {
    type: Array,
    required: true
  },
  rows: {
    type: Array,
    required: true
  },
  actionButtons: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['onClickButton', 'onClickRow'])

const onClickRow = (evt, row) => {
  console.log('clicked on', row)
  emit('onClickRow', row)
}

const onClickButton = (id, name) => {
  emit('onClickButton', id, name)
}
</script>