From ef416ffa27bb9935ae4a2b71282b88f730426bc2 Mon Sep 17 00:00:00 2001
From: Ahmad Saad Aldin <as@enbit.de>
Date: Thu, 1 Feb 2018 04:27:41 +0100
Subject: [PATCH 1/3] remove the extra close div tag, and realign the code in
 the right way

---
 src/components/Vuetable.vue | 53 ++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
index cfce6996..c5f94a1d 100644
--- a/src/components/Vuetable.vue
+++ b/src/components/Vuetable.vue
@@ -100,38 +100,37 @@
                   v-html="renderNormalField(field, item)"
                 >
                 </td>
-                  </template>
-                </template>
               </template>
-            </tr>
-            <template v-if="useDetailRow">
-              <transition :name="detailRowTransition">
-                <tr v-if="isVisibleDetailRow(item[trackBy])"
-                  @click="onDetailRowClick(item, $event)"
-                  :class="[css.detailRowClass]"
-                >
-                    <td :colspan="countVisibleFields">
-                      <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
-                    </td>
-                </tr>
-              </transition>
             </template>
           </template>
-          <template v-if="displayEmptyDataRow">
-            <tr>
-              <td :colspan="countVisibleFields" class="vuetable-empty-result">{{noDataTemplate}}</td>
-            </tr>
-          </template>
-          <template v-if="lessThanMinRows">
-            <tr v-for="i in blankRows" class="blank-row">
-              <template v-for="field in tableFields">
-                <td v-if="field.visible">&nbsp;</td>
-              </template>
+        </tr>
+        <template v-if="useDetailRow">
+          <transition :name="detailRowTransition">
+            <tr v-if="isVisibleDetailRow(item[trackBy])"
+              @click="onDetailRowClick(item, $event)"
+              :class="[css.detailRowClass]"
+            >
+                <td :colspan="countVisibleFields">
+                  <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
+                </td>
             </tr>
+          </transition>
+        </template>
+      </template>
+      <template v-if="displayEmptyDataRow">
+        <tr>
+          <td :colspan="countVisibleFields" class="vuetable-empty-result">{{noDataTemplate}}</td>
+        </tr>
+      </template>
+      <template v-if="lessThanMinRows">
+        <tr v-for="i in blankRows" class="blank-row">
+          <template v-for="field in tableFields">
+            <td v-if="field.visible">&nbsp;</td>
           </template>
-        </tbody>
-      </table>
-    </div>
+        </tr>
+      </template>
+    </tbody>
+    </table>
   </div>
 </div>
 <table v-else :class="['vuetable', css.tableClass]"> <!-- no fixed header - regular table -->

From c6fa197905c8e7472a3b1b562c46591ea996cb12 Mon Sep 17 00:00:00 2001
From: Ahmad Saad Aldin <as@enbit.de>
Date: Thu, 1 Feb 2018 04:31:13 +0100
Subject: [PATCH 2/3] add sortclass to the regular table

---
 src/components/Vuetable.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
index c5f94a1d..85b4e9b8 100644
--- a/src/components/Vuetable.vue
+++ b/src/components/Vuetable.vue
@@ -148,29 +148,29 @@
             <th v-if="extractName(field.name) == '__component'"
                 @click="orderBy(field, $event)"
                 :style="{width: field.width}"
-                :class="['vuetable-th-component-'+trackBy, field.titleClass, {'sortable': isSortable(field)}]"
+                :class="['vuetable-th-component-'+trackBy, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
                 v-html="renderTitle(field)"
             ></th>
             <th v-if="extractName(field.name) == '__slot'"
                 @click="orderBy(field, $event)"
                 :style="{width: field.width}"
-                :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, {'sortable': isSortable(field)}]"
+                :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
                 v-html="renderTitle(field)"
             ></th>
             <th v-if="extractName(field.name) == '__sequence'"
                 :style="{width: field.width}"
-                :class="['vuetable-th-sequence', field.titleClass || '']" v-html="renderTitle(field)">
+                :class="['vuetable-th-sequence', field.titleClass || '', sortClass(field)]" v-html="renderTitle(field)">
             </th>
             <th v-if="notIn(extractName(field.name), ['__sequence', '__checkbox', '__component', '__slot'])"
                 :style="{width: field.width}"
-                :class="['vuetable-th-'+field.name, field.titleClass || '']" v-html="renderTitle(field)">
+                :class="['vuetable-th-'+field.name, field.titleClass || '', sortClass(field)]" v-html="renderTitle(field)">
             </th>
           </template>
           <template v-else>
             <th @click="orderBy(field, $event)"
               :id="'_' + field.name"
               :style="{width: field.width}"
