Merge pull request #1445 from ghiscoding/feat/col-picker-label

feat: add `columnPickerLabel` for custom label, also fix #1442

Author: ghiscoding

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

@@ -44,11 +44,31 @@ export class GridGroupingComponent implements OnInit {
   textExportService = new TextExportService();
 
   ngOnInit(): void {
+    this.initializeGrid();
+  }
+
+  initializeGrid() {
+    // add a simple button with event listener on 1st column for testing purposes
+    // a simple button with click event
+    const nameElementColumn1 = document.createElement('div');
+    const btn = document.createElement('button');
+    const btnLabel = document.createElement('span');
+    btnLabel.className = 'mdi mdi-help-circle no-padding';
+    btn.dataset.test = 'col1-hello-btn';
+    btn.className = 'btn btn-outline-secondary btn-xs btn-icon ms-1';
+    btn.textContent = 'Click me';
+    btn.title = 'simple column header test with a button click listener';
+    btn.addEventListener('click', () => alert('Hello World'));
+    btn.appendChild(btnLabel);
+    nameElementColumn1.appendChild(document.createTextNode('Id '));
+    nameElementColumn1.appendChild(btn);
+
     this.columnDefinitions = [
       {
-        id: 'sel', name: '#', field: 'num', width: 40, type: FieldType.number,
+        id: 'sel', name: nameElementColumn1, field: 'num', type: FieldType.number,
+        columnPickerLabel: 'Custom Label', // add a custom label for the ColumnPicker/GridMenu when default header value extractor doesn't work for you ()
+        width: 140, maxWidth: 150,
         excludeFromExport: true,
-        maxWidth: 70,
         resizable: true,
         filterable: true,
         selectable: false,

src/app/modules/angular-slickgrid/global-grid-options.ts

@@ -1,4 +1,4 @@
-import { Column, DelimiterType, EventNamingStyle, FileType, Filters, OperatorType, TreeDataOption } from '@slickgrid-universal/common';
+import { type Column, DelimiterType, EventNamingStyle, FileType, Filters, GridOption as GridOptionUniversal, OperatorType, type TreeDataOption } from '@slickgrid-universal/common';
 import type { GridOption, RowDetailView } from './models/index';
 
 /** Global Grid Options Defaults */
@@ -250,10 +250,15 @@ export const GlobalGridOptions: Partial<GridOption> = {
  * when using Column Header Grouping, we'll prefix the column group title
  * else we'll simply return the column name title
  */
-function pickerHeaderColumnValueExtractor(column: Column) {
-  const headerGroup = column && column.columnGroup || '';
+function pickerHeaderColumnValueExtractor(column: Column, gridOptions?: GridOptionUniversal) {
+  let colName = column?.columnPickerLabel ?? column?.name ?? '';
+  if (colName instanceof HTMLElement || colName instanceof DocumentFragment) {
+    colName = colName.textContent || '';
+  }
+  const headerGroup = column?.columnGroup || '';
+  const columnGroupSeparator = gridOptions?.columnGroupSeparator ?? ' - ';
   if (headerGroup) {
-    return headerGroup + ' - ' + column.name;
+    return headerGroup + columnGroupSeparator + colName;
   }
-  return column && column.name || '';
-}
+  return colName;
+}

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

@@ -1,7 +1,7 @@
 import type { TranslateService } from '@ngx-translate/core';
 import type { Column, GridOption as UniversalGridOption } from '@slickgrid-universal/common';
 
-import type { RowDetailView } from './index';
+import type { RowDetailView } from './rowDetailView.interface';
 
 export interface GridOption<C extends Column = Column> extends UniversalGridOption<C> {
   /** ngx-translate i18n translation service instance */

test/cypress/e2e/example14.cy.ts

@@ -1,5 +1,5 @@
 describe('Example 14 - Grouping & Aggregators', () => {
-  const fullTitles = ['#', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Cost', 'Effort Driven'];
+  const fullTitles = ['Id Click me', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Cost', 'Effort Driven'];
   const GRID_ROW_HEIGHT = 35;
 
   it('should display Example title', () => {
@@ -182,4 +182,42 @@ describe('Example 14 - Grouping & Aggregators', () => {
       cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 311');
     });
   });
+
+  describe('Column Header with HTML Elements', () => {
+    it('should trigger an alert when clicking on the 1st column button inside its header', () => {
+      const stub = cy.stub();
+      cy.on('window:alert', stub);
+
+      cy.get('button[data-test=col1-hello-btn]')
+        .click({ force: true })
+        .then(() => expect(stub.getCall(0)).to.be.calledWith('Hello World'));
+    });
+
+    it('should open Column Picker and have a "Custom Label" as the 1st column label', () => {
+      cy.get('#grid14')
+        .find('.slick-header-column')
+        .first()
+        .trigger('mouseover')
+        .trigger('contextmenu')
+        .invoke('show');
+
+      cy.get('.slick-column-picker')
+        .find('.slick-column-picker-list li:nth-child(1) .checkbox-label')
+        .should('have.text', 'Custom Label');
+    });
+
+    it('should open Grid Menu and have a "Custom Label" as the 1st column label', () => {
+      cy.get('#grid14')
+        .find('button.slick-grid-menu-button')
+        .trigger('click')
+        .click({ force: true });
+
+      cy.get(`.slick-grid-menu:visible`)
+        .find('.slick-column-picker-list li:nth-child(1) .checkbox-label')
+        .should('have.text', 'Custom Label');
+
+      cy.get('[data-dismiss="slick-grid-menu"]')
+        .click();
+    });
+  });
 });