Merge pull request #248 from juanolv/feature/generic_item_slot

add generic item slot

Author: HC200ok

package.json

@@ -3,7 +3,7 @@
   "author": "HC200ok",
   "description": "A customizable and easy-to-use data table component made with Vue.js 3.x.",
   "private": false,
-  "version": "1.5.36",
+  "version": "1.5.37",
   "types": "./types/main.d.ts",
   "license": "MIT",
   "files": [

src/components/DataTable.vue

@@ -147,7 +147,12 @@
                 @click="column === 'expand' ? updateExpandingItemIndexList(index + prevPageEndIndex, item, $event) : null"
               >
                 <slot
-                  v-if="slots[`item-${column}`]"
+                  v-if="slots['item-general']"
+                  name="item-general"
+                  v-bind="generateColumnContent(column, item)"
+                />
+                <slot
+                  v-else-if="slots[`item-${column}`]"
                   :name="`item-${column}`"
                   v-bind="item"
                 />
@@ -156,6 +161,7 @@
                   :name="`item-${column.toLowerCase()}`"
                   v-bind="item"
                 />
+                
                 <template v-else-if="column === 'expand'">
                   <i
                     class="expand-icon"

src/modes/Client.vue

@@ -89,11 +89,13 @@
         </div>
       </template>
 
-      <template #header="header">
-        {{ header.text.toLocaleLowerCase() }}
+      <template #item-general="item">
+        <div style="padding: 15px">
+          {{ item }} camelCase
+        </div>
       </template>
 
-      <template #item-lastAttended="item">
+      <!-- <template #item-lastAttended="item">
         <div style="padding: 15px">
           {{ item.lastAttended }} camelCase
         </div>
@@ -107,7 +109,7 @@
 
        <template #body.append>
         <span>body.append</span>
-      </template>
+      </template> -->
     </DataTable>
   </div>
 </template>