-              :class="['vuetable-th-'+field.name, field.titleClass,  {'sortable': isSortable(field)}]"
+              :class="['vuetable-th-'+field.name, field.titleClass, sortClass(field),  {'sortable': isSortable(field)}]"
               v-html="renderTitle(field)"
             ></th>
           </template>

From 783d40d037df5844769a29f1daa113f1dd4aa1aa Mon Sep 17 00:00:00 2001
From: Rati Wannapanop <rati.wannapanop@gmail.com>
Date: Fri, 2 Feb 2018 11:39:36 +0700
Subject: [PATCH 3/3] add key for v-for and reformat template

---
 index.html                  |   1 -
 src/components/Vuetable.vue | 352 +++++++++++++++++++++---------------
 src/main.js                 |  19 +-
 3 files changed, 214 insertions(+), 158 deletions(-)

diff --git a/index.html b/index.html
index 359fe2cd..66b4050d 100644
--- a/index.html
+++ b/index.html
@@ -106,7 +106,6 @@ <h3 class="ui header">List of Users</h3>
                       :sort-order="sortOrder"
                       :multi-sort="multiSort"
                       :per-page="perPage"
-                      :query-params="queryParams"
                       :append-params="moreParams"
                       detail-row-component="my-detail-row"
                       detail-row-transition="expand"
diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
index 85b4e9b8..eac007b0 100644
--- a/src/components/Vuetable.vue
+++ b/src/components/Vuetable.vue
@@ -4,40 +4,47 @@
     <table :class="['vuetable', css.tableClass, css.tableHeaderClass]">
     <thead>
       <tr>
-        <template v-for="field in tableFields">
+        <template v-for="(field, fieldIndex) in tableFields">
           <template v-if="field.visible">
             <template v-if="isSpecialField(field.name)">
               <th v-if="extractName(field.name) == '__checkbox'"
-                  :style="{width: field.width}"
-                :class="['vuetable-th-checkbox-'+trackBy, field.titleClass]">
+                :key="fieldIndex"
+                :style="{width: field.width}"
+                :class="['vuetable-th-checkbox-'+trackBy, field.titleClass]"
+              >
                 <input type="checkbox" @change="toggleAllCheckboxes(field.name, $event)"
                   :checked="checkCheckboxesState(field.name)">
               </th>
               <th v-if="extractName(field.name) == '__component'"
-                  @click="orderBy(field, $event)"
-                    :style="{width: field.width}"
-                  :class="['vuetable-th-component-'+trackBy, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
-                  v-html="renderTitle(field)"
+                :key="fieldIndex"
+                :style="{width: field.width}"
+                :class="['vuetable-th-component-'+trackBy, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
+                v-html="renderTitle(field)"
+                @click="orderBy(field, $event)"
               ></th>
               <th v-if="extractName(field.name) == '__slot'"
-                  @click="orderBy(field, $event)"
-                    :style="{width: field.width}"
-                  :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
-                  v-html="renderTitle(field)"
+                :key="fieldIndex"
+                :style="{width: field.width}"
+                :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
+                v-html="renderTitle(field)"
+                @click="orderBy(field, $event)"
               ></th>
               <th v-if="extractName(field.name) == '__sequence'"
-                    :style="{width: field.width}"
-                  :class="['vuetable-th-sequence', field.titleClass || '']" v-html="renderTitle(field)">
+                :key="fieldIndex"
+                :style="{width: field.width}"
+                :class="['vuetable-th-sequence', field.titleClass || '']" v-html="renderTitle(field)">
               </th>
               <th v-if="notIn(extractName(field.name), ['__sequence', '__checkbox', '__component', '__slot'])"
-                    :style="{width: field.width}"
-                  :class="['vuetable-th-'+field.name, field.titleClass || '']" v-html="renderTitle(field)">
+                :key="fieldIndex"
+                :style="{width: field.width}"
+                :class="['vuetable-th-'+field.name, field.titleClass || '']" v-html="renderTitle(field)">
               </th>
             </template>
             <template v-else>
               <th @click="orderBy(field, $event)"
+                :key="fieldIndex"
                 :id="'_' + field.name"
-                  :style="{width: field.width}"
+                :style="{width: field.width}"
                 :class="['vuetable-th-'+field.name, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
                 v-html="renderTitle(field)"
               ></th>
