diff --git a/cypress/e2e/example-auto-scroll-when-dragging.cy.ts b/cypress/e2e/example-auto-scroll-when-dragging.cy.ts
index 0f99a3557..31a3c7dac 100644
--- a/cypress/e2e/example-auto-scroll-when-dragging.cy.ts
+++ b/cypress/e2e/example-auto-scroll-when-dragging.cy.ts
@@ -190,15 +190,15 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
   });
 
   it('should have a frozen grid with 4 containers with 2 columns on the left and 3 rows on the top after click Set/Clear Frozen button', () => {
-    cy.get('#myGrid [style="top:0px"]').should('have.length', 1);
-    cy.get('#myGrid2 [style="top:0px"]').should('have.length', 1);
+    cy.get('#myGrid [style="top: 0px;"]').should('have.length', 1);
+    cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 1);
 
     cy.get('#toggleFrozen').click();
 
-    cy.get('#myGrid [style="top:0px"]').should('have.length', 2 * 2);
-    cy.get('#myGrid2 [style="top:0px"]').should('have.length', 2 * 2);
-    cy.get('#myGrid .grid-canvas-left > [style="top:0px"]').children().should('have.length', 2 * 2);
-    cy.get('#myGrid2 .grid-canvas-left > [style="top:0px"]').children().should('have.length', 2 * 2);
+    cy.get('#myGrid [style="top: 0px;"]').should('have.length', 2 * 2);
+    cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 2 * 2);
+    cy.get('#myGrid .grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2);
+    cy.get('#myGrid2 .grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 2 * 2);
     cy.get('#myGrid .grid-canvas-top').children().should('have.length', 3 * 2);
     cy.get('#myGrid2 .grid-canvas-top').children().should('have.length', 3 * 2);
   });
@@ -268,8 +268,8 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
 
   it('should have a frozen & grouping by Duration grid after click Set/Clear grouping by Duration button', { scrollBehavior: false }, () => {
     cy.get('#toggleGroup').trigger('click');
-    cy.get('#myGrid [style="top:0px"]').should('have.length', 2 * 2);
-    cy.get('#myGrid2 [style="top:0px"]').should('have.length', 2 * 2);
+    cy.get('#myGrid [style="top: 0px;"]').should('have.length', 2 * 2);
+    cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 2 * 2);
     cy.get('#myGrid .grid-canvas-top.grid-canvas-left').contains('Duration');
     cy.get('#myGrid2 .grid-canvas-top.grid-canvas-left').contains('Duration');
   });
@@ -282,7 +282,7 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
       cy.get('@viewport').invoke('scrollTop').then(scrollAfter => {
         expect(scrollBefore).to.be.lessThan(scrollAfter);
         cy.dragEnd(selector);
-        cy.get(selector + ' [style="top:350px"].slick-group').should('not.be.hidden');;
+        cy.get(selector + ' [style="top: 350px;"].slick-group').should('not.be.hidden');;
       });
     });
   }
@@ -295,8 +295,8 @@ describe('Example - Auto scroll when dragging', { retries: 1 }, () => {
   it('should reset to default grid when click Set/Clear Frozen button and Set/Clear grouping button', () => {
     cy.get('#toggleFrozen').trigger('click');
     cy.get('#toggleGroup').trigger('click');
-    cy.get('#myGrid [style="top:0px"]').should('have.length', 1);
-    cy.get('#myGrid2 [style="top:0px"]').should('have.length', 1);
+    cy.get('#myGrid [style="top: 0px;"]').should('have.length', 1);
+    cy.get('#myGrid2 [style="top: 0px;"]').should('have.length', 1);
   });
 
 });
diff --git a/cypress/e2e/example-autotooltips.cy.ts b/cypress/e2e/example-autotooltips.cy.ts
index c1f60f2de..a9b786b89 100644
--- a/cypress/e2e/example-autotooltips.cy.ts
+++ b/cypress/e2e/example-autotooltips.cy.ts
@@ -34,22 +34,22 @@ describe('Example AutoTooltips Plugin', () => {
       .trigger('mousemove', 'bottomRight')
       .trigger('mouseup', 'bottomRight', { which: 1, force: true });
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l3.r3`).trigger('mouseover');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l3.r3`).trigger('mouseover');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l3.r3`).trigger('mouseover');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l3.r3`).should('contain', '01/01/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l3.r3`).trigger('mouseover');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell.l3.r3`).should('have.attr', 'title', '01/01/2009');
   });
 
   it('should hover over "Finish" cell to see tooltip', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).trigger('mouseover');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).trigger('mouseover');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).trigger('mouseover');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('contain', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).trigger('mouseover');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell.l4.r4`).should('not.have.attr', 'title', '01/05/2009');
   });
 });
\ No newline at end of file
diff --git a/cypress/e2e/example-checkbox-header-row.cy.ts b/cypress/e2e/example-checkbox-header-row.cy.ts
index a934e672e..b341a058c 100644
--- a/cypress/e2e/example-checkbox-header-row.cy.ts
+++ b/cypress/e2e/example-checkbox-header-row.cy.ts
@@ -118,8 +118,8 @@ describe('Example - Checkbox Header Row', () => {
 
     // Row index 3, 5 and 21 (last one will be on 2nd page)
     cy.get('input[type="checkbox"]:checked').should('have.length', 2); // 2x in current page and 1x in next page
-    cy.get('[style="top:75px"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
-    cy.get('[style="top:125px"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
+    cy.get('[style="top: 75px;"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
+    cy.get('[style="top: 125px;"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
   });
 
   it('should go to next page and expect 1 row selected in that second page', () => {
@@ -127,7 +127,7 @@ describe('Example - Checkbox Header Row', () => {
       .click();
 
     cy.get('input[type="checkbox"]:checked').should('have.length', 1); // only 1x row in page 2
-    cy.get('[style="top:100px"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
+    cy.get('[style="top: 100px;"] > .slick-cell:nth(0) input[type="checkbox"]').should('be.checked');
   });
 
   it('should click on "Select All" checkbox and expect all rows selected in current page', () => {
diff --git a/cypress/e2e/example-checkbox-row-select.cy.ts b/cypress/e2e/example-checkbox-row-select.cy.ts
index 76ca4b72b..37f919430 100644
--- a/cypress/e2e/example-checkbox-row-select.cy.ts
+++ b/cypress/e2e/example-checkbox-row-select.cy.ts
@@ -31,8 +31,8 @@ describe('Example - Checkbox Row Select', () => {
     });
 
     it('should be able to select first 2 rows and now expect 3 rows selected', () => {
-      cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();
-      cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();
+      cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) input[type=checkbox]`).click();
+      cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) input[type=checkbox]`).click();
 
       cy.get('#myGrid')
         .find('.slick-cell-checkboxsel input:checked')
@@ -43,7 +43,7 @@ describe('Example - Checkbox Row Select', () => {
       cy.get('#unselectRow5')
         .click();
 
-      cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) input[type=checkbox]`)
+      cy.get(`.slick-row[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0) input[type=checkbox]`)
         .should('not.be.checked');
 
       cy.get('#myGrid')
diff --git a/cypress/e2e/example-colspan.cy.ts b/cypress/e2e/example-colspan.cy.ts
index 2b2fbf11a..e605e873d 100644
--- a/cypress/e2e/example-colspan.cy.ts
+++ b/cypress/e2e/example-colspan.cy.ts
@@ -20,26 +20,26 @@ describe('Example - Column Span & Header Grouping', { retries: 1 }, () => {
     });
 
     it('should expect 1st row to be 1 column spanned to the entire width', () => {
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('not.exist');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.exist');
     });
 
     it('should expect 2nd row to be 4 columns and not be spanned', () => {
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '5 days');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).contains(/(true|false)/);
     });
 
     it('should expect 3rd row to be 1 column spanned to the entire width', () => {
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('not.exist');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('not.exist');
     });
 
     it('should expect 4th row to be 4 columns and not be spanned', () => {
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
-        cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', '5 days');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
+        cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).contains(/(true|false)/);
     });
 });
