feat(common): add automatic height for multiline column headers

AGENTS.md

@@ -29,6 +29,7 @@ Changes in `packages/` can affect every framework. Preserve backward compatibili
 - Unit tests use Vitest with `test/vitest.config.mts`.
 - E2E tests use Cypress with `test/cypress.config.ts`.
 - Cypress tests use `testIsolation: false`; preserve their execution order and inherited state.
+- For the Vanilla demo suite, start the watch server with `pnpm serve:vite`, then run the root Cypress CI suite with `pnpm cypress:ci`. To run one spec while iterating, pass its path directly (for example, `pnpm cypress:ci --spec test/cypress/e2e/example33.cy.ts`).
 - Framework demos provide headless Cypress CI scripts. Start the matching demo server first (`pnpm angular:serve`, `pnpm aurelia:serve`, `pnpm react:serve`, or `pnpm vue:serve`).
 - Run the corresponding root CI command: `pnpm angular:cypress:ci`, `pnpm aurelia:cypress:ci`, `pnpm react:cypress:ci`, or `pnpm vue:cypress:ci` (for example, `pnpm aurelia:cypress:ci`). These commands use each framework's Cypress config and are preferred for validating framework-specific E2E suites.
 - Add or update tests for behavior changes, especially in core packages.

demos/aurelia/src/examples/slickgrid/example44.html

@@ -22,6 +22,10 @@ <h2>
     responsability). This demo does not show this because it is up to you to decide what to do when the span changes shape (i.e. you default
     to 3 rowspan but you filter a row in the middle, how do you want to proceed?).
   </p>
+  <p class="italic example-details">
+    <code>autoHeaderHeight</code> is enabled: the narrow <i>Revenue Growth</i> column wraps its header and the grid measures the required
+    height.
+  </p>
 </div>
 
 <section class="row mb-2">

demos/aurelia/src/examples/slickgrid/example44.ts

