feat: add columnPickerLabel for custom label (#375)

ghiscoding · Jul 20, 2024 · 0b86f12 · 0b86f12
1 parent d7825e7
commit 0b86f12
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 5 deletions.
diff --git a/src/examples/slickgrid/Example13.tsx b/src/examples/slickgrid/Example13.tsx
@@ -82,11 +82,27 @@ export default class Example13 extends React.Component<Props, State> {
 
   /* Define grid Options and Columns */
   defineGrid() {
+    // 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);
+
     const columnDefinitions: Column[] = [
       {
-        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,

diff --git a/src/slickgrid-react/global-grid-options.ts b/src/slickgrid-react/global-grid-options.ts
@@ -256,10 +256,14 @@ export const GlobalGridOptions: Partial<GridOption> = {
  * else we'll simply return the column name title
  */
 function pickerHeaderColumnValueExtractor(column: Column, gridOptions?: GridOption) {
+  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 + columnGroupSeparator + column.name;
+    return headerGroup + columnGroupSeparator + colName;
   }
-  return column?.name ?? '';
+  return colName;
 }
diff --git a/test/cypress/e2e/example13.cy.ts b/test/cypress/e2e/example13.cy.ts
@@ -1,6 +1,6 @@
 
 describe('Example 13 - 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', () => {
@@ -183,4 +183,42 @@ describe('Example 13 - 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('#grid13')
+        .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('#grid13')
+        .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();
+    });
+  });
 });