diff --git a/cypress/e2e/example-composite-editor-modal-dialog.cy.ts b/cypress/e2e/example-composite-editor-modal-dialog.cy.ts
index 9d2e4ade9..a45636663 100644
--- a/cypress/e2e/example-composite-editor-modal-dialog.cy.ts
+++ b/cypress/e2e/example-composite-editor-modal-dialog.cy.ts
@@ -23,11 +23,11 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
   });
 
   it('should expect first row to include "Task 0" and other specific properties', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Task 0');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '5 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', '01/01/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '01/05/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('exist');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 0');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '5 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', '01/01/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('exist');
   });
 
   it('should open the Edit Modal and expect same data to include "Task 0" and other specific properties', () => {
@@ -110,11 +110,11 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
 
     cy.wait(10);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Task 0000');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(5)`).should('contain', '01/01/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(6)`).should('contain', '01/05/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 0);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 0000');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(5)`).should('contain', '01/01/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(6)`).should('contain', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 0);
   });
 
   it('should open the Mass Update try to change "Duration" below 5 and expect it to become invalid', () => {
@@ -161,29 +161,29 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
   });
 
   it('Should expect to see "Duration" of "27 days" and "Effort-Driven" to be enabled accross the entire grid', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Task 0000');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 0000');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(1)`).should('contain', 'Task 4');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 4');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(1)`).should('contain', 'Task 5');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 5');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
   });
 
   it('Should expect an Alert about missing row selection before executing Mass Selection', () => {
@@ -198,8 +198,8 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
   });
 
   it('Should select row 2 and 3 and change ', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).click();
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).click();
 
     cy.get('[data-test="mass-selection-button"]').click();
 
@@ -223,31 +223,31 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
   });
 
   it('Should expect to see "Duration" of "27 days" and "Effort-Driven" to be enabled accross the entire grid', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Task 0000');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
-
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).should('contain', '7 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
-
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(3)`).should('contain', '7 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
-
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
-
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(1)`).should('contain', 'Task 4');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
-
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(1)`).should('contain', 'Task 5');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(3)`).should('contain', '27 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 0000');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 1');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).should('contain', '7 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 2');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(3)`).should('contain', '7 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 3');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 4');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).should('contain', 'Task 5');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3)`).should('contain', '27 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
   });
 
   it('Should open a Create Modal window and click on Effort-Driven then expect 3 validation errors', () => {
@@ -316,15 +316,15 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
   });
 
   it('Should expect to see "Duration" of "27 days" and "Effort-Driven" to be enabled accross the entire grid', () => {
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(1)`).should('contain', 'Task 8899');
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(2)`).should('contain', 'random text');
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(3)`).should('contain', '9 days');
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(4)`).each($cell => {
+    cy.get(`[style="top: 12500px;"] > .slick-cell:nth(1)`).should('contain', 'Task 8899');
+    cy.get(`[style="top: 12500px;"] > .slick-cell:nth(2)`).should('contain', 'random text');
+    cy.get(`[style="top: 12500px;"] > .slick-cell:nth(3)`).should('contain', '9 days');
+    cy.get(`[style="top: 12500px;"] > .slick-cell:nth(4)`).each($cell => {
       const htmlText = $cell.html();
       expect(htmlText).to.eq('<span class="percent-complete-bar" style="background:silver;width:44%" title="44%"></span>');
     });
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(6)`).should('contain', '');
-    cy.get(`[style="top:12500px"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
+    cy.get(`[style="top: 12500px;"] > .slick-cell:nth(5)`).should('contain', '02/02/2020');
+    cy.get(`[style="top: 12500px;"] > .slick-cell:nth(6)`).should('contain', '');
+    cy.get(`[style="top: 12500px;"] > .slick-cell:nth(7)`).find('.sgi-check').should('have.length', 1);
   });
 });
diff --git a/cypress/e2e/example-csp-header.cy.ts b/cypress/e2e/example-csp-header.cy.ts
index 4c2bcc661..b9d3e6f7c 100644
--- a/cypress/e2e/example-csp-header.cy.ts
+++ b/cypress/e2e/example-csp-header.cy.ts
@@ -16,7 +16,7 @@ describe('Example CSP Header - with Column Span & Header Grouping', () => {
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseUrl')}/examples/example-csp-header.html`);
     cy.get('h2').contains('Demonstrates');
-    cy.get('h2 + ul > li').first().contains('column span');
+    cy.get('h2 + ul > li').first().contains('CSP header');
   });
 
   it('should have exact column titles', () => {
@@ -27,26 +27,26 @@ describe('Example CSP Header - with Column Span & Header Grouping', () => {
   });
 
   it('should expect 1st row to be 1 column spanned to the entire width', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('not.exist');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.exist');
   });
 
   it('should expect 2nd row to be 4 columns and not be spanned', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', '5 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(3)`).contains(/(true|false)/);
   });
 
   it('should expect 3rd row to be 1 column spanned to the entire width', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('not.exist');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('not.exist');
   });
 
   it('should expect 4th row to be 4 columns and not be spanned', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', '5 days');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(3)`).contains(/(true|false)/);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', '5 days');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(2)`).should('contain', '01/05/2009');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(3)`).contains(/(true|false)/);
   });
 });