@@ -75,10 +75,12 @@ export class Example44 {
         id: 'revenueGrowth',
         name: 'Revenue Growth',
         field: 'revenueGrowth',
+        headerCssClass: 'auto-header-height-demo',
         exportCustomFormatter: rowCellValueExportFormatter,
         formatter: rowCellValueFormatter,
         type: 'number',
-        minWidth: 120,
+        minWidth: 65,
+        width: 65,
       },
       {
         id: 'pricingPolicy',
@@ -267,6 +269,7 @@ export class Example44 {
 
     this.gridOptions = {
       enableCellNavigation: true,
+      autoHeaderHeight: true,
       enableColumnReorder: true,
       enableCellRowSpan: true,
       enableHeaderMenu: false,

demos/aurelia/test/cypress/e2e/example44.cy.ts

@@ -30,6 +30,23 @@ describe('Example 44 - Column & Row Span', { retries: 0 }, () => {
     cy.get('h2').should('contain', 'Example 44: colspan/rowspan with large dataset');
   });
 
+  it('should calculate a height that fits the wrapped Revenue Growth header', () => {
+    cy.get('.slick-header-auto-height').should('have.length', 2);
+    cy.get('.slick-header-auto-height')
+      .first()
+      .should(($header) => {
+        expect(parseFloat($header.css('--slick-auto-header-height'))).to.be.greaterThan(0);
+      });
+    cy.get('.auto-header-height-demo').should(($header) => {
+      expect($header[0].scrollHeight).to.be.lte($header[0].clientHeight);
+      expect($header[0].clientHeight).to.be.lessThan(100);
+      const name = $header[0].querySelector<HTMLElement>('.slick-column-name');
+      expect(name).to.exist;
+      const lineHeight = parseFloat(getComputedStyle(name!).lineHeight) || 16;
+      expect(name!.scrollHeight).to.be.within(lineHeight * 1.5, lineHeight * 2.5);
+    });
+  });
+
   it('should have exact column titles', () => {
     cy.get('.slick-header-columns')
       .children()

demos/react/src/examples/slickgrid/Example44.tsx

@@ -73,10 +73,12 @@ export default function Example44() {
       id: 'revenueGrowth',
       name: 'Revenue Growth',
       field: 'revenueGrowth',
+      headerCssClass: 'auto-header-height-demo',
       exportCustomFormatter: rowCellValueExportFormatter,
       formatter: rowCellValueFormatter,
       type: 'number',
-      minWidth: 120,
+      minWidth: 65,
+      width: 65,
     },
     {
       id: 'pricingPolicy',
@@ -265,6 +267,7 @@ export default function Example44() {
 
   const gridOptions: GridOption = {
     enableCellNavigation: true,
+    autoHeaderHeight: true,
     enableColumnReorder: true,
     enableHeaderMenu: false,
     enableCellRowSpan: true,
@@ -412,6 +415,10 @@ export default function Example44() {
           your responsability). This demo does not show this because it is up to you to decide what to do when the span changes shape (i.e.
           you default to 3 rowspan but you filter a row in the middle, how do you want to proceed?).
         </p>
+        <p className="italic example-details">
+          <code>autoHeaderHeight</code> is enabled: the narrow <i>Revenue Growth</i> column wraps its header and the grid measures the
+          required height.
+        </p>
       </div>
 
       <section className="row mb-2">

demos/react/test/cypress/e2e/example44.cy.ts

@@ -30,6 +30,23 @@ describe('Example 44 - Column & Row Span', { retries: 0 }, () => {
     cy.get('h2').should('contain', 'Example 44: colspan/rowspan with large dataset');
   });
 
+  it('should calculate a height that fits the wrapped Revenue Growth header', () => {
+    cy.get('.slick-header-auto-height').should('have.length', 2);
+    cy.get('.slick-header-auto-height')
+      .first()
+      .should(($header) => {
+        expect(parseFloat($header.css('--slick-auto-header-height'))).to.be.greaterThan(0);
+      });
+    cy.get('.auto-header-height-demo').should(($header) => {
+      expect($header[0].scrollHeight).to.be.lte($header[0].clientHeight);
+      expect($header[0].clientHeight).to.be.lessThan(100);
+      const name = $header[0].querySelector<HTMLElement>('.slick-column-name');
+      expect(name).to.exist;
+      const lineHeight = parseFloat(getComputedStyle(name!).lineHeight) || 16;
+      expect(name!.scrollHeight).to.be.within(lineHeight * 1.5, lineHeight * 2.5);
+    });
+  });
+
   it('should have exact column titles', () => {
     cy.get('.slick-header-columns')
       .children()

demos/vanilla/src/examples/example33.html

@@ -21,6 +21,10 @@ <h3 class="title is-3">
       responsability). This demo does not show this because it is up to you to decide what to do when the span changes shape (i.e. you
       default to 3 rowspan but you filter a row in the middle, how do you want to proceed?).
     </p>
+    <p class="italic example-details">
+      <code>autoHeaderHeight</code> is enabled: the narrow <i>Revenue Growth</i> column wraps its header and the grid measures the required
+      height.
+    </p>
   </div>
 </div>
 

demos/vanilla/src/examples/example33.ts

@@ -92,10 +92,12 @@ export default class Example33 {
         id: 'revenueGrowth',
         name: 'Revenue Growth',
         field: 'revenueGrowth',
+        headerCssClass: 'auto-header-height-demo',
         exportCustomFormatter: rowCellValueExportFormatter,
         formatter: rowCellValueFormatter,
         type: 'number',
-        minWidth: 120,
+        minWidth: 65,
+        width: 65,
       },
       {
         id: 'pricingPolicy',
@@ -284,6 +286,7 @@ export default class Example33 {
 
     this.gridOptions = {
       enableCellNavigation: true,
+      autoHeaderHeight: true,
       enableColumnReorder: true,
       enableHeaderMenu: false,
       enableCellRowSpan: true,

demos/vue/src/components/Example44.vue

@@ -69,10 +69,12 @@ function defineGrid() {
       id: 'revenueGrowth',
       name: 'Revenue Growth',
       field: 'revenueGrowth',
+      headerCssClass: 'auto-header-height-demo',
       exportCustomFormatter: rowCellValueExportFormatter,
       formatter: rowCellValueFormatter,
       type: 'number',
-      minWidth: 120,
+      minWidth: 65,
+      width: 65,
     },
     {
       id: 'pricingPolicy',
@@ -261,6 +263,7 @@ function defineGrid() {
 
   gridOptions.value = {
     enableCellNavigation: true,
+    autoHeaderHeight: true,
     enableColumnReorder: true,
     enableHeaderMenu: false,
     enableCellRowSpan: true,
@@ -395,6 +398,10 @@ function vueGridReady(grid: SlickgridVueInstance) {
       responsability). This demo does not show this because it is up to you to decide what to do when the span changes shape (i.e. you
       default to 3 rowspan but you filter a row in the middle, how do you want to proceed?).
     </p>
+    <p class="italic example-details">
+      <code>autoHeaderHeight</code> is enabled: the narrow <i>Revenue Growth</i> column wraps its header and the grid measures the required
+      height.
+    </p>
   </div>
 
   <section class="row mb-2">

demos/vue/test/cypress/e2e/example44.cy.ts

@@ -30,6 +30,23 @@ describe('Example 44 - Column & Row Span', { retries: 0 }, () => {
     cy.get('h2').should('contain', 'Example 44: colspan/rowspan with large dataset');
   });
 
+  it('should calculate a height that fits the wrapped Revenue Growth header', () => {
+    cy.get('.slick-header-auto-height').should('have.length', 2);
+    cy.get('.slick-header-auto-height')
+      .first()
+      .should(($header) => {
+        expect(parseFloat($header.css('--slick-auto-header-height'))).to.be.greaterThan(0);
+      });
+    cy.get('.auto-header-height-demo').should(($header) => {
+      expect($header[0].scrollHeight).to.be.lte($header[0].clientHeight);
+      expect($header[0].clientHeight).to.be.lessThan(100);
+      const name = $header[0].querySelector<HTMLElement>('.slick-column-name');
+      expect(name).to.exist;
+      const lineHeight = parseFloat(getComputedStyle(name!).lineHeight) || 16;
+      expect(name!.scrollHeight).to.be.within(lineHeight * 1.5, lineHeight * 2.5);
+    });
+  });
+
   it('should have exact column titles', () => {
     cy.get('.slick-header-columns')
       .children()

docs/styling/multiple-column-header-rows.md

@@ -55,4 +55,16 @@ Also note that if you use a stylesheet attached to your component (or inline), y
   styleUrls: ['./demo.component.scss'],
   templateUrl: './demo.component.html'
 })
-```
+```
+
+### Automatic header height
+
+Set `autoHeaderHeight: true` to size column headers from their rendered content instead of using a fixed row count. This supports multi-line text, HTML, and DOM elements used as column names. The calculated height is shared by frozen header panes and is recalculated after column resizing or autosizing.
+
+```ts
+const gridOptions = {
+  autoHeaderHeight: true,
+};
+```
+
+The option is disabled by default. Use it with a theme stylesheet from Slickgrid-Universal; it provides the required header wrapping styles.

frameworks/angular-slickgrid/docs/styling/multiple-column-header-rows.md

@@ -55,4 +55,16 @@ Also note that if you use a stylesheet attached to your component (or inline), y
   styleUrls: ['./demo.component.scss'],
   templateUrl: './demo.component.html'
 })
-```
+```
+
+### Automatic header height
+
+Set `autoHeaderHeight: true` to size column headers from their rendered content instead of using a fixed row count. This supports multi-line text, HTML, and DOM elements used as column names. The calculated height is shared by frozen header panes and is recalculated after column resizing or autosizing.
+
+```ts
+const gridOptions = {
+  autoHeaderHeight: true,
+};
+```
+
+The option is disabled by default. Use it with a theme stylesheet from Slickgrid-Universal; it provides the required header wrapping styles.

frameworks/angular-slickgrid/src/demos/examples/example44.component.html

@@ -23,6 +23,10 @@ <h2>
       responsability). This demo does not show this because it is up to you to decide what to do when the span changes shape (i.e. you
       default to 3 rowspan but you filter a row in the middle, how do you want to proceed?).
     </p>
+    <p class="italic example-details">
+      <code>autoHeaderHeight</code> is enabled: the narrow <i>Revenue Growth</i> column wraps its header and the grid measures the required
+      height.
+    </p>
   </div>
 
   <section class="row mb-2">

frameworks/angular-slickgrid/src/demos/examples/example44.component.ts

@@ -89,10 +89,12 @@ export class Example44Component implements OnInit {
         id: 'revenueGrowth',
         name: 'Revenue Growth',
         field: 'revenueGrowth',
+        headerCssClass: 'auto-header-height-demo',
         exportCustomFormatter: rowCellValueExportFormatter,
         formatter: rowCellValueFormatter,
         type: 'number',
-        minWidth: 120,
+        minWidth: 65,
+        width: 65,
       },
       {
         id: 'pricingPolicy',
@@ -281,6 +283,7 @@ export class Example44Component implements OnInit {
 
     this.gridOptions = {
       enableCellNavigation: true,
+      autoHeaderHeight: true,
       enableColumnReorder: true,
       enableCellRowSpan: true,
       enableHeaderMenu: false,

frameworks/angular-slickgrid/test/cypress/e2e/example44.cy.ts

@@ -30,6 +30,23 @@ describe('Example 44 - Column & Row Span', { retries: 0 }, () => {
     cy.get('h2').should('contain', 'Example 44: colspan/rowspan with large dataset');
   });
 
+  it('should calculate a height that fits the wrapped Revenue Growth header', () => {
+    cy.get('.slick-header-auto-height').should('have.length', 2);
+    cy.get('.slick-header-auto-height')
+      .first()
+      .should(($header) => {
+        expect(parseFloat($header.css('--slick-auto-header-height'))).to.be.greaterThan(0);
+      });
+    cy.get('.auto-header-height-demo').should(($header) => {
+      expect($header[0].scrollHeight).to.be.lte($header[0].clientHeight);
+      expect($header[0].clientHeight).to.be.lessThan(100);
+      const name = $header[0].querySelector<HTMLElement>('.slick-column-name');
+      expect(name).to.exist;
+      const lineHeight = parseFloat(getComputedStyle(name!).lineHeight) || 16;
+      expect(name!.scrollHeight).to.be.within(lineHeight * 1.5, lineHeight * 2.5);
+    });
+  });
+
   it('should have exact column titles', () => {
     cy.get('.slick-header-columns')
       .children()

frameworks/aurelia-slickgrid/docs/styling/multiple-column-header-rows.md

@@ -55,4 +55,16 @@ Also note that if you use a stylesheet attached to your component (or inline), y
   styleUrls: ['./demo.component.scss'],
   templateUrl: './demo.component.html'
 })
-```
+```
+
+### Automatic header height
+
+Set `autoHeaderHeight: true` to size column headers from their rendered content instead of using a fixed row count. This supports multi-line text, HTML, and DOM elements used as column names. The calculated height is shared by frozen header panes and is recalculated after column resizing or autosizing.
+
+```ts
+const gridOptions = {
+  autoHeaderHeight: true,
+};
+```
+
+The option is disabled by default. Use it with a theme stylesheet from Slickgrid-Universal; it provides the required header wrapping styles.

frameworks/slickgrid-react/docs/styling/multiple-column-header-rows.md

@@ -55,4 +55,16 @@ Also note that if you use a stylesheet attached to your component (or inline), y
   styleUrls: ['./demo.component.scss'],
   templateUrl: './demo.component.html'
 })
-```
+```
+
+### Automatic header height
+
+Set `autoHeaderHeight: true` to size column headers from their rendered content instead of using a fixed row count. This supports multi-line text, HTML, and DOM elements used as column names. The calculated height is shared by frozen header panes and is recalculated after column resizing or autosizing.
+
+```ts
+const gridOptions = {
+  autoHeaderHeight: true,
+};
+```
+
+The option is disabled by default. Use it with a theme stylesheet from Slickgrid-Universal; it provides the required header wrapping styles.

frameworks/slickgrid-vue/docs/styling/multiple-column-header-rows.md

@@ -55,4 +55,16 @@ Also note that if you use a stylesheet attached to your component (or inline), y
   styleUrls: ['./demo.component.scss'],
   templateUrl: './demo.component.html'
 })
-```
+```
+
+### Automatic header height
+
+Set `autoHeaderHeight: true` to size column headers from their rendered content instead of using a fixed row count. This supports multi-line text, HTML, and DOM elements used as column names. The calculated height is shared by frozen header panes and is recalculated after column resizing or autosizing.
+
+```ts
+const gridOptions = {
+  autoHeaderHeight: true,
+};
+```
+
+The option is disabled by default. Use it with a theme stylesheet from Slickgrid-Universal; it provides the required header wrapping styles.