@@ -52,122 +59,148 @@
   <div class="vuetable-body-wrapper" :style="{height: tableHeight}">
     <table :class="['vuetable', css.tableClass, css.tableBodyClass]">
       <colgroup>
-          <template v-for="field in tableFields">
-            <template v-if="field.visible">
-              <template>
-                <col
-                  :id="'_col_' + field.name"
-                  :style="{width: field.width}"
-                  :class="['vuetable-th-'+field.name, field.titleClass]"
-                ></col>
-              </template>
-            </template>
+        <template v-for="(field, fieldIndex) in tableFields">
+          <template v-if="field.visible">
+            <col
+              :key="fieldIndex"
+              :id="'_col_' + field.name"
+              :style="{width: field.width}"
+              :class="['vuetable-th-'+field.name, field.titleClass]"
+            />
           </template>
+        </template>
       </colgroup>
-    <tbody v-cloak class="vuetable-body">
-      <template v-for="(item, index) in tableData">
-        <tr @dblclick="onRowDoubleClicked(item, $event)" :item-index="index" @click="onRowClicked(item, $event)" :render="onRowChanged(item)" :class="onRowClass(item, index)">
-          <template v-for="field in tableFields">
-            <template v-if="field.visible">
-              <template v-if="isSpecialField(field.name)">
-                <td v-if="extractName(field.name) == '__sequence'" :class="['vuetable-sequence', field.dataClass]"
-                  v-html="renderSequence(index)">
-                </td>
-                <td v-if="extractName(field.name) == '__handle'" :class="['vuetable-handle', field.dataClass]"
-                  v-html="renderIconTag(['handle-icon', css.handleIcon])"
-                ></td>
-                <td v-if="extractName(field.name) == '__checkbox'" :class="['vuetable-checkboxes', field.dataClass]">
-                  <input type="checkbox"
-                    @change="toggleCheckbox(item, field.name, $event)"
-                    :checked="rowSelected(item, field.name)">
-                </td>
-                <td v-if="extractName(field.name) === '__component'" :class="['vuetable-component', field.dataClass]">
-                  <component :is="extractArgs(field.name)"
-                    :row-data="item" :row-index="index" :row-field="field.sortField"
-                  ></component>
-                </td>
-                <td v-if="extractName(field.name) === '__slot'" :class="['vuetable-slot', field.dataClass]">
-                  <slot :name="extractArgs(field.name)"
-                    :row-data="item" :row-index="index" :row-field="field.sortField"
-                  ></slot>
-                </td>
-              </template>
-              <template v-else>
-                <td :class="field.dataClass"
-                  @click="onCellClicked(item, field, $event)"
-                  @dblclick="onCellDoubleClicked(item, field, $event)"
-                  @contextmenu="onCellRightClicked(item, field, $event)"
-                  v-html="renderNormalField(field, item)"
-                >
-                </td>
+      <tbody v-cloak class="vuetable-body">
+        <template v-for="(item, itemIndex) in tableData">
+          <tr 
+            :key="itemIndex"
+            :item-index="itemIndex" 
+            :render="onRowChanged(item)" 
+            :class="onRowClass(item, itemIndex)"
+            @click="onRowClicked(item, $event)" 
+            @dblclick="onRowDoubleClicked(item, $event)" 
+          >
+            <template v-for="(field, fieldIndex) in tableFields">
+              <template v-if="field.visible">
+                <template v-if="isSpecialField(field.name)">
+                  <td v-if="extractName(field.name) == '__sequence'" 
+                    :key="fieldIndex"
+                    :class="['vuetable-sequence', field.dataClass]"
+                    v-html="renderSequence(itemIndex)">
+                  </td>
+                  <td v-if="extractName(field.name) == '__handle'" 
+                    :key="fieldIndex"
+                    :class="['vuetable-handle', field.dataClass]"
+                    v-html="renderIconTag(['handle-icon', css.handleIcon])"
+                  ></td>
+                  <td v-if="extractName(field.name) == '__checkbox'" 
+                    :key="fieldIndex"
+                    :class="['vuetable-checkboxes', field.dataClass]"
+                  >
+                    <input type="checkbox"
+                      @change="toggleCheckbox(item, field.name, $event)"
+                      :checked="rowSelected(item, field.name)">
+                  </td>
+                  <td v-if="extractName(field.name) === '__component'" 
+                    :key="fieldIndex"
+                    :class="['vuetable-component', field.dataClass]"
+                  >
+                    <component :is="extractArgs(field.name)"
+                      :row-data="item" :row-index="itemIndex" :row-field="field.sortField"
+                    ></component>
+                  </td>
+                  <td v-if="extractName(field.name) === '__slot'" 
+                    :key="fieldIndex"
+                    :class="['vuetable-slot', field.dataClass]"
+                  >
+                    <slot :name="extractArgs(field.name)"
+                      :row-data="item" :row-index="itemIndex" :row-field="field.sortField"
+                    ></slot>
+                  </td>
+                </template>
+                <template v-else>
+                  <td :class="field.dataClass"
+                    :key="fieldIndex"
+                    v-html="renderNormalField(field, item)"
+                    @click="onCellClicked(item, field, $event)"
+                    @dblclick="onCellDoubleClicked(item, field, $event)"
+                    @contextmenu="onCellRightClicked(item, field, $event)"
+                  ></td>
+                </template>
               </template>
             </template>