diff --git a/cypress/e2e/example-draggable-grouping.cy.ts b/cypress/e2e/example-draggable-grouping.cy.ts
index a54ecf214..1ed2f6a4a 100644
--- a/cypress/e2e/example-draggable-grouping.cy.ts
+++ b/cypress/e2e/example-draggable-grouping.cy.ts
@@ -38,13 +38,13 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="collapse-all-btn"]').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  1');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  2');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  3');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  4');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  1');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  2');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  3');
+      cy.get(`[style="top: ${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', () => {
@@ -52,11 +52,11 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="expand-all-btn"]').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(2)`).should('contain', '0');
     });
 
     it('should show 1 column title (Duration) shown in the pre-header section', () => {
@@ -66,14 +66,14 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
     it('should "Group by Duration then Effort-Driven" and expect 1st row to be expanded, 2nd row to be expanded and 3rd row to be a regular row', () => {
       cy.get('[data-test="group-duration-effort-btn"]').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Task');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', '0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '0');
     });
 
     it('should show 2 column titles (Duration, Effort-Driven) shown in the pre-header section', () => {
@@ -91,22 +91,22 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
     });
 
     it('should expect the grouping to be swapped as well in the grid', () => {
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Task');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(2)`).should('contain', '0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(2)`).should('contain', '0');
     });
 
     it('should use the preheader Toggle All button and expect all groups to now be collapsed', () => {
       cy.get('.slick-preheader-panel .slick-group-toggle-all').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  True');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  True');
     });
 
     it('should expand all rows with "Expand All" and expect all the Groups to be expanded and the Toogle All icon to be collapsed', () => {
@@ -152,21 +152,21 @@ describe('Example - Draggable Grouping', { retries: 1 }, () => {
     it('should use the preheader Toggle All button and expect all groups to now be expanded', () => {
       cy.get('.slick-preheader-panel .slick-group-toggle-all').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`)
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`)
         .should('have.css', 'marginLeft').and('eq', `0px`);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`)
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`)
         .should('have.css', 'marginLeft').and('eq', `15px`);
     });
 
     it('should use the preheader Toggle All button again and expect all groups to now be collapsed', () => {
       cy.get('.slick-preheader-panel .slick-group-toggle-all').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  True');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  False');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Effort-Driven:  True');
     });
 
     it('should clear all groups with "Clear all Grouping" and expect all the Groups to be collapsed and the Toogle All icon to be collapsed', () => {
diff --git a/cypress/e2e/example-frozen-columns-and-column-group.cy.ts b/cypress/e2e/example-frozen-columns-and-column-group.cy.ts
index 37adfd500..5ebef9c4a 100644
--- a/cypress/e2e/example-frozen-columns-and-column-group.cy.ts
+++ b/cypress/e2e/example-frozen-columns-and-column-group.cy.ts
@@ -21,16 +21,16 @@ describe('Example - Row Grouping Titles', () => {
     });
 
     it('should have a frozen grid on page load with 3 columns on the left and 4 columns on the right', () => {
-        cy.get('[style="top:0px"]').should('have.length', 2);
-        cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3);
-        cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 4);
+        cy.get('[style="top: 0px;"]').should('have.length', 2);
+        cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3);
+        cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4);
 
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
 
-        cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
-        cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+        cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+        cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
     });
 
     it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
@@ -49,14 +49,14 @@ describe('Example - Row Grouping Titles', () => {
         cy.contains('Remove Frozen Columns')
             .click({ force: true });
 
-        cy.get('[style="top:0px"]').should('have.length', 1);
-        cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 7);
+        cy.get('[style="top: 0px;"]').should('have.length', 1);
+        cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 7);
 
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '01/01/2009');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/05/2009');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '01/01/2009');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/05/2009');
     });
 
     it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
@@ -75,16 +75,16 @@ describe('Example - Row Grouping Titles', () => {
         cy.contains('Set 3 Frozen Columns')
             .click({ force: true });
 
-        cy.get('[style="top:0px"]').should('have.length', 2);
-        cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3);
-        cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 4);
+        cy.get('[style="top: 0px;"]').should('have.length', 2);
+        cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3);
+        cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 4);
 
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '0');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+        cy.get('.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
 
-        cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
-        cy.get('.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+        cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+        cy.get('.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
     });
 
     it('should have exact Column Pre-Header & Column Header Titles in the grid', () => {
diff --git a/cypress/e2e/example-frozen-columns-and-rows.cy.ts b/cypress/e2e/example-frozen-columns-and-rows.cy.ts
index ac62fa538..738b97023 100644
--- a/cypress/e2e/example-frozen-columns-and-rows.cy.ts
+++ b/cypress/e2e/example-frozen-columns-and-rows.cy.ts
@@ -22,84 +22,84 @@ describe('Example - Frozen Columns & Rows', { retries: 1 }, () => {
   });
 
   it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 6 columns on the right', () => {
-    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
-    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
-    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+    cy.get('[style="top: 0px;"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2);
 
     // top-left
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
 
     // top-right
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '0');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '0');
 
     // bottom-left
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 5');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 6');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 5');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 25px;"] > .slick-cell:nth(1)').should('contain', 'Task 6');
 
     // bottom-right
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '5');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(4)').should('contain', '6');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '5');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 25px;"] > .slick-cell:nth(4)').should('contain', '6');
   });
 
   it('should change frozen row and increment by 1 and expect changes to be reflected in the grid', () => {
     cy.get('input#frozenRow').type('{backspace}7');
     cy.get('button#setFrozenRow').click();
 
-    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
-    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 3 * 2);
-    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 8 * 2);
+    cy.get('[style="top: 0px;"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 3 * 2);
+    cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 8 * 2);
 
     // top-left
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
 
     // top-right
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '0');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '0');
 
     // bottom-left
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 8');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 25px;"] > .slick-cell:nth(1)').should('contain', 'Task 8');
 
     // bottom-right
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '7');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(4)').should('contain', '8');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '7');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 25px;"] > .slick-cell:nth(4)').should('contain', '8');
   });
 
   it('should change frozen column and increment by 1 and expect changes to be reflected in the grid', () => {
     cy.get('input#frozenColumn').type('{backspace}3');
     cy.get('button#setFrozenColumn').click();
 
-    cy.get('[style="top:0px"]').should('have.length', 2 * 2);
-    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 4 * 2);
-    cy.get('.grid-canvas-right > [style="top:0px"]').children().should('have.length', 7 * 2);
+    cy.get('[style="top: 0px;"]').should('have.length', 2 * 2);
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 4 * 2);
+    cy.get('.grid-canvas-right > [style="top: 0px;"]').children().should('have.length', 7 * 2);
 
     // top-left
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
 
     // top-right
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-top.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '0');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '0');
 
     // bottom-left
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:25px"] > .slick-cell:nth(1)').should('contain', 'Task 8');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 25px;"] > .slick-cell:nth(1)').should('contain', 'Task 8');
 
     // bottom-right
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '7');
-    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top:25px"] > .slick-cell:nth(3)').should('contain', '8');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 0px;"] > .slick-cell:nth(3)').should('contain', '7');
+    cy.get('.grid-canvas-bottom.grid-canvas-right > [style="top: 25px;"] > .slick-cell:nth(3)').should('contain', '8');
   });
 
   it('should click on "Select first 10 rows" button and expect first few rows to be selected', () => {
diff --git a/cypress/e2e/example-frozen-rows.cy.ts b/cypress/e2e/example-frozen-rows.cy.ts
index 2f44970b5..4887146db 100644
--- a/cypress/e2e/example-frozen-rows.cy.ts
+++ b/cypress/e2e/example-frozen-rows.cy.ts
@@ -22,71 +22,71 @@ describe('Example - Frozen Rows', { retries: 1 }, () => {
   });
 
   it('should have a frozen grid with 4 containers on page load with 3 columns on the left and 6 columns on the right', () => {
-    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
-    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+    cy.get('[style="top: 0px;"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2);
 
     // top-left
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '0');
 
     // bottom-left
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 49995');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '49995');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 49995');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '49995');
   });
 
   it('should change frozen row and increment by 1 and expect changes to be reflected in the grid', () => {
     cy.get('input#frozenRow').type('{backspace}7');
     cy.get('button#setFrozenRow').click();
 
-    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
-    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+    cy.get('[style="top: 0px;"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2);
 
     // top-left
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '0');
 
     // bottom-left
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 49993');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '49993');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 49993');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '49993');
   });
 
   it('should uncheck "frozen bottom rows" and set it', () => {
     cy.get('input#frozenBottomRows').uncheck();
     cy.get('button#setFrozenBottomRows').click();
 
-    cy.get('[style="top:0px"]').should('have.length', 2); // top + bottom
-    cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 11 * 2);
+    cy.get('[style="top: 0px;"]').should('have.length', 2); // top + bottom
+    cy.get('.grid-canvas-left > [style="top: 0px;"]').children().should('have.length', 11 * 2);
 
     // top-left
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-top.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 0');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-top.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '0');
 
     // bottom-left
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 7');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
-    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(7)').should('contain', '7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(0)').should('contain', '');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(1)').should('contain', 'Task 7');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(2)').should('contain', '5 days');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(4)').should('contain', '01/01/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(5)').should('contain', '01/05/2009');
+    cy.get('.grid-canvas-bottom.grid-canvas-left > [style="top: 0px;"] > .slick-cell:nth(7)').should('contain', '7');
   });
 });
diff --git a/cypress/e2e/example-grouping-esm.cy.ts b/cypress/e2e/example-grouping-esm.cy.ts
index ab0170d01..7d78b62c1 100644
--- a/cypress/e2e/example-grouping-esm.cy.ts
+++ b/cypress/e2e/example-grouping-esm.cy.ts
@@ -25,13 +25,13 @@ describe('Example - Grouping & Aggregators (ESM)', { retries: 1 }, () => {
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="collapse-all-btn"]').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  1');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  2');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  3');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  4');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  1');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  2');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  3');
+      cy.get(`[style="top: ${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', () => {
@@ -39,42 +39,42 @@ describe('Example - Grouping & Aggregators (ESM)', { retries: 1 }, () => {
       cy.get('[data-test="group-duration-sort-value-btn"]').click();
       cy.get('[data-test="expand-all-btn"]').click();
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task');
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
+      cy.get(`[style="top: ${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="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  True');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  True');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'total: 0');
+      cy.get(`[style="top: ${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="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/);
 
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^avg: [0-9]\%$/);
-      cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2`)
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^avg: [0-9]\%$/);
+      cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2`)
         .find('.slick-cell:nth(3)').contains('avg: ');
     });
   });
diff --git a/cypress/e2e/example-grouping.cy.ts b/cypress/e2e/example-grouping.cy.ts
index 002e69a69..7d33249c1 100644
--- a/cypress/e2e/example-grouping.cy.ts
+++ b/cypress/e2e/example-grouping.cy.ts
@@ -25,13 +25,13 @@ describe('Example - Grouping & Aggregators', { retries: 1 }, () => {
             cy.get('[data-test="group-duration-sort-value-btn"]').click();
             cy.get('[data-test="collapse-all-btn"]').click();
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  1');
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  2');
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  3');
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  4');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  1');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  2');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  3');
+            cy.get(`[style="top: ${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', () => {
@@ -39,42 +39,42 @@ describe('Example - Grouping & Aggregators', { retries: 1 }, () => {
             cy.get('[data-test="group-duration-sort-value-btn"]').click();
             cy.get('[data-test="expand-all-btn"]').click();
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Task');
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(2)`).should('contain', '0');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Task');
+            cy.get(`[style="top: ${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="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  True');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-toggle.collapsed`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  True');
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-0 .slick-cell:nth(2)`).should('contain', 'total: 0');
+            cy.get(`[style="top: ${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="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"].slick-group-level-0 > .slick-cell:nth(0) .slick-group-title`).should('contain', 'Duration:  0');
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-toggle.expanded`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"].slick-group-level-1 .slick-group-title`).should('contain', 'Effort-Driven:  False');
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-toggle.collapsed`).should('have.length', 1);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"].slick-group-level-2 .slick-group-title`).contains(/^% Complete: [0-9]/);
 
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^avg: [0-9]\%$/);
-            cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"].slick-group-totals.slick-group-level-2`)
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2 .slick-cell:nth(3)`).contains(/^avg: [0-9]\%$/);
+            cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"].slick-group-totals.slick-group-level-2`)
                 .find('.slick-cell:nth(3)').contains('avg: ');
         });
     });
