Merge pull request #94 from UPONU-GmbH/feature/bodyslots

+ added body prepend and append slots

Author: HC200ok

src/components/DataTable.vue

@@ -76,10 +76,25 @@
           </tr>
         </thead>
         <tbody
-          v-if="items.length && headerColumns.length"
+          v-if="headerColumns.length"
           class="vue3-easy-data-table__body"
           :class="{'row-alternation': alternating}"
         >
+          <slot 
+            name="body.prepend"
+            v-bind="{
+              items: pageItems,
+              pagination: {
+                isFirstPage,
+                isLastPage,
+                currentPaginationNumber,
+                maxPaginationNumber,
+                nextPage,
+                prevPage
+              },
+              headers: headersForRender
+            }"
+          />
           <template
             v-for="(item, index) in pageItems"
             :key="index"
@@ -140,6 +155,21 @@
               </td>
             </tr>
           </template>
+          <slot 
+            name="body.append"
+            v-bind="{
+              items: pageItems,
+              pagination: {
+                isFirstPage,
+                isLastPage,
+                currentPaginationNumber,
+                maxPaginationNumber,
+                nextPage,
+                prevPage
+              },
+              headers: headersForRender
+            }"
+          />
         </tbody>
       </table>
       <div

src/modes/Client.vue

@@ -35,6 +35,16 @@
       @update-sort="updateSort"
       hide-footer
     >
+      <template #body.prepend="body">
+        <tr>
+          <td
+            v-for="(header, index) in body.headers"
+            :key="index"
+          >
+            <span v-if="isDataHeader(header)">Coloumn {{ header.text }}</span>
+          </td>
+        </tr>
+      </template>
 
       <template #expand="item">
         <div style="padding: 15px">
@@ -59,6 +69,10 @@
           </div>
         </div>
       </template>
+
+       <template #body.append>
+        <span>body.append</span>
+      </template>
     </DataTable>
 
     <div class="customize-footer">
@@ -229,6 +243,9 @@ const prevPage = () => {
 const updatePage = (paginationNumber: number) => {
   dataTable.value.updatePage(paginationNumber);
 };
+const isDataHeader = (header: Header) => {
+  return !(header.value === 'checkbox' || header.value === 'index' || header.value === 'expand')
+}
 
 // rows per page
 const rowsPerPageOptions = computed(() => dataTable.value?.rowsPerPageOptions);