-          </template>
-        </tr>
-        <template v-if="useDetailRow">
-          <transition :name="detailRowTransition">
-            <tr v-if="isVisibleDetailRow(item[trackBy])"
-              @click="onDetailRowClick(item, $event)"
-              :class="[css.detailRowClass]"
-            >
+          </tr>
+          <template v-if="useDetailRow">
+            <transition :name="detailRowTransition" :key="itemIndex">
+              <tr v-if="isVisibleDetailRow(item[trackBy])"
+                :class="[css.detailRowClass]"
+                @click="onDetailRowClick(item, $event)"
+              >
                 <td :colspan="countVisibleFields">
-                  <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
+                  <component :is="detailRowComponent" :row-data="item" :row-index="itemIndex"></component>
                 </td>
-            </tr>
-          </transition>
-        </template>
-      </template>
-      <template v-if="displayEmptyDataRow">
-        <tr>
-          <td :colspan="countVisibleFields" class="vuetable-empty-result">{{noDataTemplate}}</td>
-        </tr>
-      </template>
-      <template v-if="lessThanMinRows">
-        <tr v-for="i in blankRows" class="blank-row">
-          <template v-for="field in tableFields">
-            <td v-if="field.visible">&nbsp;</td>
+              </tr>
+            </transition>
           </template>
-        </tr>
-      </template>
-    </tbody>
+        </template>
+        <template v-if="displayEmptyDataRow">
+          <tr>
+            <td :colspan="countVisibleFields" class="vuetable-empty-result" v-html="noDataTemplate"></td>
+          </tr>
+        </template>
+        <template v-if="lessThanMinRows">
+          <tr v-for="i in blankRows" class="blank-row" :key="i">
+            <template v-for="(field, fieldIndex) in tableFields">
+              <td v-if="field.visible" :key="fieldIndex">&nbsp;</td>
+            </template>
+          </tr>
+        </template>
+      </tbody>
     </table>
   </div>
 </div>
 <table v-else :class="['vuetable', css.tableClass]"> <!-- no fixed header - regular table -->
   <thead>
     <tr>
-      <template v-for="field in tableFields">
+      <template v-for="(field, fieldIndex) in tableFields">
         <template v-if="field.visible">
           <template v-if="isSpecialField(field.name)">
             <th v-if="extractName(field.name) == '__checkbox'"
+              :key="fieldIndex"
               :style="{width: field.width}"
-              :class="['vuetable-th-checkbox-'+trackBy, field.titleClass]">
+              :class="['vuetable-th-checkbox-'+trackBy, field.titleClass]"
+            >
               <input type="checkbox" @change="toggleAllCheckboxes(field.name, $event)"
                 :checked="checkCheckboxesState(field.name)">
             </th>
             <th v-if="extractName(field.name) == '__component'"
-                @click="orderBy(field, $event)"
-                :style="{width: field.width}"
-                :class="['vuetable-th-component-'+trackBy, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
-                v-html="renderTitle(field)"
+              :key="fieldIndex"
+              :style="{width: field.width}"
+              :class="['vuetable-th-component-'+trackBy, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
+              v-html="renderTitle(field)"
+              @click="orderBy(field, $event)"
             ></th>
             <th v-if="extractName(field.name) == '__slot'"
-                @click="orderBy(field, $event)"
-                :style="{width: field.width}"
-                :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
-                v-html="renderTitle(field)"
+              :key="fieldIndex"
+              :style="{width: field.width}"
+              :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
+              v-html="renderTitle(field)"
+              @click="orderBy(field, $event)"
             ></th>
             <th v-if="extractName(field.name) == '__sequence'"
