fix(row-grouping): sorting with grouped rows (#53)

Co-authored-by: Timo Wolf <timowolf@users.noreply.github.com>
siemens · Jun 24, 2024 · 18b8d90 · 18b8d90
1 parent 6271d58
commit 18b8d90
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -47,7 +47,7 @@ import { ColumnChangesService } from '../services/column-changes.service';
 import { DimensionsHelper } from '../services/dimensions-helper.service';
 import { throttleable } from '../utils/throttle';
 import { adjustColumnWidths, forceFillColumnWidths } from '../utils/math';
-import { sortRows } from '../utils/sort';
+import { sortGroupedRows, sortRows } from '../utils/sort';
 
 @Component({
   selector: 'ngx-datatable',
@@ -1257,6 +1257,13 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit, After
   }
 
   private sortInternalRows(): void {
-    this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
+    if (this.groupedRows && this.groupedRows.length) {
+      const sortOnGroupHeader = this.sorts?.find(sortColumns => sortColumns.prop === this._groupRowsBy);
+      this.groupedRows = this.groupArrayBy(this._rows, this._groupRowsBy);
+      this.groupedRows = sortGroupedRows(this.groupedRows, this._internalColumns, this.sorts, sortOnGroupHeader);
+      this._internalRows = [...this._internalRows];
+    } else {
+      this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
+    }
   }
 }
diff --git a/projects/ngx-datatable/src/lib/utils/sort.ts b/projects/ngx-datatable/src/lib/utils/sort.ts
@@ -119,3 +119,13 @@ export function sortRows(rows: any[], columns: any[], dirs: SortPropDir[]): any[
     return rowToIndexMap.get(rowA) < rowToIndexMap.get(rowB) ? -1 : 1;
   });
 }
+
+export function sortGroupedRows(groupedRows: any[], columns: any[], dirs: SortPropDir[], sortOnGroupHeader: SortPropDir): any[] {
+  if (sortOnGroupHeader) {
+    groupedRows = sortRows(groupedRows, columns, [{
+      dir: sortOnGroupHeader.dir,
+      prop: 'key'
+    }]);
+  }
+  return groupedRows.map(group => ({ ...group, value: sortRows(group.value, columns, dirs) }));
+}
diff --git a/src/app/basic/row-grouping.component.ts b/src/app/basic/row-grouping.component.ts
@@ -1,7 +1,8 @@
-import { SelectionType } from './../../../projects/ngx-datatable/src/lib/types/selection.type';
 import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import { NgStyle } from '@angular/common';
+
 import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
+import { SelectionType } from './../../../projects/ngx-datatable/src/lib/types/selection.type';
 
 @Component({
   selector: 'row-grouping-demo',
@@ -50,7 +51,7 @@ import { ColumnMode } from 'projects/ngx-datatable/src/public-api';
         </ngx-datatable-group-header>
 
         <!-- Row Column Template -->
-        <ngx-datatable-column name="Exp. Pay." prop="" editable="true" frozenLeft="True">
+        <ngx-datatable-column name="Exp. Pay." prop="" editable="true" frozenLeft="True" [sortable]="false">
           <ng-template
             ngx-datatable-cell-template
             let-rowIndex="rowIndex"
@@ -262,8 +263,9 @@ export class RowGroupingComponent {
   }
 
   updateValue(event, cell, rowIndex) {
+    const index = rowIndex.split('-')[1];
     this.editing[rowIndex + '-' + cell] = false;
-    this.rows[rowIndex][cell] = event.target.value;
+    this.rows[index][cell] = event.target.value;
     this.rows = [...this.rows];
   }