feat(styling): add frozen on all possible elements with SASS variables

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

@@ -113,6 +113,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     useUtf8WithBom: true
   },
   forceFitColumns: false,
+  frozenHeaderWidthCalcDifferential: 1,
   gridMenu: {
     hideClearAllFiltersCommand: false,
     hideClearAllSortingCommand: false,

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

@@ -289,6 +289,9 @@ export interface GridOption {
   /** Formatter commonly used options defined for the entire grid */
   formatterOptions?: FormatterOption;
 
+  /** Optional frozen border in pixel to remove from total header width calculation (depending on your border width, it should be 0, 1 or 2 defaults is 1) */
+  frozenHeaderWidthCalcDifferential?: number;
+
   /** Defaults to false, do we want to freeze (pin) the bottom portion instead of the top */
   frozenBottom?: boolean;
 

src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts

@@ -110,18 +110,21 @@ export class GroupingAndColspanService {
     let header;
     let lastColumnGroup = '';
     let widthTotal = 0;
+    const frozenColumn = this._gridOptions && this._gridOptions.frozenColumn || -1;
+    const frozenHeaderWidthCalcDifferential = this._gridOptions && this._gridOptions.frozenHeaderWidthCalcDifferential || 0;
+    const isFrozenGrid = frozenColumn >= 0;
 
     for (let i = start; i < end; i++) {
       colDef = this._columnDefinitions[i];
       if (colDef) {
         if (lastColumnGroup === colDef.columnGroup && i > 0) {
           widthTotal += colDef.width || 0;
           if (header && header.width) {
-            header.width(widthTotal - headerColumnWidthDiff);
+            header.width(widthTotal - headerColumnWidthDiff - frozenHeaderWidthCalcDifferential); // remove possible frozen border
           }
         } else {
           widthTotal = colDef.width || 0;
-          header = $(`<div class="ui-state-default slick-header-column" />`)
+          header = $(`<div class="ui-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}" />`)
             .html(`<span class="slick-column-name">${colDef.columnGroup || ''}</span>`)
             .width(widthTotal - headerColumnWidthDiff)
             .appendTo(preHeaderPanel);
@@ -131,6 +134,7 @@ export class GroupingAndColspanService {
     }
   }
 
+
   /** Translate Column Group texts and re-render them afterward. */
   translateGroupingAndColSpan() {
     const currentColumnDefinitions = this._grid.getColumns();

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -65,8 +65,8 @@
  $preheader-border-left-first-element:           none !default;
  $preheader-border-right:                        none !default;
  $preheader-border-right-last-element:           none !default;
- $preheader-border-bottom:                       0 !default;
- $preheader-border-top:                          0 !default;
+ $preheader-border-bottom:                       none !default;
+ $preheader-border-top:                          none !default;
  $preheader-font-size:                           calc(#{$font-size-base} + 3px) !default;
  $preheader-height:                              25px !default; /* full height is calculated with cell padding + borders (25px + 5px + 0px + 0px) = 30px must be set as preHeaderPanelHeight */
  $preheader-grouped-title-display:               inline-grid !default;
@@ -117,6 +117,9 @@
  /* Frozen pinned rows/columns */
  $frozen-border-bottom:                          1px solid #a5a5a5 !default;
  $frozen-border-right:                           1px solid #a5a5a5 !default;
+ $frozen-preheader-row-border-right:             $frozen-border-right !default;
+ $frozen-header-row-border-right:                $frozen-border-right !default;
+ $frozen-filter-row-border-right:                $frozen-border-right !default;
  $frozen-overflow-right:                         scroll !default;                      // typically we would like to always have the scroll displayed when using hamburger menu (top right)
 
  /* icon font is using Font-Awesome by default but could be changed to any other icon package like Glyphicons, ... */

src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss

@@ -1,6 +1,6 @@
 /*!
- * SlickGrid custom styling for Bootstrap (https://github.com/ghiscoding/angular-slickgrid)
- * Licensed under MIT (https://github.com/ghiscoding/angular-slickgrid/blob/master/LICENSE)
+ * SlickGrid custom styling for Bootstrap (https://github.com/ghiscoding/aurelia-slickgrid)
+ * Licensed under MIT (https://github.com/ghiscoding/aurelia-slickgrid/blob/master/LICENSE)
  * @author: Ghislain B. (ghiscoding)
  *//*!
 
@@ -396,7 +396,7 @@
       border-top: $preheader-border-top;
 
       .slick-header-column {
-        height: calc(#{$preheader-height} - #{$cell-padding-top-bottom});
+        height: $preheader-height;
         border-left: $preheader-border-left;
         border-right: $preheader-border-right;
         font-size: $preheader-font-size;
@@ -415,11 +415,20 @@
   /** Frozen/Pinned styling */
 
   .slick-row .slick-cell.frozen:last-child,
-  // .slick-header-column.frozen:last-child,
-  .slick-headerrow-column.frozen:last-child,
   .slick-footerrow-column.frozen:last-child {
     border-right: $frozen-border-right;
   }
+  .slick-header-column.frozen:last-child {
+    border-right: $frozen-header-row-border-right;
+  }
+  .slick-pane-left {
+    .slick-preheader-panel .slick-header-column.frozen:last-child {
+      border-right: $frozen-preheader-row-border-right;
+    }
+  }
+  .slick-headerrow-column.frozen:last-child {
+    border-right: $frozen-filter-row-border-right;
+  }
 
   .slick-pane-bottom {
     border-top: $frozen-border-bottom;

src/app/modules/angular-slickgrid/styles/slick-grid.scss

@@ -112,8 +112,6 @@
     position: absolute;
     top: 0;
     bottom: 0;
-
-    border: 1px solid silver;
     border-top-color: transparent;
     border-left-color: transparent;
     border-top-width: 0;