-                :style="{width: field.width}"
-                :class="['vuetable-th-sequence', field.titleClass || '', sortClass(field)]" v-html="renderTitle(field)">
-            </th>
+              :key="fieldIndex"
+              :style="{width: field.width}"
+              :class="['vuetable-th-sequence', field.titleClass || '', sortClass(field)]" v-html="renderTitle(field)"
+            ></th>
             <th v-if="notIn(extractName(field.name), ['__sequence', '__checkbox', '__component', '__slot'])"
-                :style="{width: field.width}"
-                :class="['vuetable-th-'+field.name, field.titleClass || '', sortClass(field)]" v-html="renderTitle(field)">
-            </th>
+              :key="fieldIndex"
+              :style="{width: field.width}"
+              :class="['vuetable-th-'+field.name, field.titleClass || '', sortClass(field)]" v-html="renderTitle(field)"
+            ></th>
           </template>
           <template v-else>
             <th @click="orderBy(field, $event)"
+              :key="fieldIndex"
               :id="'_' + field.name"
               :style="{width: field.width}"
               :class="['vuetable-th-'+field.name, field.titleClass, sortClass(field),  {'sortable': isSortable(field)}]"
@@ -179,79 +212,100 @@
     </tr>
   </thead>
   <tbody v-cloak class="vuetable-body">
-    <template v-for="(item, index) in tableData">
-      <tr @dblclick="onRowDoubleClicked(item, $event)" :item-index="index" @click="onRowClicked(item, $event)" :render="onRowChanged(item)" :class="onRowClass(item, index)">
-        <template v-for="field in tableFields">
+    <template v-for="(item, itemIndex) in tableData">
+      <tr @dblclick="onRowDoubleClicked(item, $event)" 
+        :key="itemIndex"
+        :item-index="itemIndex" 
+        :render="onRowChanged(item)" 
+        :class="onRowClass(item, itemIndex)"
+        @click="onRowClicked(item, $event)" 
+      >
+        <template v-for="(field, fieldIndex) in tableFields">
           <template v-if="field.visible">
             <template v-if="isSpecialField(field.name)">
-              <td v-if="extractName(field.name) == '__sequence'" :class="['vuetable-sequence', field.dataClass]"
-                v-html="renderSequence(index)">
-              </td>
-              <td v-if="extractName(field.name) == '__handle'" :class="['vuetable-handle', field.dataClass]"
+              <td v-if="extractName(field.name) == '__sequence'" 
+                :key="fieldIndex"
+                :class="['vuetable-sequence', field.dataClass]"
+                v-html="renderSequence(itemIndex)"
+              ></td>
+              <td v-if="extractName(field.name) == '__handle'" 
+                :key="fieldIndex"
+                :class="['vuetable-handle', field.dataClass]"
                 v-html="renderIconTag(['handle-icon', css.handleIcon])"
               ></td>
-              <td v-if="extractName(field.name) == '__checkbox'" :class="['vuetable-checkboxes', field.dataClass]">
+              <td v-if="extractName(field.name) == '__checkbox'" 
+                :key="fieldIndex"
+                :class="['vuetable-checkboxes', field.dataClass]"
+              >
                 <input type="checkbox"
                   @change="toggleCheckbox(item, field.name, $event)"
                   :checked="rowSelected(item, field.name)">
               </td>
-              <td v-if="extractName(field.name) === '__component'" :class="['vuetable-component', field.dataClass]">
+              <td v-if="extractName(field.name) === '__component'" 
+                :key="fieldIndex"
+                :class="['vuetable-component', field.dataClass]"
+              >
                 <component :is="extractArgs(field.name)"
-                  :row-data="item" :row-index="index" :row-field="field.sortField"
+                  :row-data="item" :row-index="itemIndex" :row-field="field.sortField"
                 ></component>
               </td>
-              <td v-if="extractName(field.name) === '__slot'" :class="['vuetable-slot', field.dataClass]">
+              <td v-if="extractName(field.name) === '__slot'" 
+                :key="fieldIndex"
+                :class="['vuetable-slot', field.dataClass]"
+              >
                 <slot :name="extractArgs(field.name)"
-                  :row-data="item" :row-index="index" :row-field="field.sortField"
+                  :row-data="item" :row-index="itemIndex" :row-field="field.sortField"
                 ></slot>
               </td>
             </template>
             <template v-else>
