feat(extension): add column position option for Row Detail icon (#419)

* feat(extension): add column position option for Row Detail icon

src/app/examples/grid-rowdetail.component.ts

@@ -87,6 +87,9 @@ export class GridRowDetailComponent implements OnInit {
       },
       datasetIdPropertyName: 'rowId', // optionally use a different "id"
       rowDetailView: {
+        // optionally change the column index position of the icon (defaults to 0)
+        // columnIndexPosition: 1,
+
         // We can load the "process" asynchronously in 2 different ways (httpClient OR even Promise)
         process: (item) => this.simulateServerAsyncCall(item),
         // process: (item) => this.http.get(`api/item/${item.id}`),

src/app/modules/angular-slickgrid/extensions/__tests__/rowDetailViewExtension.spec.ts

@@ -139,7 +139,10 @@ describe('rowDetailViewExtension', () => {
 
     beforeEach(() => {
       gridOptionsMock.datasetIdPropertyName = 'id';
-      columnsMock = [{ id: 'field1', field: 'field1', width: 100, cssClass: 'red' }];
+      columnsMock = [
+        { id: 'field1', field: 'field1', width: 100, cssClass: 'red' },
+        { id: 'field2', field: 'field2', width: 50 }
+      ];
       jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
       jest.spyOn(SharedService.prototype, 'dataView', 'get').mockReturnValue(dataViewStub);
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
@@ -211,7 +214,30 @@ describe('rowDetailViewExtension', () => {
           field: 'sel',
           id: '_detail_selector'
         },
-        { id: 'field1', field: 'field1', width: 100, cssClass: 'red' }
+        { id: 'field1', field: 'field1', width: 100, cssClass: 'red' },
+        { id: 'field2', field: 'field2', width: 50 },
+      ]);
+    });
+
+    it('should expect the column to be at a different column index position when "columnIndexPosition" is defined', () => {
+      gridOptionsMock.rowDetailView.columnIndexPosition = 2;
+      const instance = extension.create(columnsMock, gridOptionsMock);
+      const spy = jest.spyOn(instance, 'getColumnDefinition').mockReturnValue({ id: '_detail_selector', field: 'sel' });
+      extension.create(columnsMock, gridOptionsMock);
+
+      expect(spy).toHaveBeenCalled();
+      expect(columnsMock).toEqual([
+        { id: 'field1', field: 'field1', width: 100, cssClass: 'red' },
+        { id: 'field2', field: 'field2', width: 50 },
+        {
+          excludeFromColumnPicker: true,
+          excludeFromExport: true,
+          excludeFromGridMenu: true,
+          excludeFromHeaderMenu: true,
+          excludeFromQuery: true,
+          field: 'sel',
+          id: '_detail_selector'
+        },
       ]);
     });
   });

src/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.ts

@@ -117,14 +117,21 @@ export class RowDetailViewExtension implements Extension {
           // finally register the Row Detail View Plugin
           this._addon = new Slick.Plugins.RowDetailView(gridOptions.rowDetailView);
         }
-        const selectionColumn: Column = this._addon.getColumnDefinition();
-        if (typeof selectionColumn === 'object') {
-          selectionColumn.excludeFromExport = true;
-          selectionColumn.excludeFromColumnPicker = true;
-          selectionColumn.excludeFromGridMenu = true;
-          selectionColumn.excludeFromQuery = true;
-          selectionColumn.excludeFromHeaderMenu = true;
-          columnDefinitions.unshift(selectionColumn);
+        const iconColumn: Column = this._addon.getColumnDefinition();
+        if (typeof iconColumn === 'object') {
+          iconColumn.excludeFromExport = true;
+          iconColumn.excludeFromColumnPicker = true;
+          iconColumn.excludeFromGridMenu = true;
+          iconColumn.excludeFromQuery = true;
+          iconColumn.excludeFromHeaderMenu = true;
+
+          // column index position in the grid
+          const columnPosition = gridOptions && gridOptions.rowDetailView && gridOptions.rowDetailView.columnIndexPosition || 0;
+          if (columnPosition > 0) {
+            columnDefinitions.splice(columnPosition, 0, iconColumn);
+          } else {
+            columnDefinitions.unshift(iconColumn);
+          }
         }
       }
       return this._addon;

src/app/modules/angular-slickgrid/models/rowDetailView.interface.ts

@@ -2,15 +2,22 @@ import { Type } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
 export interface RowDetailView {
-  /** A CSS class to be added to the row detail */
-  cssClass?: string;
-
   /** Defaults to true, which will collapse all row detail views when user calls a sort. Unless user implements a sort to deal with padding */
   collapseAllOnSort?: boolean;
 
   /** Extra classes to be added to the collapse Toggle */
   collapsedClass?: string;
 
+  /**
+   * Defaults to 0, the column index position in the grid by default it will show as the first column (index 0).
+   * Also note that the index position might vary if you use other extensions, after each extension is created,
+   * it will add an offset to take into consideration (1.CheckboxSelector, 2.RowDetail, 3.RowMove)
+   */
+  columnIndexPosition?: number;
+
+  /** A CSS class to be added to the row detail */
+  cssClass?: string;
+
   /** Extra classes to be added to the expanded Toggle */
   expandedClass?: string;