fix(GridState): calling getAssociatedGridColumns should extend column…

… (part2) (#1015)

* fix(GridState): calling `getAssociatedGridColumns` should extend column
- extends the previous PR #1014, but instead of merging all column properties, we will actually skip the `width` property since that property is changed internally by SlickGrid (auto-calculated) and that has an impact when using autoResizeColumnsByCellContent feature (for example it breaks our Salesforce grid that uses `enabledAutoResizeColumnsByCellContent` and uses much thinner column width, if we however skip the width then we make SlickGrid recalculate the width since we use `enabledAutoResizeColumnsByCellContent` and that fixes our problem)

packages/common/src/services/__tests__/gridState.service.spec.ts

@@ -413,13 +413,13 @@ describe('GridStateService', () => {
       // cssClass: red will change to purple and headerCssClass will remain blue when defined in either
       expect(associatedGridColumns).toEqual([
         { id: 'field1', field: 'field1', width: 100, cssClass: 'purple', headerCssClass: 'custom-hdr' },
-        { id: 'field2', field: 'field2', width: 150, cssClass: '', headerCssClass: 'blue' },
-        { id: 'field3', field: 'field3', width: 0, cssClass: '', headerCssClass: '' },
+        { id: 'field2', field: 'field2', width: 150, cssClass: undefined, headerCssClass: 'blue' },
+        { id: 'field3', field: 'field3', width: 0, cssClass: undefined, headerCssClass: undefined },
       ]);
       expect(columns).toEqual([
         { id: 'field1', field: 'field1', width: 100, cssClass: 'purple', headerCssClass: 'custom-hdr' },
-        { id: 'field2', field: 'field2', width: 150, cssClass: '', headerCssClass: 'blue' },
-        { id: 'field3', field: 'field3', width: 0, cssClass: '', headerCssClass: '' },
+        { id: 'field2', field: 'field2', width: 150, cssClass: undefined, headerCssClass: 'blue' },
+        { id: 'field3', field: 'field3', width: 0, cssClass: undefined, headerCssClass: undefined },
       ]);
     });
   });

packages/common/src/services/gridState.service.ts

@@ -21,7 +21,6 @@ import type { FilterService } from './filter.service';
 import type { SharedService } from './shared.service';
 import type { SortService } from './sort.service';
 import type { TreeDataService } from './treeData.service';
-import { objectWithoutKey } from './utilities';
 
 // using external non-typed js libraries
 declare const Slick: SlickNamespace;
@@ -221,7 +220,13 @@ export class GridStateService {
         if (gridColumn?.id) {
           columns.push({
             ...gridColumn,
-            ...objectWithoutKey(currentColumn, 'columnId') // extend all currentCol proops except "columnId" which isn't needed
+            cssClass: currentColumn.cssClass || gridColumn.cssClass,
+            headerCssClass: currentColumn.headerCssClass || gridColumn.headerCssClass,
+
+            // for the width we will only pull the custom width or else nothing
+            // since we don't want to use the default width that SlickGrid uses internally (which is 60px),
+            // because that would cancel any column resize done by Slickgrid-Universal (like autoResizeColumnsByCellContent)
+            width: currentColumn.width
           });
         }
       });