angular-slickgrid 8.14.1 → 9.0.0

package/test/cypress/e2e/example11.cy.ts

@@ -0,0 +1,86 @@
+describe('Example 11 - Add / Update / Highlight a Datagrid Item', () => {
+  const GRID_ROW_HEIGHT = 35;
+  const fullTitles = ['', 'Title', 'Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/example11`);
+    cy.get('h2').should('contain', 'Example 11: Add / Update / Highlight a Datagrid Item');
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#slickGridContainer-grid11')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should expect Task 0 to Task 4 on first 5 rows', () => {
+    const expectedTasks = ['Task 0', 'Task 1', 'Task 2', 'Task 3', 'Task 4'];
+
+    cy.get('#grid11')
+      .find('.slick-row')
+      .each(($row, index) => {
+        if (index > expectedTasks.length - 1) {
+          return;
+        }
+        cy.wrap($row).children('.slick-cell:nth(1)').should('contain', expectedTasks[index]);
+      });
+  });
+
+  it('should delete first row Task 0 from the grid', () => {
+    const expectedTasks = ['Task 1', 'Task 2', 'Task 3', 'Task 4'];
+
+    cy.get('#grid11').find('.slick-row').first().children('.slick-cell:nth(0)').click();
+
+    cy.get('#grid11')
+      .find('.slick-row')
+      .each(($row, index) => {
+        if (index > expectedTasks.length - 1) {
+          return;
+        }
+        cy.wrap($row).children('.slick-cell:nth(1)').should('contain', expectedTasks[index]);
+      });
+  });
+
+  it('should add 2 rows on the top of the grid', () => {
+    const expectedTasks = ['Task 1001', 'Task 1000', 'Task 1', 'Task 2', 'Task 3', 'Task 4'];
+
+    cy.get('[data-test="add-new-item-top-btn"]').click().click();
+
+    cy.get('#grid11')
+      .find('.slick-row')
+      .each(($row, index) => {
+        if (index > expectedTasks.length - 1) {
+          return;
+        }
+        cy.wrap($row).children('.slick-cell:nth(1)').should('contain', expectedTasks[index]);
+      });
+  });
+
+  it('should add 2 rows on the bottom of the grid', () => {
+    cy.get('[data-test="add-new-item-bottom-btn"]').click();
+
+    cy.get('#grid11').find('.slick-row').last().should('contain.text', 'Task 1002');
+  });
+
+  it('should click on highlight "Duration over 40" and expect few rows being highlighted in purple', () => {
+    cy.get('[data-test="highlight-duration40-btn"]').click();
+
+    cy.get('.slick-row.duration-bg').should('have.length.greaterThan', 1);
+  });
+
+  it('should scroll to bottom and expect last row to be "Task 1002"', () => {
+    cy.get('[data-test="scroll-bottom-btn"]').click();
+
+    cy.get('#grid11').find('.slick-row').last().should('contain.text', 'Task 1002');
+  });
+
+  it('should scroll to top and expect certain rows on top', () => {
+    // cy.get('[data-test="scroll-top-btn"]').click();
+    cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top');
+
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 1001');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 100');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
+  });
+});

package/test/cypress/e2e/example12.cy.ts