diff --git a/cypress/e2e/example-plugin-custom-tooltip.cy.ts b/cypress/e2e/example-plugin-custom-tooltip.cy.ts
index fbb715011..a199d8e8f 100644
--- a/cypress/e2e/example-plugin-custom-tooltip.cy.ts
+++ b/cypress/e2e/example-plugin-custom-tooltip.cy.ts
@@ -27,7 +27,7 @@ describe('Example - Custom Tooltip', () => {
   });
 
   it('should mouse over 1st row checkbox column and NOT expect any tooltip to show since it is disabled on that column', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).as('checkbox0-cell');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).as('checkbox0-cell');
     cy.get('@checkbox0-cell').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
@@ -35,7 +35,7 @@ describe('Example - Custom Tooltip', () => {
   });
 
   it('should mouse over Task 1 cell and expect async tooltip to show', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).as('task1-cell');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).as('task1-cell');
     cy.get('@task1-cell').should('contain', 'Task 1');
     cy.get('@task1-cell').trigger('mouseover');
     cy.get('.slick-custom-tooltip').contains('loading...');
@@ -54,7 +54,7 @@ describe('Example - Custom Tooltip', () => {
   });
 
   it('should mouse over Task 5 cell and expect async tooltip to show', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(1)`).as('task5-cell');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(1)`).as('task5-cell');
     cy.get('@task5-cell').should('contain', 'Task 5');
     cy.get('@task5-cell').trigger('mouseover');
     cy.get('.slick-custom-tooltip').contains('loading...');
@@ -73,7 +73,7 @@ describe('Example - Custom Tooltip', () => {
   });
 
   it('should mouse over 6th row Description and expect full cell content to show in a tooltip because cell has ellipsis and is too long for the cell itself', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(2)`).as('desc5-cell');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(2)`).as('desc5-cell');
     cy.get('@desc5-cell').should('contain', 'This is a sample task description.');
     cy.get('@desc5-cell').trigger('mouseover');
 
@@ -85,7 +85,7 @@ describe('Example - Custom Tooltip', () => {
   });
 
   it('should mouse over 6th row Description 2 and expect regular tooltip title + concatenated full cell content when using "useRegularTooltipFromFormatterOnly: true"', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(3)`).as('desc2-5-cell');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(3)`).as('desc2-5-cell');
     cy.get('@desc2-5-cell').should('contain', 'This is a sample task description.');
     cy.get('@desc2-5-cell').trigger('mouseover');
 
@@ -96,7 +96,7 @@ describe('Example - Custom Tooltip', () => {
   });
 
   it('should mouse over 6th row Duration and expect a custom tooltip shown with 4 label/value pairs displayed', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(4)`).as('duration5-cell');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(4)`).as('duration5-cell');
     cy.get('@duration5-cell').should('contain', '5 days');
     cy.get('@duration5-cell').trigger('mouseover');
 
@@ -119,7 +119,7 @@ describe('Example - Custom Tooltip', () => {
   });
 
   it('should mouse over % Complete cell of Task 5 and expect regular tooltip to show with content "x %" where x is a number', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(5)`).as('percentage-cell');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 5}px;"] > .slick-cell:nth(5)`).as('percentage-cell');
     cy.get('@percentage-cell').find('.percent-complete-bar').should('exist');
     cy.get('@percentage-cell').trigger('mouseover');
 
