feat(resize): add column resize by cell content

- a quick description of the problem, by default the auto-resize will call the `grid.autosizeColumns()` which will try to find all columns in the grid viewport and that works ok with a small grid but as soon as we have many columns, it starts to wrap many words (with ellipsis) and some user might prefer to resize the column by the cell content (to match the content width with the cell width) and that might mean going wider than the grid viewport.
- so this will be an opt-in feature since it will loop through the entire dataset (by default it will read no more than the first 1000 rows) and find/calculate the width it needs to show the entire text value without word being wrapped, in some cases when having many columns it might make the grid wider than the viewport (in that case the horizontal scroll will appear)

package.json

@@ -110,7 +110,7 @@
     "jquery-ui-dist": "^1.12.1",
     "moment-mini": "^2.24.0",
     "rxjs": "^6.6.7",
-    "slickgrid": "^2.4.33",
+    "slickgrid": "^2.4.34",
     "text-encoding-utf-8": "^1.0.2"
   },
   "peerDependencies": {

src/app/app-routing.module.ts

@@ -20,6 +20,7 @@ import { GridMenuComponent } from './examples/grid-menu.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridRangeComponent } from './examples/grid-range.component';
 import { GridRemoteComponent } from './examples/grid-remote.component';
+import { GridResizeByContentComponent } from './examples/grid-resize-by-content.component';
 import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
 import { GridRowMoveComponent } from './examples/grid-rowmove.component';
 import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
@@ -58,6 +59,7 @@ const routes: Routes = [
   { path: 'odata', component: GridOdataComponent },
   { path: 'range', component: GridRangeComponent },
   { path: 'remote', component: GridRemoteComponent },
+  { path: 'resize-by-content', component: GridResizeByContentComponent },
   { path: 'rowdetail', component: GridRowDetailComponent },
   { path: 'rowmove', component: GridRowMoveComponent },
   { path: 'selection', component: GridRowSelectionComponent },

src/app/app.component.html

@@ -128,6 +128,11 @@
             29- Tree Data (Hierarchical)
           </a>
         </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/resize-by-content']">
+            30- Resize by Cell Content
+          </a>
+        </li>
       </ul>
     </section>
 

src/app/app.module.ts

@@ -35,6 +35,7 @@ import { GridMenuComponent } from './examples/grid-menu.component';
 import { GridOdataComponent } from './examples/grid-odata.component';
 import { GridRangeComponent } from './examples/grid-range.component';
 import { GridRemoteComponent } from './examples/grid-remote.component';
+import { GridResizeByContentComponent } from './examples/grid-resize-by-content.component';
 import { GridRowDetailComponent } from './examples/grid-rowdetail.component';
 import { GridRowMoveComponent } from './examples/grid-rowmove.component';
 import { GridRowSelectionComponent } from './examples/grid-rowselection.component';
@@ -110,6 +111,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
     GridOdataComponent,
     GridRangeComponent,
     GridRemoteComponent,
+    GridResizeByContentComponent,
     GridRowDetailComponent,
     GridRowMoveComponent,
     GridRowSelectionComponent,

src/app/examples/grid-resize-by-content.component.html

@@ -0,0 +1,56 @@
+<div class="container-fluid">
+  <h2>
+    {{title}}
+    <span class="float-right">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-resize-by-content.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <div class="row">
+    <h4 class="ml-3">Container Width (950px)</h4>
+
+    <div class="ml-2 mb-2 mr-2">
+      <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">
+        <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-filter"
+                (click)="handleDefaultResizeColumns()">
+          <i class="fa fa-expand"></i> (default resize) by "autosizeColumns"
+        </button>
+        <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-sorting"
+                (click)="handleNewResizeColumns()">
+          <i class="fa fa-expand"></i> Resize by Cell Content
+        </button>
+      </div>
+    </div>
+
+    <div class="mb-2">
+      <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">
+        <button type="button" class="btn btn-outline-secondary" data-test="toggle-readonly-btn"
+                (click)="toggleGridEditReadonly()">
+          <i class="fa fa-table"></i> Toggle Edit/Readonly Grid
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-test="undo-last-edit-btn"
+                (click)="undoLastEdit()">
+          <i class="fa fa-undo"></i> Undo Last Edit
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-test="save-all-btn"
+                (click)="saveAll()">
+          <i class="fa fa-save"></i> Save All
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div id="smaller-container" style="width: 950px">
+    <angular-slickgrid gridId="grid30"
+                       [columnDefinitions]="columnDefinitions"
+                       [gridOptions]="gridOptions"
+                       [dataset]="dataset"
+                       (onAngularGridCreated)="angularGridReady($event)">
+    </angular-slickgrid>
+  </div>
+</div>

src/app/examples/grid-resize-by-content.component.scss

@@ -0,0 +1,19 @@
+$button-border-color: #ababab !default;
+
+.editable-field {
+  background-color: rgba(227, 240, 251, 0.569) !important;
+}
+.unsaved-editable-field {
+  background-color: #fbfdd1 !important;
+}
+.button-style {
+  cursor: pointer;
+  background-color: white;
+  border: 1px solid #{$button-border-color};
+  border-radius: 2px;
+  justify-content: center;
+  text-align: center;
+  &:hover {
+    border-color: darken($button-border-color, 10%);
+  }
+}