Table in Vue 3

Table.vue

<template>
  <div class="ui-table-container">
    <table class="ui-table-body">
      <thead class="ui-table-heade">
        <tr>
          <th
            v-for="(column, index) in componentColumns"
            :key="index"
            :title="column?.label"
            class="ui-table-th"
          >
            <slot
              :name="`header-${column.name}`"
              :column="column"
            >
              <p>
                {{ column?.label }}
              </p>
            </slot>
          </th>
        </tr>
      </thead>
      <tbody v-if="rows && rows.length">
        <tr
          v-for="(row, index) in Rows"
          :key="index"
          @click.stop.prevent="$emit('row-action', row)"
        >
          <slot
            :name="`row-item`"
            :item="row"
          >
            <td
              v-for="(value, key, rowIndex) in row"
              :key="key"
              :title="value"
            >
              <slot
                :name="`item-${key}`"
                :item="{value, key, row, rowIndex, index}"
              >
                <p>
                  {{ value }}
                <p>
              </slot>
            </td>
          </slot>
        </tr>
      </tbody>
    </table>
  </div>
</template>