diff --git a/cypress/e2e/example-row-detail-selection-and-move.cy.ts b/cypress/e2e/example-row-detail-selection-and-move.cy.ts
index 2c6643dc5..ca7e6afda 100644
--- a/cypress/e2e/example-row-detail-selection-and-move.cy.ts
+++ b/cypress/e2e/example-row-detail-selection-and-move.cy.ts
@@ -38,18 +38,18 @@ describe('Example - Row Detail/Row Move/Checkbox Selector Plugins', () => {
     });
 
     it('should drag opened Row Detail to another valid position in the grid', () => {
-        cy.get('[style="top:25px"] > .slick-cell.cell-reorder').as('moveIconTask1');
-        cy.get('[style="top:75px"] > .slick-cell.cell-reorder').as('moveIconTask3');
-        cy.get('[style="top:100px"]').as('expandIconTask4');
+        cy.get('[style="top: 25px;"] > .slick-cell.cell-reorder').as('moveIconTask1');
+        cy.get('[style="top: 75px;"] > .slick-cell.cell-reorder').as('moveIconTask3');
+        cy.get('[style="top: 100px;"]').as('expandIconTask4');
 
         cy.get('@moveIconTask3')
             .trigger('mousedown', { button: 0, force: true })
             .trigger('mousemove', 'bottomRight');
 
-        cy.get('[style="top:100px"]')
+        cy.get('[style="top: 100px;"]')
             .trigger('mousemove', 'bottomRight', { force: true });
 
-        cy.get('[style="top:100px"]')
+        cy.get('[style="top: 100px;"]')
             .trigger('mouseup', 'bottomRight', { force: true });
 
         cy.get('input[type="checkbox"]:checked')
@@ -60,28 +60,28 @@ describe('Example - Row Detail/Row Move/Checkbox Selector Plugins', () => {
         cy.get('.slick-viewport-top.slick-viewport-left')
             .scrollTo('top');
 
-        cy.get('[style="top:0px"] > .slick-cell:nth(4)').should('contain', 'Task 0');
-        cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 1');
-        cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
-        cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
-        cy.get('[style="top:100px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
+        cy.get('[style="top: 0px;"] > .slick-cell:nth(4)').should('contain', 'Task 0');
+        cy.get('[style="top: 25px;"] > .slick-cell:nth(4)').should('contain', 'Task 1');
+        cy.get('[style="top: 50px;"] > .slick-cell:nth(4)').should('contain', 'Task 2');
+        cy.get('[style="top: 75px;"] > .slick-cell:nth(4)').should('contain', 'Task 4');
+        cy.get('[style="top: 100px;"] > .slick-cell:nth(4)').should('contain', 'Task 3');
 
         cy.get('input[type="checkbox"]:checked')
             .should('have.length', 0);
     });
 
     it('should try moving a row to an invalid target and expect nothing moved (same rows as prior test)', () => {
-        cy.get('[style="top:25px"] > .slick-cell.cell-reorder').as('moveIconTask1');
-        cy.get('[style="top:100px"]').as('expandIconTask4');
+        cy.get('[style="top: 25px;"] > .slick-cell.cell-reorder').as('moveIconTask1');
+        cy.get('[style="top: 100px;"]').as('expandIconTask4');
 
         cy.get('@moveIconTask1')
             .trigger('mousedown', { button: 0, force: true })
             .trigger('mousemove', 'bottomRight');
 
-        cy.get('[style="top:75px"]')
+        cy.get('[style="top: 75px;"]')
             .trigger('mousemove', 'topRight', { force: true });
 
-        cy.get('[style="top:75px"]')
+        cy.get('[style="top: 75px;"]')
             .trigger('mouseup', 'topRight', { force: true });
 
         cy.get('input[type="checkbox"]:checked')
@@ -89,11 +89,11 @@ describe('Example - Row Detail/Row Move/Checkbox Selector Plugins', () => {
     });
 
     it('should select 2 rows (Task 1,3), then move row and expect the 2 rows to still be selected without any other rows', () => {
-        cy.get('[style="top:25px"] > .slick-cell:nth(2)').click();
-        cy.get('[style="top:100px"] > .slick-cell:nth(2)').click();
+        cy.get('[style="top: 25px;"] > .slick-cell:nth(2)').click();
+        cy.get('[style="top: 100px;"] > .slick-cell:nth(2)').click();
 
-        cy.get('[style="top:25px"] > .slick-cell.cell-reorder').as('moveIconTask1');
-        cy.get('[style="top:150px"]').as('moveIconTask3');
+        cy.get('[style="top: 25px;"] > .slick-cell.cell-reorder').as('moveIconTask1');
+        cy.get('[style="top: 150px;"]').as('moveIconTask3');
 
         cy.get('@moveIconTask1').should('have.length', 1);
 
@@ -105,25 +105,25 @@ describe('Example - Row Detail/Row Move/Checkbox Selector Plugins', () => {
             .trigger('mousemove', 'bottomRight', { force: true })
             .trigger('mouseup', 'bottomRight', { force: true });
 
-        cy.get('[style="top:0px"] > .slick-cell:nth(4)').should('contain', 'Task 0');
-        cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
-        cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
-        cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
-        cy.get('[style="top:100px"] > .slick-cell:nth(4)').should('contain', 'Task 5');
-        cy.get('[style="top:125px"] > .slick-cell:nth(4)').should('contain', 'Task 6');
-        cy.get('[style="top:150px"] > .slick-cell:nth(4)').should('contain', 'Task 1');
+        cy.get('[style="top: 0px;"] > .slick-cell:nth(4)').should('contain', 'Task 0');
+        cy.get('[style="top: 25px;"] > .slick-cell:nth(4)').should('contain', 'Task 2');
+        cy.get('[style="top: 50px;"] > .slick-cell:nth(4)').should('contain', 'Task 4');
+        cy.get('[style="top: 75px;"] > .slick-cell:nth(4)').should('contain', 'Task 3');
+        cy.get('[style="top: 100px;"] > .slick-cell:nth(4)').should('contain', 'Task 5');
+        cy.get('[style="top: 125px;"] > .slick-cell:nth(4)').should('contain', 'Task 6');
+        cy.get('[style="top: 150px;"] > .slick-cell:nth(4)').should('contain', 'Task 1');
 
         // Task 4 and 3 should be selected
         cy.get('input[type="checkbox"]:checked').should('have.length', 2);
-        cy.get('[style="top:75px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
-        cy.get('[style="top:150px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
+        cy.get('[style="top: 75px;"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
+        cy.get('[style="top: 150px;"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
     });
 
     it('should click on "Single Row Move OFF", then drag a row and expect both selected rows to be moved together', () => {
         cy.contains('Single Row Move OFF').click();
 
-        cy.get('[style="top:175px"] > .slick-cell.cell-reorder').as('moveIconTask7');
-        cy.get('[style="top:75px"] > .slick-cell.cell-reorder').as('moveIconTask3');
+        cy.get('[style="top: 175px;"] > .slick-cell.cell-reorder').as('moveIconTask7');
+        cy.get('[style="top: 75px;"] > .slick-cell.cell-reorder').as('moveIconTask3');
 
         cy.get('@moveIconTask3').should('have.length', 1);
 
@@ -131,30 +131,30 @@ describe('Example - Row Detail/Row Move/Checkbox Selector Plugins', () => {
             .trigger('mousedown', { button: 0, force: true })
             .trigger('mousemove', 'bottomRight');
 
-        cy.get('[style="top:200px"]')
+        cy.get('[style="top: 200px;"]')
             .trigger('mousemove', 'bottomRight', { force: true })
             .trigger('mouseup', 'bottomRight', { force: true });
 
-        cy.get('[style="top:0px"] > .slick-cell:nth(4)').should('contain', 'Task 0');
-        cy.get('[style="top:25px"] > .slick-cell:nth(4)').should('contain', 'Task 2');
-        cy.get('[style="top:50px"] > .slick-cell:nth(4)').should('contain', 'Task 4');
-        cy.get('[style="top:75px"] > .slick-cell:nth(4)').should('contain', 'Task 5');
-        cy.get('[style="top:100px"] > .slick-cell:nth(4)').should('contain', 'Task 6');
-        cy.get('[style="top:125px"] > .slick-cell:nth(4)').should('contain', 'Task 7');
-        cy.get('[style="top:150px"] > .slick-cell:nth(4)').should('contain', 'Task 8');
-        cy.get('[style="top:175px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
-        cy.get('[style="top:200px"] > .slick-cell:nth(4)').should('contain', 'Task 1');
+        cy.get('[style="top: 0px;"] > .slick-cell:nth(4)').should('contain', 'Task 0');
+        cy.get('[style="top: 25px;"] > .slick-cell:nth(4)').should('contain', 'Task 2');
+        cy.get('[style="top: 50px;"] > .slick-cell:nth(4)').should('contain', 'Task 4');
+        cy.get('[style="top: 75px;"] > .slick-cell:nth(4)').should('contain', 'Task 5');
+        cy.get('[style="top: 100px;"] > .slick-cell:nth(4)').should('contain', 'Task 6');
+        cy.get('[style="top: 125px;"] > .slick-cell:nth(4)').should('contain', 'Task 7');
+        cy.get('[style="top: 150px;"] > .slick-cell:nth(4)').should('contain', 'Task 8');
+        cy.get('[style="top: 175px;"] > .slick-cell:nth(4)').should('contain', 'Task 3');
+        cy.get('[style="top: 200px;"] > .slick-cell:nth(4)').should('contain', 'Task 1');
 
         // Task 1 and 3 should be selected
         cy.get('input[type="checkbox"]:checked').should('have.length', 2);
-        cy.get('[style="top:175px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
-        cy.get('[style="top:200px"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
+        cy.get('[style="top: 175px;"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
+        cy.get('[style="top: 200px;"] > .slick-cell:nth(2) input[type="checkbox"]:checked').should('have.length', 1);
     });
 
     it('should open the Task 3 Row Detail and still expect same detail', () => {
-        cy.get('[style="top:175px"] > .slick-cell:nth(4)').should('contain', 'Task 3');
+        cy.get('[style="top: 175px;"] > .slick-cell:nth(4)').should('contain', 'Task 3');
 
-        cy.get('[style="top:175px"] > .slick-cell:nth(0)')
+        cy.get('[style="top: 175px;"] > .slick-cell:nth(0)')
             .click()
             .wait(250);
 
diff --git a/cypress/e2e/example3-editing.cy.ts b/cypress/e2e/example3-editing.cy.ts
index 89712bedf..910ed0bea 100644
--- a/cypress/e2e/example3-editing.cy.ts
+++ b/cypress/e2e/example3-editing.cy.ts
@@ -23,11 +23,11 @@ describe('Example3 Editing', () => {
   });
 
   it('should be able to edit "Description" by double-clicking on first row and expect no more editable cell', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).click();
     cy.get('.slick-large-editor-text').should('have.length', 0);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).dblclick();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).dblclick();
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -46,8 +46,8 @@ describe('Example3 Editing', () => {
   });
 
   it('should be able to edit "Description" by clicking once on second row and expect next row to become editable after clicking "Save" button', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).click();
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -57,7 +57,7 @@ describe('Example3 Editing', () => {
       .contains('Save')
       .click();
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Second Row!');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Second Row!');
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -71,8 +71,8 @@ describe('Example3 Editing', () => {
   });
 
   it('should be able to edit "Description" by clicking once on second row and expect next row and not expect next line to become editable', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).click();
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -82,7 +82,7 @@ describe('Example3 Editing', () => {
       .contains('Save')
       .click();
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'Third Row Text');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 2}px;"] > .slick-cell:nth(1)`).should('contain', 'Third Row Text');
     cy.get('.slick-large-editor-text').should('have.length', 0);
   });
 
@@ -92,8 +92,8 @@ describe('Example3 Editing', () => {
   });
 
   it('should be able to edit "Description" and expect once again that the next line will become editable', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).click();
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -103,7 +103,7 @@ describe('Example3 Editing', () => {
       .contains('Save')
       .click();
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Fourth Row');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'Fourth Row');
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
diff --git a/cypress/e2e/example3b-editing-with-undo.cy.ts b/cypress/e2e/example3b-editing-with-undo.cy.ts
index d4ac285e2..71a5f09e5 100644
--- a/cypress/e2e/example3b-editing-with-undo.cy.ts
+++ b/cypress/e2e/example3b-editing-with-undo.cy.ts
@@ -23,11 +23,11 @@ describe('Example3 Editing', () => {
   });
 
   it('should be able to edit "Description" by double-clicking on first row and expect no more editable cell', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).click();
     cy.get('.slick-large-editor-text').should('have.length', 0);
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).dblclick();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).dblclick();
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -45,8 +45,8 @@ describe('Example3 Editing', () => {
   });
 
   it('should be able to edit "Description" by clicking once on second row and expect next row to become editable after clicking "Save" button', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).click();
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -56,7 +56,7 @@ describe('Example3 Editing', () => {
       .contains('Save')
       .click();
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'Second Row!');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(1)`).should('contain', 'Second Row!');
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -83,8 +83,8 @@ describe('Example3 Editing', () => {
   });
 
   it('should be able to edit "Description" and expect once again that the next line will become editable', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).click();
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -94,7 +94,7 @@ describe('Example3 Editing', () => {
       .contains('Save')
       .click();
 
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'Fourth Row');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'Fourth Row');
     cy.get('.slick-large-editor-text').should('have.length', 1);
 
     cy.get('.slick-large-editor-text textarea')
@@ -115,12 +115,12 @@ describe('Example3 Editing', () => {
   });
 
   it('should expect Task 0,3,4 to have descriptions other than original text', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'Task 4');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 4');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
   });
 
   it('should click undo edits twice and expect Task 3-4 to be undoned but Task 0 to still be changed', () => {
@@ -140,12 +140,12 @@ describe('Example3 Editing', () => {
   });
 
   it('should expect Task 3-4 to have descriptions other than original text', () => {
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'Task 4');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(1)`).should('contain', 'Something else');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
-    cy.get(`[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 0');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(0)`).should('contain', 'Task 4');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('not.contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(1)`).should('contain', 'Something else');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 3}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 4}px;"] > .slick-cell:nth(1)`).should('contain', 'This is a sample');
   });
 });
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 28efab21c..a6135edda 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -47,7 +47,7 @@ Cypress.Commands.add('getCell', (row, col, viewport = 'topLeft', { parentSelecto
   const canvasSelectorX = position.x ? `.grid-canvas-${position.x}` : '';
   const canvasSelectorY = position.y ? `.grid-canvas-${position.y}` : '';
 
-  return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top:${row * rowHeight}px"] > .slick-cell:nth(${col})`);
+  return cy.get(`${parentSelector} ${canvasSelectorX}${canvasSelectorY} [style="top: ${row * rowHeight}px;"] > .slick-cell:nth(${col})`);
 });
 
 const LOCAL_STORAGE_MEMORY = {};
diff --git a/examples/example-csp-header.html b/examples/example-csp-header.html
index eeba0d015..9568ff591 100644
--- a/examples/example-csp-header.html
+++ b/examples/example-csp-header.html
@@ -4,8 +4,10 @@
   <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
   <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
   <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
-  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net 'nonce-browser-sync'; style-src 'self' 'nonce-random-string'; require-trusted-types-for 'script'; trusted-types dompurify"> -->
-  <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types dompurify">
+  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net 'nonce-browser-sync'; style-src 'self' 'nonce-random-string'; require-trusted-types-for 'script'; trusted-types dompurify sanitizeWithDomPurify"> -->
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com 'nonce-browser-sync'; style-src 'self' 'nonce-random-string'; require-trusted-types-for 'script'; trusted-types dompurify">
+  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com 'nonce-browser-sync' 'nonce-random-string'; style-src 'self' 'unsafe-inline' 'nonce-random-string'; require-trusted-types-for 'script'; trusted-types dompurify sanitizeWithDomPurify"> -->
+  <!-- <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types dompurify"> -->
 </head>
 <body>
 <table width="100%">
@@ -14,12 +16,14 @@
       <div id="myGrid"></div>
     </td>
     <td valign="top">
+      <label id="search-label">And search including:</label>
+      <input type=text id="search">
       <h2>
         <a href="/examples/index.html" id="link">&#x2302;</a>
         Demonstrates:
       </h2>
       <ul>
-        <li>column span</li>
+        <li>CSP header, Currently used "default-src 'self'; script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com 'nonce-browser-sync'; style-src 'self' 'unsafe-inline'; require-trusted-types-for 'script'; trusted-types dompurify"</li>
       </ul>
         <h2>View Source:</h2>
         <ul>
@@ -33,12 +37,17 @@ <h2>View Source:</h2>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
 <!-- <script src="./example-csp-policy.js"></script> -->
 
+
 <script src="../dist/browser/slick.core.js"></script>
 <script src="../dist/browser/slick.interactions.js"></script>
+<script src="../dist/browser/slick.formatters.js"></script>
+<script src="../dist/browser/slick.editors.js"></script>
+<script src="../dist/browser/plugins/slick.rowselectionmodel.js"></script>
 <script src="../dist/browser/slick.grid.js"></script>
-<script src="../dist/browser/plugins/slick.cellrangedecorator.js"></script>
-<script src="../dist/browser/plugins/slick.cellrangeselector.js"></script>
-<script src="../dist/browser/plugins/slick.cellselectionmodel.js"></script>
+<script src="../dist/browser/slick.dataview.js"></script>
+<script src="../dist/browser/controls/slick.pager.js"></script>
+<script src="../dist/browser/controls/slick.columnpicker.js"></script>
+
 <script src="./example-csp-header.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/examples/example-csp-header.js b/examples/example-csp-header.js
index 37a040949..c304b7d47 100644
--- a/examples/example-csp-header.js
+++ b/examples/example-csp-header.js
@@ -1,4 +1,6 @@
 var grid;
+var dataView;
+var searchString;
 var columns = [
   { id: "title", name: "Title", field: "title" },
   { id: "duration", name: "Duration", field: "duration" },
@@ -12,6 +14,7 @@ var options = {
   enableCellNavigation: true,
   enableColumnReorder: false,
   nonce: 'random-string',
+  // autoHeight: true,
   sanitizer: (html) => DOMPurify.sanitize(html, { RETURN_TRUSTED_TYPE: true })
 };
 
@@ -19,6 +22,15 @@ document.addEventListener("DOMContentLoaded", function () {
   let gridElement = document.getElementById("myGrid");
   gridElement.style.width = "600px";
   gridElement.style.height = "500px";
+  let search = document.getElementById("search");
+  let searchLabel= document.getElementById("search-label");
+  searchLabel.style.width = "200px";
+  searchLabel.style.float = "left";
+  search.style.width = "100px";
+  search.addEventListener("input", function (e) {
+    searchString = e.target.value;
+    updateFilter();
+  });
 
   let linkElement = document.getElementById("link");
   //text-decoration: none; font-size: 22px
@@ -28,6 +40,7 @@ document.addEventListener("DOMContentLoaded", function () {
   var data = [];
   for (var i = 0; i < 500; i++) {
     data[i] = {
+      id: i,
       title: "Task " + i,
       duration: "5 days",
       percentComplete: Math.round(Math.random() * 100),
@@ -37,7 +50,8 @@ document.addEventListener("DOMContentLoaded", function () {
     };
   }
 
-  data.getItemMetadata = function (row) {
+  dataView = new Slick.Data.DataView({ inlineFilters: true, useCSPSafeFilter: true });
+  dataView.getItemMetadata = function (row) {
     if (row % 2 === 1) {
       return {
         "columns": {
@@ -57,7 +71,54 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   };
 
-  grid = new Slick.Grid("#myGrid", data, columns, options);
+  grid = new Slick.Grid("#myGrid", dataView, columns, options);
+  dataView.grid = grid;
+  grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true}));
 
-  grid.setSelectionModel(new Slick.CellSelectionModel());
-});
\ No newline at end of file
+  grid.onSort.subscribe(function (e, args) {
+    var comparer = function (a, b) {
+      if (args.sortCols[0].sortAsc)
+        return (a[args.sortCols[0].sortCol.field] > b[args.sortCols[0].sortCol.field]) ? 1 : -1;
+      else
+        return (a[args.sortCols[0].sortCol.field] < b[args.sortCols[0].sortCol.field]) ? 1 : -1;
+    }
+
+    this.getData().sort(comparer, args.sortAsc);
+  });
+  dataView.onRowCountChanged.subscribe(function (e, args) {
+    args.dataView.grid.updateRowCount();
+    args.dataView.grid.render();
+  });
+
+  dataView.onRowsChanged.subscribe(function (e, args) {
+    args.dataView.grid.invalidateRows(args.rows);
+    args.dataView.grid.render();
+  });
+
+  dataView.beginUpdate();
+  dataView.setItems(data);
+  dataView.setFilterArgs({ searchString: searchString });
+ dataView.setFilter(myFilter);
+  dataView.endUpdate();
+});
+function updateFilter() {
+  dataView.setFilterArgs({
+    searchString: searchString
+  });
+  dataView.refresh();
+}
+function myFilter(item, args) {
+  var searchForString = args.searchString?.toLowerCase();
+  //Check if input is empty
+  if (searchForString?.length == 0 || !searchForString) {
+      return true;
+  }
+  //Check if input value includes searchString value
+  for (var i = 0; i < columns.length; i++) {
+      if (item[columns[i]?.field] != null && item[columns[i]?.field].toString().toLowerCase().includes(searchForString)) {
+        return true;
+      }
+  }
+
+  return false;
+}
\ No newline at end of file
diff --git a/src/slick.dataview.ts b/src/slick.dataview.ts
index 98d34ce9c..221f93d7d 100644
--- a/src/slick.dataview.ts
+++ b/src/slick.dataview.ts
@@ -36,6 +36,7 @@ const SlickGroupItemMetadataProvider = IIFE_ONLY ? Slick.Data?.GroupItemMetadata
 export interface DataViewOption {
   groupItemMetadataProvider: SlickGroupItemMetadataProvider_ | null;
   inlineFilters: boolean;
+  useCSPSafeFilter: boolean;
 }
 export type FilterFn<T> = (item: T, args: any) => boolean;
 export type DataIdType = number | string;
@@ -50,7 +51,8 @@ export type SlickDataItem = SlickNonDataItem | SlickGroup_ | SlickGroupTotals_ |
 export class SlickDataView<TData extends SlickDataItem = any> implements CustomDataView {
   protected defaults: DataViewOption = {
     groupItemMetadataProvider: null,
-    inlineFilters: false
+    inlineFilters: false,
+    useCSPSafeFilter: false,
   };
 
   // private
@@ -60,6 +62,7 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
   protected idxById = new Map<DataIdType, number>();   // indexes by id
   protected rowsById: { [id: DataIdType]: number } | undefined = undefined;       // rows by id; lazy-calculated
   protected filter: FilterFn<TData> | null = null;         // filter function
+  protected filterCSPSafe: Function | null = null;         // filter function
   protected updated: ({ [id: DataIdType]: boolean }) | null = null;        // updated item ids
   protected suspend = false;            // suspends the recalculation
   protected isBulkSuspend = false;      // delays protectedious operations like the
@@ -74,7 +77,9 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
   protected filterArgs: any;
   protected filteredItems: TData[] = [];
   protected compiledFilter?: FilterFn<TData> | null;
+  protected compiledFilterCSPSafe?: Function | null;
   protected compiledFilterWithCaching?: FilterFn<TData> | null;
+  protected compiledFilterWithCachingCSPSafe?: Function | null;
   protected filterCache: any[] = [];
   protected _grid?: SlickGrid; // grid object will be defined only after using "syncGridSelection()" method"
 
@@ -147,12 +152,15 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
     this.idxById = null as any;
     this.rowsById = null as any;
     this.filter = null as any;
+    this.filterCSPSafe = null as any;
     this.updated = null as any;
     this.sortComparer = null as any;
     this.filterCache = [];
     this.filteredItems = [];
     this.compiledFilter = null;
+    this.compiledFilterCSPSafe = null;
     this.compiledFilterWithCaching = null;
+    this.compiledFilterWithCachingCSPSafe = null;
 
     if (this._grid && this._grid.onSelectedRowsChanged && this._grid.onCellCssStylesChanged) {
       this._grid.onSelectedRowsChanged.unsubscribe();
@@ -359,7 +367,7 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
 
   /** Get current Filter used by the DataView */
   getFilter() {
-    return this.filter;
+    return this._options.useCSPSafeFilter ? this.filterCSPSafe : this.filter;
   }
 
   /**
@@ -367,10 +375,13 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
    * @param {Function} fn - filter callback function
    */
   setFilter(filterFn: FilterFn<TData>) {
+    this.filterCSPSafe = filterFn;
     this.filter = filterFn;
     if (this._options.inlineFilters) {
-      this.compiledFilter = this.compileFilter();
-      this.compiledFilterWithCaching = this.compileFilterWithCaching();
+      this.compiledFilterCSPSafe = this.compileFilterCSPSafe;
+      this.compiledFilterWithCachingCSPSafe = this.compileFilterWithCachingCSPSafe;
+      this.compiledFilter = this.compileFilter(this._options.useCSPSafeFilter);
+      this.compiledFilterWithCaching = this.compileFilterWithCaching(this._options.useCSPSafeFilter);
     }
     this.refresh();
   }
@@ -1022,7 +1033,25 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
     }
   }
 
-  protected compileFilter(): FilterFn<TData> {
+  protected compileFilterCSPSafe(_items: TData[], _args: any): TData[] {
+    if (typeof this.filterCSPSafe !== 'function') {
+      return [];
+    }
+    const _retval: TData[] = [];
+    const _il = _items.length;
+
+    for (let _i = 0; _i < _il; _i++) {
+      if (this.filterCSPSafe(_items[_i], _args)) {
+        _retval.push(_items[_i]);
+      }
+    }
+
+    return _retval;
+  }
+  protected compileFilter(stopRunningIfCSPSafeIsActive: boolean = false): FilterFn<TData> {
+    if(stopRunningIfCSPSafeIsActive) {
+      return null as any;
+    }
     const filterInfo = this.getFunctionInfo(this.filter as Function);
 
     const filterPath1 = "{ continue _coreloop; }$1";
@@ -1053,7 +1082,6 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
     tpl = tpl.replace(/\$filter\$/gi, filterBody);
     tpl = tpl.replace(/\$item\$/gi, filterInfo.params[0]);
     tpl = tpl.replace(/\$args\$/gi, filterInfo.params[1]);
-
     const fn: any = new Function("_items,_args", tpl);
     const fnName = "compiledFilter";
     fn.displayName = fnName;
@@ -1061,7 +1089,11 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
     return fn;
   }
 
-  protected compileFilterWithCaching() {
+  protected compileFilterWithCaching(stopRunningIfCSPSafeIsActive: boolean = false) {
+    if(stopRunningIfCSPSafeIsActive) {
+      return null as any;
+    }
+
     const filterInfo = this.getFunctionInfo(this.filter as Function);
 
     const filterPath1 = "{ continue _coreloop; }$1";
@@ -1104,6 +1136,23 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
     return fn;
   }
 
+  protected compileFilterWithCachingCSPSafe(_items: TData[], _args: any, filterCache: any[]): TData[] {
+    if (typeof this.filterCSPSafe !== 'function') {
+      return [];
+    }
+  
+    const _retval: TData[] = [];
+    const _il = _items.length;
+  
+    for (let _i = 0; _i < _il; _i++) {
+      if (filterCache[_i] || this.filterCSPSafe(_items[_i], _args)) {
+        _retval.push(_items[_i]);
+      }
+    }
+  
+    return _retval;
+  }
+
   /**
    * In ES5 we could set the function name on the fly but in ES6 this is forbidden and we need to set it through differently
    * We can use Object.defineProperty and set it the property to writable, see MDN for reference
@@ -1154,10 +1203,16 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
   }
 
   protected getFilteredAndPagedItems(items: TData[]) {
-    if (this.filter) {
-      const batchFilter = (this._options.inlineFilters ? this.compiledFilter : this.uncompiledFilter) as Function;
-      const batchFilterWithCaching = (this._options.inlineFilters ? this.compiledFilterWithCaching : this.uncompiledFilterWithCaching) as Function;
-
+    if (this._options.useCSPSafeFilter ? this.filterCSPSafe : this.filter) {
+      let batchFilter: Function;
+      let batchFilterWithCaching: Function;
+      if (this._options.useCSPSafeFilter) {
+        batchFilter = (this._options.inlineFilters ? this.compiledFilterCSPSafe : this.uncompiledFilter) as Function;
+        batchFilterWithCaching = (this._options.inlineFilters ? this.compiledFilterWithCachingCSPSafe : this.uncompiledFilterWithCaching) as Function;
+      } else {
+        batchFilter = (this._options.inlineFilters ? this.compiledFilter : this.uncompiledFilter) as Function;
+        batchFilterWithCaching = (this._options.inlineFilters ? this.compiledFilterWithCaching : this.uncompiledFilterWithCaching) as Function;
+      }
       if (this.refreshHints.isFilterNarrowing) {
         this.filteredItems = batchFilter.call(this, this.filteredItems, this.filterArgs);
       } else if (this.refreshHints.isFilterExpanding) {
@@ -1218,7 +1273,7 @@ export class SlickDataView<TData extends SlickDataItem = any> implements CustomD
             // no good way to compare totals since they are arbitrary DTOs
             // deep object comparison is pretty expensive
             // always considering them 'dirty' seems easier for the time being
-          ((item as SlickGroupTotals_).__groupTotals || (r as SlickGroupTotals_).__groupTotals))
+            ((item as SlickGroupTotals_).__groupTotals || (r as SlickGroupTotals_).__groupTotals))
           || item[this.idProperty as keyof TData] !== r[this.idProperty as keyof TData]
           || (this.updated?.[item[this.idProperty as keyof TData]])
         ) {
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index b9cb596cc..1cd91f6e7 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -3395,9 +3395,9 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       }
 
       if (this.options.mixinDefaults) {
-          Utils.applyDefaults(m, this._columnDefaults);
-          if (!m.autoSize) { m.autoSize = {}; }
-          Utils.applyDefaults(m.autoSize, this._columnAutosizeDefaults);
+        Utils.applyDefaults(m, this._columnDefaults);
+        if (!m.autoSize) { m.autoSize = {}; }
+        Utils.applyDefaults(m.autoSize, this._columnAutosizeDefaults);
       } else {
         m = this.columns[i] = Utils.extend({}, this._columnDefaults, m);
         m.autoSize = Utils.extend({}, this._columnAutosizeDefaults, m.autoSize);
@@ -3507,7 +3507,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.makeActiveCellNormal();
   }
 
-  protected internal_setOptions(suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean) : void {
+  protected internal_setOptions(suppressRender?: boolean, suppressColumnSet?: boolean, suppressSetOverflow?: boolean): void {
     if (this._options.showColumnHeader !== undefined) {
       this.setColumnHeaderVisibility(this._options.showColumnHeader);
     }
@@ -3785,7 +3785,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     return item[columnDef.field as keyof TData];
   }
 
-  protected appendRowHtml(stringArrayL: string[], stringArrayR: string[], row: number, range: CellViewportRange, dataLength: number) {
+  protected appendRowHtml(divArrayL: HTMLElement[], divArrayR: HTMLElement[], row: number, range: CellViewportRange, dataLength: number) {
     const d = this.getDataItem(row);
     const dataLoading = row < dataLength && !d;
     let rowCss = 'slick-row' +
@@ -3806,13 +3806,19 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     const frozenRowOffset = this.getFrozenRowOffset(row);
 
-    const rowHtml = `<div class="ui-widget-content ${rowCss}" style="top:${(this.getRowTop(row) - frozenRowOffset)}px">`;
-
-    stringArrayL.push(rowHtml);
+    const rowDiv = document.createElement('div');
+    let rowDivR: HTMLElement | undefined;
+   
+      rowDiv.className = 'ui-widget-content ' + rowCss;
+      rowDiv.style.top = `${(this.getRowTop(row) - frozenRowOffset)}px`;
+      divArrayL.push(rowDiv);
+      if (this.hasFrozenColumns()) {
+        //it has to be a deep copy otherwise we will have issues with pass by reference in js since
+        //attempting to add the same element to 2 different arrays will just move 1 item to the other array
+        rowDivR = rowDiv.cloneNode(true) as HTMLElement;
+        divArrayR.push(rowDivR);
+      }
 
-    if (this.hasFrozenColumns()) {
-      stringArrayR.push(rowHtml);
-    }
 
     let colspan: number | string;
     let m: C;
@@ -3837,28 +3843,23 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         }
 
         if (this.hasFrozenColumns() && (i > this._options.frozenColumn!)) {
-          this.appendCellHtml(stringArrayR, row, i, (colspan as number), d);
+          //could add it as a check in the if the !
+          this.appendCellHtml(rowDivR!, row, i, (colspan as number), d);
         } else {
-          this.appendCellHtml(stringArrayL, row, i, (colspan as number), d);
+          this.appendCellHtml(rowDiv, row, i, (colspan as number), d);
         }
       } else if (m.alwaysRenderColumn || (this.hasFrozenColumns() && i <= this._options.frozenColumn!)) {
-        this.appendCellHtml(stringArrayL, row, i, (colspan as number), d);
+        this.appendCellHtml(rowDiv, row, i, (colspan as number), d);
       }
 
       if ((colspan as number) > 1) {
         i += ((colspan as number) - 1);
       }
     }
-
-    stringArrayL.push('</div>');
-
-    if (this.hasFrozenColumns()) {
-      stringArrayR.push('</div>');
-    }
   }
 
-  protected appendCellHtml(stringArray: string[], row: number, cell: number, colspan: number, item: TData) {
-    // stringArray: stringBuilder containing the HTML parts
+  protected appendCellHtml(divRow: HTMLElement, row: number, cell: number, colspan: number, item: TData) {
+    // divRow: the html element to append items too
     // row, cell: row and column index
     // colspan: HTML colspan
     // item: grid data for row
@@ -3899,25 +3900,28 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     if ((formatterResult as FormatterResultObject)?.addClasses) {
       addlCssClasses += (addlCssClasses ? ' ' : '') + (formatterResult as FormatterResultObject).addClasses;
     }
-    const toolTip = (formatterResult as FormatterResultObject)?.toolTip ? `title="${(formatterResult as FormatterResultObject).toolTip}"` : '';
 
-    let customAttrStr = '';
-    if (m.hasOwnProperty('cellAttrs') && m.cellAttrs instanceof Object) {
-      for (const key in m.cellAttrs) {
-        if (m.cellAttrs.hasOwnProperty(key)) {
-          customAttrStr += ` ${key}="${m.cellAttrs[key]}" `;
+      const toolTipText = (formatterResult as FormatterResultObject)?.toolTip ? `${(formatterResult as FormatterResultObject).toolTip}` : '';
+      const cellDiv = document.createElement('div');
+      cellDiv.className = cellCss + (addlCssClasses ? ' ' + addlCssClasses : '');
+      cellDiv.setAttribute('title', toolTipText);
+      if (m.hasOwnProperty('cellAttrs') && m.cellAttrs instanceof Object) {
+        for (const key in m.cellAttrs) {
+          if (m.cellAttrs.hasOwnProperty(key)) {
+            cellDiv.setAttribute(key, m.cellAttrs[key]);
+          }
         }
       }
-    }
 
-    stringArray.push(`<div class="${cellCss + (addlCssClasses ? ' ' + addlCssClasses : '')}" ${toolTip + customAttrStr}>`);
+      // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
+      if (item) {
+        const obj = (Object.prototype.toString.call(formatterResult) !== '[object Object]' ? formatterResult : (formatterResult as FormatterResultObject).text) as string;
+        cellDiv.innerHTML = this.sanitizeHtmlString(obj);
+      }
+
+      divRow.appendChild(cellDiv);
 
-    // if there is a corresponding row (if not, this is the Add New row or this data hasn't been loaded yet)
-    if (item) {
-      stringArray.push((Object.prototype.toString.call(formatterResult) !== '[object Object]' ? formatterResult : (formatterResult as FormatterResultObject).text) as string);
-    }
 
-    stringArray.push('</div>');
 
     this.rowsCache[row].cellRenderQueue.push(cell);
     this.rowsCache[row].cellColSpans[cell] = colspan;
@@ -4526,7 +4530,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
   protected cleanUpAndRenderCells(range: CellViewportRange) {
     let cacheEntry;
-    const stringArray: string[] = [];
+    const divRow: HTMLElement = document.createElement('div');
     const processedRows: number[] = [];
     let cellsAdded: number;
     let totalCellsAdded = 0;
@@ -4576,7 +4580,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         }
 
         if (this.columnPosRight[Math.min(ii - 1, i + colspan - 1)] > range.leftPx) {
-          this.appendCellHtml(stringArray, row, i, colspan, d);
+          this.appendCellHtml(divRow, row, i, colspan, d);
           cellsAdded++;
         }
 
@@ -4589,13 +4593,12 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         processedRows.push(row);
       }
     }
-
-    if (!stringArray.length) {
+    if (!divRow.children.length) {
       return;
     }
 
     const x = document.createElement('div');
-    x.innerHTML = this.sanitizeHtmlString(stringArray.join(''));
+    x.innerHTML = this.sanitizeHtmlString(divRow.outerHTML);
 
     let processedRow: number | null | undefined;
     let node: HTMLElement;
@@ -4605,6 +4608,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       while (Utils.isDefined(columnIdx = cacheEntry.cellRenderQueue.pop())) {
         node = x.lastChild as HTMLElement;
 
+        //no idea why node would be null here but apparently it is..
+        if (!node) {
+          continue;
+        }
         if (this.hasFrozenColumns() && (columnIdx > this._options.frozenColumn!)) {
           cacheEntry.rowNode![1].appendChild(node);
         } else {
@@ -4616,8 +4623,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
   }
 
   protected renderRows(range: { top: number; bottom: number; leftPx: number; rightPx: number; }) {
-    const stringArrayL: string[] = [];
-    const stringArrayR: string[] = [];
+    const divArrayL: HTMLElement[] = [];
+    const divArrayR: HTMLElement[] = [];
     const rows: number[] = [];
     let needToReselectCell = false;
     const dataLength = this.getDataLength();
@@ -4647,7 +4654,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         cellRenderQueue: []
       };
 
-      this.appendRowHtml(stringArrayL, stringArrayR, i, range, dataLength);
+      this.appendRowHtml(divArrayL, divArrayR, i, range, dataLength);
       if (this.activeCellNode && this.activeRow === i) {
         needToReselectCell = true;
       }
@@ -4658,9 +4665,12 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
 
     const x = document.createElement('div');
     const xRight = document.createElement('div');
-    x.innerHTML = this.sanitizeHtmlString(stringArrayL.join(''));
-    xRight.innerHTML = this.sanitizeHtmlString(stringArrayR.join(''));
-
+    divArrayL.forEach(elm => {
+      x.appendChild(elm as HTMLElement);
+    });
+    divArrayR.forEach(elm => {
+      xRight.appendChild(elm as HTMLElement);
+    });
     for (let i = 0, ii = rows.length; i < ii; i++) {
       if ((this.hasFrozenRows) && (rows[i] >= this.actualFrozenRow)) {
         if (this.hasFrozenColumns()) {