feat(resize): add column resize by cell content (#309)

* 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)

examples/webpack-demo-vanilla-bundle/package.json

@@ -35,25 +35,25 @@
   "devDependencies": {
     "@types/jquery": "^3.5.5",
     "@types/moment": "^2.13.0",
-    "@types/node": "^14.14.37",
+    "@types/node": "^14.14.41",
     "@types/webpack": "^5.28.0",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^8.1.0",
-    "css-loader": "^5.2.0",
+    "copy-webpack-plugin": "^8.1.1",
+    "css-loader": "^5.2.4",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^6.2.1",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "5.3.1",
-    "mini-css-extract-plugin": "^1.4.0",
+    "mini-css-extract-plugin": "^1.5.0",
     "node-sass": "5.0.0",
     "rxjs": "next",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
-    "ts-loader": "^8.1.0",
+    "ts-loader": "^9.0.2",
     "ts-node": "^9.1.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.28.0",
+    "webpack": "^5.34.0",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
   }
-}
+}

examples/webpack-demo-vanilla-bundle/src/app-routing.ts

@@ -17,6 +17,7 @@ export class AppRouting {
       { route: 'example11', name: 'example11', title: 'Example11', moduleId: './examples/example11' },
       { route: 'example12', name: 'example12', title: 'Example12', moduleId: './examples/example12' },
       { route: 'example13', name: 'example13', title: 'Example13', moduleId: './examples/example13' },
+      { route: 'example14', name: 'example14', title: 'Example14', moduleId: './examples/example14' },
       { route: 'example15', name: 'example15', title: 'Example15', moduleId: './examples/example15' },
       { route: 'icons', name: 'icons', title: 'icons', moduleId: './examples/icons' },
       { route: '', redirect: 'example01' },

examples/webpack-demo-vanilla-bundle/src/app.html

@@ -72,6 +72,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example13')">
             Example13 - Header Button Plugin
           </a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example14')">
+            Example14 - Columns Resize by Content
+          </a>
           <a class="navbar-item" onclick.delegate="loadRoute('example15')">
             Example15 - OData Backend Service with RxJS
           </a>

examples/webpack-demo-vanilla-bundle/src/examples/example14.html

@@ -0,0 +1,70 @@
+<h3 class="title is-3">
+  Example 14 - Columns Resize by Content
+  <span class="subtitle is-size-5 has-text-grey-dark">(with Salesforce Theme)</span>
+  <div class="subtitle" style="float: right; margin-top: -20px">
+    <a class="is-size-5"
+       target="_blank"
+       href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/webpack-demo-vanilla-bundle/src/examples/example14.ts">
+      <span class="mdi mdi-link mdi-v-align-sub"></span> code
+    </a>
+  </div>
+</h3>
+
+<div class="columns">
+  <div class="column is-three-quarters">
+    <p>
+      The grid below uses the optional resize by cell content (with a fixed 1000px for demo purposes), you can click on
+      the 2 buttons to see the difference.
+      The "autosizeColumns" is really the default option used by SlickGrid-Universal, the resize by cell content is
+      optional because it requires to read the first thousand rows and do extra width calculation.
+    </p>
+  </div>
+</div>
+
+<hr />
+
+<div class="columns">
+  <div class="column field is-narrow">
+    <h4 class="title is-4">Container Width (1000px)</h4>
+  </div>
+  <div class="column field has-addons is-narrow">
+    <p class="control">
+      <button class="button is-small" onclick.delegate="handleDefaultResizeColumns()" data-text="autosize-columns-btn">
+        <span class="icon mdi mdi-arrow-expand"></span>
+        <span>(default resize) "autosizeColumns"</span>
+      </button>
+    </p>
+    <p class="control">
+      <button class="button is-small" onclick.delegate="handleNewResizeColumns()" data-text="resize-by-content-btn">
+        <span class="icon mdi mdi-arrow-expand"></span>
+        <span>Resize by Cell Content</span>
+      </button>
+    </p>
+  </div>
+
+  <div class="column field has-addons is-narrow">
+    <p class="control">
+      <button class="button is-small" onclick.delegate="toggleGridEditReadonly()" data-test="toggle-readonly-btn">
+        <span class="icon mdi mdi-table-edit"></span>
+        <span>Toggle Edit/Readonly Grid</span>
+      </button>
+    </p>
+    <p class="control">
+      <button class="button is-small" onclick.delegate="undoLastEdit()" data-test="undo-last-edit-btn">
+        <span class="icon mdi mdi-undo"></span>
+        <span>Undo Last Edit</span>
+      </button>
+    </p>
+    <p class="control">
+      <button class="button is-small is-info" onclick.delegate="saveAll()" data-test="save-all-btn"
+              title="Check your console log for the result">
+        <span>Save All</span>
+      </button>
+    </p>
+  </div>
+</div>
+
+<div style="width: 1000px" class="grid-container">
+  <div class="grid1">
+  </div>
+</div>

examples/webpack-demo-vanilla-bundle/src/examples/example14.scss

@@ -0,0 +1,5 @@
+$autocomplete-max-height: 250px !default;
+$control-height: 2.4em;
+
+@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
+@import 'bulma/bulma';