How should I build a component that has emits defined from props. I Implemented a solution and I think there should be a better way.

[RamonDonadeu]

Hello! This will need a large explanation, I think, so... let's begin.

I'm building a web App with for my company, and now we will start other apps, so I'm trying to move some components to a NPM package so it is shared between different projects.

I'm using q-table component from Quasar
The app has multiple pages where a table is displayed with thousands of lines and each table has different actions to perform to each line.

That component is called "CommonTable" it has a prop called "pageActions" Where I define multiple parameters, the
action type:

• Function: When Clicking that button, a function will be called
• Popup: When Clicking that button, a popup will open
• Redirection: When Clicking that button, you will be redirected

Selection

• none: Nothing will be selected
• single: You have to select a singe row of the table
• multiple: You can select multiple rows

And it has more parameters, here is a pageActions configuration file example:

actions: [
    {
      title: 'itemPrices',
      type: 'function',
      function: 'seeItemPrices',
      selection: 'single',
      selectionKey: 'itemNo'
    },
    {
      title: 'actions',
      icon: 'fa-solid fa-list',
      type: 'expand',
      group: 'group',
      name: 'actions',
      content: [
        {
          title: 'massVendorItemNoCsvImport',
          selection: 'none',
          type: 'popup',
          popupName: 'uploadVendorItemsCSV'
        },
        {
          title: 'massivePriceUpdate',
          type: 'popup',
          popupName: 'massivePriceUpdate',
          selection: 'none'
        }
      ]
    },
    {
      title: 'downloads',
      icon: 'fa-solid fa-list',
      type: 'expand',
      group: 'group',
      name: 'downloads',
      content: [
        {
          title: 'downloadDocument',
          type: 'function',
          function: 'downloadItemDrawing',
          selection: 'single'
        },
        {
          title: 'downloadItemsCSV',
          type: 'function',
          function: 'downloadItemsCSV',
          selection: 'multiple'
        }
      ]
    }
  ]

Usually, when a selection is needed a function must be emitted from that component to its parent, as each table can have 10 different functions and there are multiple ways to call one of the actions, from right-clicking each row, from a TableTopBar, From a Sidebar, when a value of a row is modified... And maybe I have 15 different pages with its own table. This tables, are a very complex component divided in multiple files, but probably they share about 2000 lines of code ( Including comments )

I am a Junior Developer with a Software Engineering Degree, 3 years of work experience, 1 year on Vue and 1 in React, and I work 'alone' in this project, maybe you could say that I'm underqualified for this job, but honestly I don't have any problem developing this project, I'm not really alone as there are more people in the team but not experienced in Vue development, although they know some things about frontend that I can ask them.
But this problem never had a solution we all liked, so I implemented is emitting a common function called 'CallFunction'

Let's say that an action named printRow is called from a row in the table, the row component emits:
emit('callFunction', {functionName: 'printRow', parameters: {parameter1: 1, ... }
Then its parent commonTable receives this emit and emits the same thing

/**
 * This function receive emmit and throws the received function to its parent
 *
 * @param {Object} params Parameters received on emmit to be sent to main Layout
 *
 * @public
 */
callFunction (params) {
  this.$emit('callFunction', params)
},

And then the main page that implements the commonTable component, receives the emit

<template>
    <CommonTable
      ref="table"
      :pageActions="pageActions"
      :showIconsTrueFalse="true"
      :tableLoading="showTableLoading"
      @userSelectedVisibleColumns="savePreferedColumnsAtPinia"
      v-on:callFunction="callFunction"
    />
</template>
<script>
...
   const functions = {
      downloadItemDrawing: helpers.downloadItemDrawing,
      seeItemPrices: helpers.seeItemPrices,
      updateLine: helpers.updateLine,
      printRow: printRow()
    }
...
   const callFunction = (props) => {
      console.log(props)
      if (!props.functionName) return

      const functionName = props.functionName
      delete props.functionName

      // Call the function in the current context
      functions[functionName](props)
    }
...
</script>

Each Page that has a table, has this function called callFunction where it gets the function name and call it from an object where all the available functions are called.

I think this is not an elegant and correct solution as I need to duplicate this structure in each page, but the other way would be having all the hundreds of functions available as emits in the CommonTable component, and each emit will be used only once. So I don't like that solution either. Maybe I should create multiple Common Tables, each with the commits of the page they are in. But I would need also the 'callFunction' emits in the CommonTable childs and when arriving to CommonTable I should get the function name and emit(props.functionName)

As I'm relatively new, and I don't have much architecture experience, I decided that this was the best decision for not creating duplicate components. But I'm open to hearing other better solutions.