@@ -0,0 +1,269 @@
+import { format } from '@formkit/tempo';
+
+import { removeExtraSpaces } from '../plugins/utilities';
+
+describe('Example 12: Localization (i18n)', () => {
+  const fullEnglishTitles = ['', 'Title', 'Description', 'Duration', 'Start', 'Finish', 'Completed', 'Completed'];
+  const fullFrenchTitles = ['', 'Titre', 'Description', 'Durée', 'Début', 'Fin', 'Terminé', 'Terminé'];
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+
+    // create a console.log spy for later use
+    cy.window().then((win) => {
+      cy.spy(win.console, 'log');
+    });
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/example12`);
+    cy.get('h2').should('contain', 'Example 12: Localization (i18n)');
+  });
+
+  describe('English Locale', () => {
+    it('should have exact English Column Titles in the grid', () => {
+      cy.get('#grid12')
+        .find('.slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(fullEnglishTitles[index]));
+    });
+
+    it('should have 0 row selection count shown in the grid left footer', () => {
+      cy.get('#slickGridContainer-grid12')
+        .find('.slick-custom-footer')
+        .find('div.left-footer')
+        .should(($span) => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          expect(text).to.eq(`0 items selected`);
+        });
+    });
+
+    it('should have some metrics shown in the grid right footer', () => {
+      cy.get('#slickGridContainer-grid12')
+        .find('.slick-custom-footer')
+        .find('.right-footer')
+        .should(($span) => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          const dateFormatted = format(new Date(), 'YYYY-MM-DD, hh:mm a');
+          expect(text).to.eq(`Last Update ${dateFormatted} | 1500 of 1500 items`);
+        });
+    });
+
+    it('should filter certain tasks with the word "ask 1" and expect filter to use contain/include text', () => {
+      const tasks = ['Task 1', 'Task 10', 'Task 11', 'Task 12'];
+
+      cy.get('.grid-canvas').find('.slick-row').should('be.visible');
+
+      cy.get('input.filter-title').type('ask 1');
+
+      cy.get('#grid12')
+        .find('.slick-row')
+        .each(($row, index) => {
+          if (index > tasks.length - 1) {
+            return;
+          }
+          cy.wrap($row).children('.slick-cell:nth(1)').should('contain', tasks[index]);
+        });
+    });
+  });
+
+  describe('French locale', () => {
+    it('should reset filters and switch locale to French', () => {
+      cy.get('#grid12').find('button.slick-grid-menu-button').click();
+
+      cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click();
+
+      cy.get('[data-test=language-button]').click();
+
+      cy.get('[data-test=selected-locale]').should('contain', 'fr.json');
+    });
+
+    it('should have French Column Titles in the grid after switching locale', () => {
+      cy.get('#grid12')
+        .find('.slick-header-columns')
+        .children()
+        .each(($child, index) => expect($child.text()).to.eq(fullFrenchTitles[index]));
+    });
+
+    it('should have 0 row selection count shown in the grid left footer', () => {
+      cy.get('#slickGridContainer-grid12')
+        .find('.slick-custom-footer')
+        .find('div.left-footer')
+        .should(($span) => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          expect(text).to.eq(`0 éléments sélectionnés`);
+        });
+    });
+
+    it('should have some metrics shown in the grid right footer', () => {
+      cy.get('#slickGridContainer-grid12')
+        .find('.slick-custom-footer')
+        .find('.right-footer')
+        .should(($span) => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          const dateFormatted = format(new Date(), 'YYYY-MM-DD, hh:mm a');
+          expect(text).to.eq(`Dernière mise à jour ${dateFormatted} | 1500 de 1500 éléments`);
+        });
+    });
+
+    it('should filter certain tasks', () => {
+      const tasks = ['Tâche 1', 'Tâche 10', 'Tâche 11', 'Tâche 12'];
+
+      cy.get('.grid-canvas').find('.slick-row').should('be.visible');
+
+      cy.get('input.filter-title').type('âche 1');
+
+      cy.get('#grid12')
+        .find('.slick-row')
+        .each(($row, index) => {
+          if (index > tasks.length - 1) {
+            return;
+          }
+          cy.wrap($row).children('.slick-cell:nth(1)').should('contain', tasks[index]);
+        });
+    });
+
+    it('should reset filters before filtering duration', () => {
+      cy.get('#grid12').find('button.slick-grid-menu-button').click();
+
+      cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Supprimer tous les filtres').click();
+    });
+
+    it('should filter duration with slider filter', () => {
+      cy.get('.filter-duration input[type=range]').as('range').invoke('val', 30).trigger('change', { force: true });
+
+      cy.wait(10);
+
+      cy.get('#grid12')
+        .find('.slick-row')
+        .each(($row, index) => {
+          let fullCellWidth: number;
+
+          // only checks first 5 rows
+          if (index > 5) {
+            return;
+          }
+
+          // get full cell width of the first cell, then return
+          cy.wrap($row)
+            .children('.slick-cell:nth(3)')
+            .first()
+            .then(($cell) => (fullCellWidth = $cell.width() as number));
+
+          cy.wrap($row)
+            .children('.slick-cell:nth(3)')
+            .children()
+            .should('not.have.css', 'background-color', 'rgb(255, 0, 0)')
+            .should(($el) => {
+              // calculate 25% and expect the element width to be about the calculated size with a (+/-)1px precision
+              const expectedWidth = fullCellWidth * 0.3;
+              expect(($el.width() as number) + 1).greaterThan(expectedWidth);
+            });
+        });
+    });
+  });
+
+  describe('Row Selection', () => {
+    it('should switch locale back to English and reset all Filters', () => {
+      cy.get('[data-test=language-button]').click();
+
+      cy.get('[data-test=selected-locale]').should('contain', 'en.json');
+
+      cy.get('#grid12').find('button.slick-grid-menu-button').click();
+
+      cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click();
+    });
+
+    it('should hover over the Title column and click on "Sort Descending" command', () => {
+      cy.get('#slickGridContainer-grid12')
+        .find('.slick-header-column:nth(1)')
+        .trigger('mouseover')
+        .children('.slick-header-menu-button')
+        .should('be.hidden')
+        .invoke('show')
+        .click();
+
+      cy.get('.slick-header-menu .slick-menu-command-list')
+        .should('be.visible')
+        .children('.slick-menu-item:nth-of-type(4)')
+        .children('.slick-menu-content')
+        .should('contain', 'Sort Descending')
+        .click();
+
+      cy.get('.slick-row').children('.slick-cell:nth(1)').first().should('contain', 'Task 1499');
+    });
+
+    it('should select the row with "Task 1497" and expect the Grid State to be called with it in the console', () => {
+      cy.get('#slickGridContainer-grid12').as('grid12');
+
+      cy.get('#grid12')
+        .contains('Task 1497')
+        .parent()
+        .children('.slick-cell-checkboxsel')
+        .find('input[type=checkbox]')
+        .click({ force: true });
+
+      cy.window().then((win) => {
+        expect(win.console.log).to.have.callCount(2);
+        expect(win.console.log).to.be.calledWith('Grid State changed:: ', {
+          newValues: { gridRowIndexes: [2], dataContextIds: [1497], filteredDataContextIds: [1497] },
+          type: 'rowSelection',
+        });
+      });
+    });
+
+    it('should scroll to bottom of the grid then select "Task 4"', () => {
+      cy.get('#slickGridContainer-grid12').as('grid12');
+
+      cy.get('@grid12').find('.slick-viewport-top.slick-viewport-left').scrollTo('bottom').wait(10);
+
+      cy.get('#grid12').contains('Task 4').parent().children('.slick-cell-checkboxsel').find('input[type=checkbox]').click({ force: true });
+
+      cy.window().then((win) => {
+        expect(win.console.log).to.have.callCount(2);
+        expect(win.console.log).to.be.calledWith('Grid State changed:: ', {
+          newValues: { gridRowIndexes: [1495, 2], dataContextIds: [1497, 4], filteredDataContextIds: [1497, 4] },
+          type: 'rowSelection',
+        });
+      });
+    });
+
+    it('should filter the Tasks column with number 4 and expect only "Task 4" visible in the grid', () => {
+      cy.get('#slickGridContainer-grid12').as('grid12');
+
+      cy.get('.grid-canvas').find('.slick-row').should('be.visible');
+
+      cy.get('input.filter-title').type('4');
+
+      cy.get('@grid12').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1);
+
+      cy.get('@grid12').find('.slick-row').children().filter('.slick-cell.selected:nth(1)').contains('Task 4');
+    });
+
+    it('should scroll back to the top and expect to see "Task 1497" still selected', () => {
+      cy.get('#slickGridContainer-grid12').as('grid12');
+
+      cy.get('.grid-canvas').find('.slick-row').should('be.visible');
+
+      cy.get('@grid12').find('.slick-viewport-top.slick-viewport-left').scrollTo('top').wait(10);
+
+      cy.get('@grid12').find('.slick-row').children().filter('.slick-cell-checkboxsel.selected').should('have.length', 1);
+
+      cy.get('@grid12').find('.slick-row').children().filter('.slick-cell.selected:nth(1)').contains('Task 1497');
+    });
+
+    it('should have 2 row selection count shown in the grid left footer', () => {
+      cy.get('#slickGridContainer-grid12')
+        .find('.slick-custom-footer')
+        .find('div.left-footer')
+        .should(($span) => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          expect(text).to.eq(`2 items selected`);
+        });
+    });
+  });
+});

package/test/cypress/e2e/example13.cy.ts

@@ -0,0 +1,246 @@
+describe('Example 13 - Grouping & Aggregators', () => {
+  const fullTitles = ['Id Click me', 'Title', 'Duration', '% Complete', 'Start', 'Finish', 'Cost', 'Effort Driven'];
+  const GRID_ROW_HEIGHT = 35;
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/example13`);
+    cy.get('h2').should('contain', 'Example 13: Grouping & Aggregators');
+  });
+
+  it('should have exact column titles on 1st grid', () => {
+    cy.get('#grid14')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  describe('Grouping Tests', () => {
+    it('should "Group by Duration & sort groups by value" then Collapse All and expect only group titles', () => {
+      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="group-duration-sort-value-btn"]').click();
+      cy.get('[data-test="collapse-all-btn"]').click();
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should(
+        'have.length',
+        1
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+        'contain',
+        'Duration: 0'
+      );
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+        'contain',
+        'Duration: 1'
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+        'contain',
+        'Duration: 2'
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+        'contain',
+        'Duration: 3'
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 4}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+        'contain',
+        'Duration: 4'
+      );
+    });
+
+    it('should click on Expand All columns and expect 1st row as grouping title and 2nd row as a regular row', () => {
+      cy.get('[data-test="add-50k-rows-btn"]').click();
+      cy.get('[data-test="group-duration-sort-value-btn"]').click();
+      cy.get('[data-test="expand-all-btn"]').click();
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should(
+        'have.length',
+        1
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(0) .slick-group-title`).should(
+        'contain',
+        'Duration: 0'
+      );
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(2)`).should('contain', '0');
+    });
+
+    it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be collapsed and 3rd row to have group totals', () => {
+      cy.get('[data-test="group-duration-effort-btn"]').click();
+
+      cy.get(
+        `[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`
+      ).should('have.length', 1);
+      cy.get(
+        `[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`
+      ).should('contain', 'Duration: 0');
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-toggle.collapsed`).should(
+        'have.length',
+        1
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-title`).should(
+        'contain',
+        'Effort-Driven: False'
+      );
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-1 .slick-group-toggle.collapsed`).should(
+        'have.length',
+        1
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-1 .slick-group-title`).should(
+        'contain',
+        'Effort-Driven: True'
+      );
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should(
+        'contain',
+        'Total: 0'
+      );
+    });
+
+    it('should "Group by Duration then Effort-Driven then Percent" and expect fist 2 rows to be expanded, 3rd row to be collapsed then 4th row to have group total', () => {
+      cy.get('[data-test="group-duration-effort-percent-btn"]').click();
+
+      cy.get(
+        `[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`
+      ).should('have.length', 1);
+      cy.get(
+        `[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`
+      ).should('contain', 'Duration: 0');
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-toggle.expanded`).should(
+        'have.length',
+        1
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"].slick-group-level-1 .slick-group-title`).should(
+        'contain',
+        'Effort-Driven: False'
+      );
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-2 .slick-group-toggle.collapsed`).should(
+        'have.length',
+        1
+      );
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"].slick-group-level-2 .slick-group-title`).contains(
+        /^% Complete: [0-9]/
+      );
+
+      cy.get(
+        `[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`
+      ).contains(/^Avg: [0-9]%$/);
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"].slick-group-totals.slick-group-level-2`)
+        .find('.slick-cell:nth(3)')
+        .contains('Avg: ');
+    });
+  });
+
+  describe('Diverse Input Text Filters with multiple symbol variances', () => {
+    it('should clear all Groupings', () => {
+      cy.get('[data-test="clear-grouping-btn"]').click();
+    });
+
+    it('should return 500 rows using "Ta*33" (starts with "Ta" + ends with 33)', () => {
+      cy.get('.search-filter.filter-title').clear().type('Ta*3');
+
+      cy.get('.item-count').should('contain', 5000);
+
+      cy.get('.search-filter.filter-title').clear().type('Ta*33');
+
+      cy.get('.item-count').should('contain', 500);
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 33');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 133');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 233');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 333');
+    });
+
+    it('should return 40000 rows using "Ta*" (starts with "Ta")', () => {
+      cy.get('.search-filter.filter-title').clear().type('Ta*');
+
+      cy.get('.item-count').should('contain', 50000);
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 0');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
+    });
+
+    it('should return 500 rows using "*11" (ends with "11")', () => {
+      cy.get('.search-filter.filter-title').clear().type('*11');
+
+      cy.get('.item-count').should('contain', 500);
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 11');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 21');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 31');
+    });
+
+    it('should return 497 rows using ">222" (greater than 222)', () => {
+      cy.get('.search-filter.filter-sel').clear().type('>222');
+
+      cy.get('.item-count').should('contain', 497);
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 311');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 411');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 511');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 611');
+    });
+
+    it('should return 499 rows using "<>311" (not equal to 311)', () => {
+      cy.get('.search-filter.filter-sel').clear().type('<>311');
+
+      cy.get('.item-count').should('contain', 499);
+
+      cy.get('.search-filter.filter-sel').clear().type('!=311');
+
+      cy.get('.item-count').should('contain', 499);
+
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 11');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 111');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 211');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 3}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 411');
+      cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 4}px);"] > .slick-cell:nth(1)`).should('contain', 'Task 511');
+    });
+
+    it('should return 1 rows using "=311" or "==311" (equal to 311)', () => {
+      cy.get('.search-filter.filter-sel').clear().type('=311');
+
+      cy.get('.item-count').should('contain', 1);
+
+      cy.get('.search-filter.filter-sel').clear().type('==311');
+
+      cy.get('.item-count').should('contain', 1);
+
+      cy.get(`[style="transform: translateY(${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();
+    });
+  });
+});