Merge branch 'main' of https://github.com/openweblabs/table-vue

src/App.vue

@@ -21,7 +21,13 @@ import { Table as TableV2 } from './main'
         actions="Info Icon"
         per-page="10"
         checkable="true"
-      />
+      >
+        <template #part_name="partNameProps">
+          <div v-for="(part, x) in partNameProps.value" :key="x" class="text-yellow-600">
+            {{ part }}
+          </div>
+        </template>
+      </TableV2>
     </Suspense>
 
     <Suspense>

src/components/Table.vue

@@ -46,6 +46,7 @@ const cols = $computed((): string[] => {
 
   return columns
 })
+
 const sortDirections = $computed((): string[] => {
   if (isString(sorts))
     return sorts.split(',').map(col => col.trim())
@@ -106,6 +107,10 @@ table.value.perPage = itemsPerPage
 table.value.actions = actions
 table.value.actionable = actionable
 table.value.checkable = checkable
+
+function colName(col: string) {
+  return col.split(':')[0].trim()
+}
 </script>
 
 <template>
@@ -116,7 +121,12 @@ table.value.checkable = checkable
           <div class="shadow ring-black ring-1 ring-opacity-5 overflow-hidden md:rounded-lg">
             <table class="divide-y min-w-full divide-gray-300">
               <TableHead />
-              <TableBody />
+              <TableBody>
+                <template v-for="(col, x) in cols" :key="x" #[colName(col)]="tableBodyData">
+                  <!-- {{ tableBodyData }} -->
+                  <slot :name="colName(col)" :value="tableBodyData.tableRowData" />
+                </template>
+              </TableBody>
             </table>
           </div>
         </div>

src/components/TableBody.vue

@@ -1,12 +1,21 @@
 <script setup lang="ts">
+import { isString } from '@vueuse/core'
 // eslint-disable-next-line no-console
 console.log('TableBody.vue')
 
 const { table } = $(await useTable())
+
+function colName(col: any) {
+  return col.split(':')[0].trim()
+}
 </script>
 
 <template>
   <tbody class="divide-y bg-white divide-gray-200">
-    <TableRow v-for="(hit, index) in table.results?.hits" :key="index" :hit="hit" />
+    <TableRow v-for="(hit, index) in table.results?.hits" :key="index" :hit="hit">
+      <template v-for="(col, x) in table.columns" :key="x" #[colName(col)]="tableRowData">
+        <slot :name="colName(col)" :table-row-data="tableRowData.colData" />
+      </template>
+    </TableRow>
   </tbody>
 </template>

src/components/TableRow.vue

@@ -10,6 +10,10 @@ function generateValue(hit: any, col: any) {
 
   return JSON.parse(hit[col])
 }
+
+function colName(col: any) {
+  return col.split(':')[0].trim()
+}
 </script>
 
 <template>
@@ -31,7 +35,9 @@ function generateValue(hit: any, col: any) {
       </span>
 
       <span v-else>
-        {{ generateValue(hit, col) }}
+        <slot :name="colName(col)" :col-data="generateValue(hit, col)">
+          {{ generateValue(hit, col) }}
+        </slot>
       </span>
     </td>
   </tr>