-              <td v-if="hasCallback(field)" :class="field.dataClass"
+              <td v-if="hasCallback(field)" 
+                :key="fieldIndex"
+                :class="field.dataClass"
+                v-html="callCallback(field, item)"
                 @click="onCellClicked(item, field, $event)"
                 @dblclick="onCellDoubleClicked(item, field, $event)"
                 @contextmenu="onCellRightClicked(item, field, $event)"
-                v-html="callCallback(field, item)"
-              >
-              </td>
-              <td v-else :class="field.dataClass"
+              ></td>
+              <td v-else 
+                :key="fieldIndex"
+                :class="field.dataClass"
+                v-html="getObjectValue(item, field.name, '')"
                 @click="onCellClicked(item, field, $event)"
                 @dblclick="onCellDoubleClicked(item, field, $event)"
                 @contextmenu="onCellRightClicked(item, field, $event)"
-                v-html="getObjectValue(item, field.name, '')"
-              >
-              </td>
-              </template>
+              ></td>
             </template>
           </template>
-        </tr>
-        <template v-if="useDetailRow">
+        </template>
+      </tr>
+      <template v-if="useDetailRow">
+        <transition :name="detailRowTransition" :key="itemIndex">
           <tr v-if="isVisibleDetailRow(item[trackBy])"
-            @click="onDetailRowClick(item, $event)"
             :class="[css.detailRowClass]"
+            @click="onDetailRowClick(item, $event)"
           >
-            <transition :name="detailRowTransition">
-              <td :colspan="countVisibleFields">
-                <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
-              </td>
-            </transition>
+            <td :colspan="countVisibleFields">
+              <component :is="detailRowComponent" :row-data="item" :row-index="itemIndex"></component>
+            </td>
           </tr>
-        </template>
-      </template>
-      <template v-if="displayEmptyDataRow">
-        <tr>
-          <td :colspan="countVisibleFields" class="vuetable-empty-result" v-html="noDataTemplate"></td>
-        </tr>
-      </template>
-      <template v-if="lessThanMinRows">
-        <tr v-for="i in blankRows" class="blank-row">
-          <template v-for="field in tableFields">
-            <td v-if="field.visible">&nbsp;</td>
-          </template>
-        </tr>
+        </transition>
       </template>
-    </tbody>
-  </table>
+    </template>
+    <template v-if="displayEmptyDataRow">
+      <tr>
+        <td :colspan="countVisibleFields" class="vuetable-empty-result" v-htm v-html="noDataTemplate"></td>
+      </tr>
+    </template>
+    <template v-if="lessThanMinRows">
+      <tr v-for="i in blankRows" class="blank-row" :key="i">
+        <template v-for="(field, fieldIndex) in tableFields">
+          <td v-if="field.visible" :key="fieldIndex">&nbsp;</td>
+        </template>
+      </tr>
+    </template>
+  </tbody>
+</table>
 </template>
 
 <script>
@@ -769,7 +823,7 @@ export default {
         return ''
       }
 
-      if (typeof this.$parent['getSortParam'] == 'function') {
+      if (typeof this.$parent['getSortParam'] === 'function') {
         return this.$parent['getSortParam'].call(this.$parent, this.sortOrder)
       }
 
@@ -785,7 +839,7 @@ export default {
 
         result += fieldName + '|' + this.sortOrder[i].direction + ((i+1) < this.sortOrder.length ? ',' : '');
       }
-
+      console.log('getDefaultSortParam: ', result)
       return result;
     },
     getAppendParams (params) {
diff --git a/src/main.js b/src/main.js
index f69ac02d..9bbd9abb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -388,14 +388,17 @@ let vm = new Vue({
     rowClassCB (data, index) {
       return (index % 2) === 0 ? 'odd' : 'even'
     },
-    queryParams (sortOrder, currentPage, perPage) {
-      return {
-        'sort': sortOrder[0].field + '|' + sortOrder[0].direction,
-        'order': sortOrder[0].direction,
-        'page': currentPage,
-        'per_page': perPage
-      }
-    },
+    /*
+     * Example of defining queryParams as a function
+     */
+    // queryParams (sortOrder, currentPage, perPage) {
+    //   return {
+    //     'sort': sortOrder[0].field + '|' + sortOrder[0].direction,
+    //     'order': sortOrder[0].direction,
+    //     'page': currentPage,
+    //     'per_page': perPage
+    //   }
+    // },
     onCellClicked (data, field, event) {
       console.log('cellClicked', field.name)
       if (field.name !== '__actions') {