current row number for grouped tables

xaksis · Feb 17, 2021 · 323207d · 323207d
1 parent 7d18500
commit 323207d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 16 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -28,7 +28,6 @@
       styleClass="vgt-table bordered"
       :sort-options="{
         enabled: true,
-        initialSortBy: [{field: 'name', type: 'asc'}],
       }"
       :search-options="{
         enabled: true,

diff --git a/dev/grouped-table.vue b/dev/grouped-table.vue
@@ -19,12 +19,12 @@
     }"
     :pagination-options="{
       enabled: true,
-      perPage: 2,
+      perPage: 5,
     }"
     :group-options="{
       enabled: true,
       headerPosition: 'top',
-      collapsable: true,
+      collapsable: false,
     }"
     styleClass="vgt-table condensed bordered"
     ref="groupedTable"
@@ -84,7 +84,8 @@ export default {
           ],
         },
         {
-          name: 'Reptile Total',
+          label: 'Reptile Total',
+          mode: 'span',
           diet: '',
           count: '',
           children: [

diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -34,6 +34,7 @@
           :ofText="ofText"
           :pageText="pageText"
           :allText="allText"
+          :paginated="paginated"
         ></vgt-pagination>
       </slot>
       <vgt-global-search
@@ -173,8 +174,8 @@
 
           <!-- Table body starts here -->
           <tbody
-            v-for="(headerRow, index) in paginated"
-            :key="index"
+            v-for="(headerRow, hIndex) in paginated"
+            :key="hIndex"
           >
             <!-- if group row header is at the top -->
             <vgt-header-row
@@ -191,7 +192,7 @@
               :class="getRowStyleClass(headerRow)"
               :get-classes="getClasses"
               :full-colspan="fullColspan"
-              :groupIndex="index"
+              :groupIndex="hIndex"
               @on-select-group-change="toggleSelectGroup($event, headerRow)"
             >
               <template
@@ -223,7 +224,7 @@
                 v-if="lineNumbers"
                 class="line-numbers"
               >
-                {{ getCurrentIndex(index) }}
+                {{ getCurrentIndex(row.originalIndex) }}
               </th>
               <th
                 v-if="selectable"
@@ -330,6 +331,7 @@
           :ofText="ofText"
           :pageText="pageText"
           :allText="allText"
+          :paginated="paginated"
         ></vgt-pagination>
       </slot>
     </div>
@@ -691,14 +693,14 @@ export default {
     totalRowCount() {
       let total = 0;
       each(this.processedRows, (headerRow) => {
-        total += headerRow.children ? headerRow.children.length : 1;
+        total += headerRow.children ? headerRow.children.length : 0;
       });
       return total;
     },
     totalPageRowCount() {
       let total = 0;
       each(this.paginated, (headerRow) => {
-        total += headerRow.children ? headerRow.children.length : 1;
+        total += headerRow.children ? headerRow.children.length : 0;
       });
       return total;
     },
@@ -1386,7 +1388,25 @@ export default {
       this.filteredRows = computedRows;
     },
 
-    getCurrentIndex(index) {
+    getCurrentIndex(rowId) {
+      console.log(rowId);
+      let index = 0;
+      let found = false;
+      for (let i = 0; i < this.paginated.length; i += 1) {
+        const headerRow = this.paginated[i];
+        const { children } = headerRow;
+        if (children && children.length) {
+          for (let j = 0; j < children.length; j += 1) {
+            const c = children[j];
+            if (c.originalIndex === rowId) {
+              found = true;
+              break;
+            }
+            index += 1;
+          }
+        }
+        if (found) break;
+      }
       return ((this.currentPage - 1) * this.currentPerPage) + index + 1;
     },
 

diff --git a/src/components/VgtPagination.vue b/src/components/VgtPagination.vue
@@ -82,6 +82,7 @@ export default {
     ofText: { default: 'of' },
     pageText: { default: 'page' },
     allText: { default: 'All' },
+    paginated: {},
   },
 
   data() {
@@ -127,7 +128,8 @@ export default {
     // Current displayed items
     paginatedInfo() {
       let first = ((this.currentPage - 1) * this.currentPerPage) + 1;
-      const last = Math.min(this.total, this.currentPage * this.currentPerPage);
+      let last = Math.min(this.total, this.currentPage * this.currentPerPage);
+      // last = last - this.paginated.length;
 
       if (last === 0) {
         first = 0;

diff --git a/src/components/utils/sort.js b/src/components/utils/sort.js
@@ -1,4 +1,9 @@
 const DEFAULT_SORT_TYPE = 'asc';
+const SORT_TYPES = {
+  Ascending: 'asc',
+  Descending: 'desc',
+  None: 'none',
+};
 
 function getColumnFirstSortType(column) {
   return column.firstSortType || DEFAULT_SORT_TYPE;
@@ -11,9 +16,10 @@ function getCurrentPrimarySort(sortArray, column) {
 }
 
 function getNextSort(currentSort) {
-  return (currentSort === 'asc')
-    ? 'desc'
-    : DEFAULT_SORT_TYPE;
+  if (currentSort === SORT_TYPES.Ascending) {
+    return SORT_TYPES.Descending;
+  }
+  return SORT_TYPES.Ascending;
 }
 
 function getIndex(sortArray, column) {
@@ -25,9 +31,10 @@ function getIndex(sortArray, column) {
 
 exports.primarySort = (sortArray, column) => {
   const currentPrimarySort = getCurrentPrimarySort(sortArray, column);
+  const nextPrimarySort = getNextSort(currentPrimarySort);
   return [{
     field: column.field,
-    type: currentPrimarySort ? getNextSort(currentPrimarySort) : getColumnFirstSortType(column),
+    type: currentPrimarySort ? nextPrimarySort : getColumnFirstSortType(column),
   }];
 };