<template>
 <tbody class="fw-semibold text-gray-600">
 <template v-for="(row, i) in data" :key="i">
 <tr>
 <td v-if="checkboxEnabled">
 <div
 class="form-check form-check-sm form-check-custom form-check-solid"
 >
 <input
 class="form-check-input"
 type="checkbox"
 :value="row[checkboxLabel]"
 v-model="selectedItems"
 @change="onChange"
 />
 </div>
 </td>
 <template v-for="(properties, j) in header" :key="j">
 <td :class="{ "text-end": j === header.length - 1 }">
 <slot :name="`${properties.columnLabel}`" :row="row">
 {{ row }}
 </slot>
 </td>
 </template>
 </tr>
 </template>
 <tr>
 <template v-for="(properties, j) in header" :key="j">
 <td v-if="properties.totalEnabled" :class="{ "text-end": j === header.length - 1 }">
 Total: <strong>{{ properties.totalValue }}</strong>
 </td>
 <td v-else></td>
 </template>
 </tr>
 </tbody>
</template>

{
 columnName: "sales",
 columnLabel: "sales",
 totalEnabled: true,
 totalValue: <enter your total value here>,
},