^ added example to client mode

Author: NovalisTheMagician

src/components/DataTable.vue

@@ -83,16 +83,16 @@
           <slot 
             name="body.prepend"
             v-bind="{
-              items = pageItems,
-              pagination = {
+              items: pageItems,
+              pagination: {
                 isFirstPage,
                 isLastPage,
                 currentPaginationNumber,
                 maxPaginationNumber,
                 nextPage,
                 prevPage
               },
-              headers = headersForRender
+              headers: headersForRender
             }"
           />
           <template
@@ -158,16 +158,16 @@
           <slot 
             name="body.append"
             v-bind="{
-              items = pageItems,
-              pagination = {
+              items: pageItems,
+              pagination: {
                 isFirstPage,
                 isLastPage,
                 currentPaginationNumber,
                 maxPaginationNumber,
                 nextPage,
                 prevPage
               },
-              headers = headersForRender
+              headers: headersForRender
             }"
           />
         </tbody>

src/modes/Client.vue

@@ -34,6 +34,17 @@
       @click-row="showItem"
       @update-sort="updateSort"
     >
+      <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">
           {{ item.name }} won championships
@@ -57,6 +68,10 @@
           </div>
         </div>
       </template>
+
+       <template #body.append>
+        <span>body.append</span>
+      </template>
     </DataTable>
 
     <div class="customize-footer">
@@ -208,6 +223,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')
+}
 </script>
 
 <style scoped>