@refinitiv-ui/efx-grid 6.0.0-next.0

package/lib/tr-grid-column-fitter/es6/ColumnFitter.js

@@ -0,0 +1,1000 @@
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+/** @typedef {Object} ColumnFitterPlugin~Options
+* @description The options can be specified by `columnFitting` property of the main grid's options
+* @property {boolean=} proportion=false Proportionally expand columns, if there is enough space
+* @property {boolean=} constraint=false Prevents column width to go lower than its content size
+* @property {(boolean|number)=} autoAdjust=false Automatic column width adjusting on each data update
+* @property {(boolean|number)=} autoAdjusting=false Alias to `autoAdjust`
+* @property {boolean=} title=false Include title section in the fitting calculation
+* @property {number=} paddingSize=2 Additional padding from existing cell padding. This will add extra space (in pixel) to the right of the longest text.
+* @property {boolean=} shrinkable=false Allow column width to be shrunken during autoAdjust enabled
+*/
+
+/** @typedef {Object} ColumnFitterPlugin~ColumnOptions
+* @description Extension column options that can be specified on each individual grid's column option:
+* @property {boolean=} noFitting=false If enabled, the given column will not be included in the calculation
+* @property {boolean=} contentFitting=false By default, fitting extension only calculate text content. Enable this option to support custom rendering fitting for a specified column
+* @property {number=} minWidth Minimum width of the column
+* @property {number=} maxWidth Maximum width of the column
+*/
+
+/** @constructor
+* @param {ColumnFitterPlugin~Options=} options
+* @extends {GridPlugin}
+*/
+
+var ColumnFitterPlugin = function ColumnFitterPlugin(options) {
+  this._onItemResizeThisColumnClicked = this._onItemResizeThisColumnClicked.bind(this);
+  this._onItemResizeAllColumnClicked = this._onItemResizeAllColumnClicked.bind(this);
+  this._onPostSectionDataBinding = this._onPostSectionDataBinding.bind(this);
+  this._onColumnAdded = this._onColumnAdded.bind(this);
+  this._onTimeout = this._onTimeout.bind(this);
+  this._hosts = [];
+  this._dummyCells = [];
+  this._cellPaddings = [];
+  this.config(options);
+};
+
+Ext.inherits(ColumnFitterPlugin, GridPlugin);
+/** @type {number}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._paddingSize = 2;
+/** @type {boolean}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._defaultPadding = true;
+/** @type {boolean}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._autoAdjust = false;
+/** @type {boolean}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._constraint = false;
+/** @type {boolean}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._proportion = false;
+/** If true, include title sections into the calculation
+* @type {boolean}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._title = false;
+/** Column can be shrunken after initial fitting
+* @type {boolean}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._shrinkable = false;
+/** @type {number}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._interval = 300;
+/** @type {number}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._timerId = 0;
+/** @type {Array.<Element>}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._dummyCells = null;
+/** @type {Array.<number>}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._cellPaddings = null;
+/** @type {number}
+* @private
+*/
+
+ColumnFitterPlugin.prototype._synchronousRendering = true;
+/** @public
+* @return {string}
+*/
+
+ColumnFitterPlugin.prototype.getName = function () {
+  return "ColumnFitterPlugin"; // Read Only
+};
+/**
+* @override
+* @return {boolean}
+*/
+
+
+ColumnFitterPlugin.prototype.hasMultiTableSupport = function () {
+  return true;
+};
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+
+
+ColumnFitterPlugin.prototype.initialize = function (host, options) {
+  if (this._hosts.indexOf(host) >= 0) {
+    return;
+  } // In case of multi-grid, grace period will be used multiple times because extension is a single instance.
+
+
+  this._synchronousRendering = true;
+
+  this._hosts.push(host);
+
+  if (options) {
+    var pluginOptions = options["columnFitting"] || {}; // Avoid using properties from the main object
+
+    pluginOptions.columns = options["columns"]; // Retrieved property defined in the column
+
+    this.config(pluginOptions);
+  }
+
+  if (this._autoAdjust) {
+    host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+  }
+
+  host.listen("columnAdded", this._onColumnAdded); // In case of lazy loading
+
+  this._onPostSectionDataBinding();
+};
+/** @public
+* @param {Object} host core grid object
+*/
+
+
+ColumnFitterPlugin.prototype.unload = function (host) {
+  var at = this._hosts.indexOf(host);
+
+  if (at < 0) {
+    return;
+  }
+
+  this._hosts.splice(at, 1);
+
+  host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+  host.unlisten("columnAdded", this._onColumnAdded);
+
+  if (!this._hosts.length) {
+    if (this._timerId) {
+      clearTimeout(this._timerId);
+      this._timerId = 0;
+    }
+  }
+};
+/** @public
+* @param {ColumnFitterPlugin~Options=} options
+*/
+
+
+ColumnFitterPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+
+  var columns = options["columns"];
+
+  if (columns) {
+    var column,
+        len = columns.length;
+
+    for (var c = 0; c < len; ++c) {
+      column = columns[c];
+
+      this._retrieveBooleanColumnOption(column, "noFitting", c);
+
+      this._retrieveBooleanColumnOption(column, "contentFitting", c);
+
+      this._retrieveColumnOption(column, "width", c);
+
+      this._retrieveColumnOption(column, "scalable", c);
+
+      this._retrieveColumnOption(column, "minWidth", c); // NOTE: minWidth is also used in core grid. This will make minWidth option redundant.
+
+
+      this._retrieveColumnOption(column, "maxWidth", c);
+    }
+  }
+
+  this._proportion = ColumnFitterPlugin._readBoolean(options, "proportion", this._proportion);
+  this._constraint = ColumnFitterPlugin._readBoolean(options, "constraint", this._constraint);
+  this._title = ColumnFitterPlugin._readBoolean(options, "title", this._title);
+  this._shrinkable = ColumnFitterPlugin._readBoolean(options, "shrinkable", this._shrinkable);
+
+  if (this._proportion) {
+    var host = this._hosts[this._hosts.length - 1];
+
+    if (host) {
+      host.preserveProportion(true);
+    }
+  }
+
+  var val = options["autoAdjust"] || options["autoAdjusting"];
+
+  if (val != null) {
+    this._autoAdjust = val ? true : false;
+
+    if (typeof val === "number") {
+      this._interval = val;
+    }
+  }
+
+  var paddingSize =
+  /** @type {number} */
+  options["paddingSize"];
+
+  if (paddingSize != null) {
+    this._defaultPadding = false;
+    this._paddingSize = paddingSize;
+  }
+
+  if (this._defaultPadding) {
+    // Title section need extra padding to avoid ellipsis
+    this._paddingSize = this._title ? 4 : 2;
+  }
+};
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+
+
+ColumnFitterPlugin.prototype.getConfigObject = function (gridOptions) {
+  var obj = gridOptions || {};
+  var columns = obj.columns;
+
+  if (!columns) {
+    columns = obj.columns = [];
+  }
+
+  var len = this.getColumnCount();
+
+  for (var i = 0; i < len; ++i) {
+    var column = columns[i];
+
+    if (!column) {
+      column = columns[i] = {};
+    }
+
+    var colOptions = this._getColumnOption(i, "noFitting");
+
+    if (colOptions) {
+      column.noFitting = true;
+    }
+  }
+
+  var extOptions = obj.columnFitting;
+
+  if (!extOptions) {
+    extOptions = obj.columnFitting = {};
+  }
+
+  if (this._proportion) {
+    extOptions.proportion = true;
+  }
+
+  if (this._constraint) {
+    extOptions.constraint = true;
+  }
+
+  if (this._title) {
+    extOptions.title = true;
+  }
+
+  if (this._shrinkable) {
+    extOptions.shrinkable = true;
+  }
+
+  if (this._autoAdjust) {
+    extOptions.autoAdjust = true;
+  }
+
+  if (!this._defaultPadding) {
+    extOptions.paddingSize = this._paddingSize;
+  }
+
+  return obj;
+};
+/** Function for ColumnMenuExtension to collect config of column menu
+* @public
+* @param {number} colIndex Column index
+* @param {Object} config Column Menu configuration
+* @return {!Object}
+*/
+
+
+ColumnFitterPlugin.prototype.getColumnMenu = function (colIndex, config) {
+  if (!config) {
+    config = {};
+  }
+
+  var menus = config.menus;
+
+  if (!menus) {
+    menus = config.menus = [];
+  }
+
+  var menu = menus[0];
+
+  if (!menu) {
+    menu = menus[0] = {
+      menuItems: []
+    };
+  } // Menu items for this extension
+
+
+  var group = "USED_ONCE";
+  var extMenuItems = [{
+    indexScore: 2,
+    label: "Autosize This Column",
+    group: group,
+    value: {
+      colIndex: colIndex
+    },
+    click: this._onItemResizeThisColumnClicked
+  }, {
+    indexScore: 1,
+    label: "Autosize All Columns",
+    group: group,
+    click: this._onItemResizeAllColumnClicked
+  }]; // Push menu items to config
+
+  Array.prototype.push.apply(menu.menuItems, extMenuItems);
+  return config;
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnFitterPlugin.prototype._onItemResizeThisColumnClicked = function (e) {
+  this.adjustColumnWidth(e.currentTarget.value.colIndex);
+
+  this._hideColumnMenu();
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnFitterPlugin.prototype._onItemResizeAllColumnClicked = function (e) {
+  this.adjustAllColumns();
+
+  this._hideColumnMenu();
+};
+/** @private
+*/
+
+
+ColumnFitterPlugin.prototype._hideColumnMenu = function () {
+  var host = this._hosts[0];
+  var columnMenuExt = host.getPlugin('ColumnMenuPlugin');
+  columnMenuExt.hide();
+};
+/** @private
+* @param {Object} column
+* @param {string} propName
+* @param {number} colIndex
+*/
+
+
+ColumnFitterPlugin.prototype._retrieveBooleanColumnOption = function (column, propName, colIndex) {
+  if (column) {
+    var bool = ColumnFitterPlugin._readBoolean(column, propName, false);
+
+    this._newColumnData(colIndex)[propName] = bool;
+  }
+};
+/** @private
+* @param {Object} column
+* @param {string} propName
+* @param {number} colIndex
+*/
+
+
+ColumnFitterPlugin.prototype._retrieveColumnOption = function (column, propName, colIndex) {
+  if (column) {
+    var val = column[propName];
+
+    if (val != null) {
+      this._newColumnData(colIndex)[propName] = val;
+    }
+  }
+};
+/** Guarantee boolean value
+* @private
+* @function
+* @param {Object} obj
+* @param {string} propName
+* @param {boolean} defaultVal
+* @return {boolean}
+*/
+
+
+ColumnFitterPlugin._readBoolean = function (obj, propName, defaultVal) {
+  var val = obj[propName];
+
+  if (val != null) {
+    return val ? true : false;
+  } else {
+    return defaultVal;
+  }
+};
+/** Force update and calculation on a single column. It is not recommended to be used multiple time successively
+* @public
+* @param {Array.<number>=} colIndex Column indices
+* @return {boolean} True if there is any change, otherwise false
+*/
+
+
+ColumnFitterPlugin.prototype.adjustColumnWidth = function (colIndex) {
+  return this.adjustColumns([colIndex]);
+};
+/** Force update and calculation on specific columns
+* @public
+* @param {Array.<number>=} colIndices Column indices
+* @param {boolean=} force=true Force adjust the columns regardless of noFitting flag
+* @return {boolean} True if there is any change, otherwise false
+*/
+
+
+ColumnFitterPlugin.prototype.adjustColumns = function (colIndices, force) {
+  if (force == null) {
+    force = true;
+  }
+
+  var candidates = this._collectCandidates(colIndices, force);
+
+  var len = candidates.length;
+
+  if (!len) {
+    return false; // No valid column to be processed
+  }
+
+  var i, cd;
+
+  for (i = 0; i < len; ++i) {
+    cd = candidates[i];
+
+    if (cd.text) {
+      cd.elem.appendChild(this._getDummyCell(cd.index, cd.text)); // TODO: Handle case where the column is hidden or virtualized.
+    }
+  }
+
+  var host = this._hosts[0];
+  var widths = new Array(host.getColumnCount());
+
+  for (i = 0; i < len; ++i) {
+    cd = candidates[i];
+
+    var width = this._calculateCellWidth(cd.index, host, cd.width); // WARNING: Only the first host is used
+
+
+    var prevW = cd.elem._caclWidth || 0;
+
+    if (width > prevW) {
+      // Exclude zero width
+      widths[cd.index] = width;
+
+      if (this._autoAdjust && !this._shrinkable) {
+        cd.elem._caclWidth = width;
+      }
+    }
+  } // Remove all dummy cells
+
+
+  for (i = 0; i < len; ++i) {
+    var dummy = this._dummyCells[candidates[i].index];
+
+    if (dummy && dummy.parentNode) {
+      dummy.parentNode.removeChild(dummy);
+      dummy.textContent = ""; // Reduce cache memory
+    }
+  }
+
+  var dirty = 0;
+  var hostCount = this._hosts.length;
+
+  if (this._constraint) {
+    for (i = 0; i < hostCount; ++i) {
+      host = this._hosts[i];
+      dirty |= host.setMinimumColumnWidths(widths);
+    }
+  } else {
+    for (i = 0; i < hostCount; ++i) {
+      host = this._hosts[i];
+
+      if (host.isProportionPreserved()) {
+        // Get proportion mode from grid
+        var columnScalability = [];
+
+        for (var columnIndex = 0; columnIndex < len; columnIndex++) {
+          columnScalability.push(host.getColumnScalability(columnIndex));
+        }
+
+        dirty |= host.setColumnWidths(widths, columnScalability);
+      } else {
+        dirty |= host.setColumnWidths(widths);
+      }
+    }
+  }
+
+  this._synchronousRendering = false; // Next time will render asynchronously
+
+  return !!dirty;
+};
+/** Force update and calculation on all columns
+* @public
+* @return {boolean} True if there is any change, otherwise false
+*/
+
+
+ColumnFitterPlugin.prototype.adjustAllColumns = function () {
+  return this.adjustColumns();
+};
+/** @public
+* @param {number} colIndex
+* @return {number}
+*/
+
+
+ColumnFitterPlugin.prototype.calculateColumnWidth = function (colIndex) {
+  var host = this._hosts[0];
+  var section = host ? host.getSection("content") : null;
+
+  if (!section) {
+    return NaN;
+  }
+
+  var colObj = section.getColumn(colIndex);
+
+  if (!colObj) {
+    return NaN; // The given column does not exist
+  }
+
+  var noFitting = this._getColumnOption(colIndex, "noFitting");
+
+  if (noFitting) {
+    return NaN;
+  }
+
+  var width, dummyCell;
+
+  var contentFitting = this._getColumnOption(colIndex, "contentFitting");
+
+  if (contentFitting) {
+    width = this._getColumnFitContentWidth(colIndex);
+    width = this._calculateCellWidth(colIndex, host, width);
+  } else {
+    var text = this._getColumnFitContentText(colIndex);
+
+    dummyCell = this._getDummyCell(colIndex, text);
+    var columnElem = colObj.getElement();
+    columnElem.appendChild(dummyCell);
+    width = this._calculateCellWidth(colIndex, host);
+    columnElem.removeChild(dummyCell);
+  }
+
+  return width;
+};
+/** This is for backward compatability with old ColumnWidthAdjustingPlugin. The method is an alias of {@link ColumnFitterPlugin#calculateColumnWidth}
+* @public
+* @function
+* @param {number} colIndex
+* @return {number}
+*/
+
+
+ColumnFitterPlugin.prototype.getAdjustedColumnWidth = ColumnFitterPlugin.prototype.calculateColumnWidth;
+/** Set all column widths to percentage width
+* @public
+*/
+
+ColumnFitterPlugin.prototype.resetAllColumns = function () {
+  var hosts = this._hosts;
+  var colCount = this.getColumnCount();
+  var host, width, proportion;
+
+  for (var i = 0; i < hosts.length; i++) {
+    host = hosts[i];
+
+    for (var c = 0; c < colCount; c++) {
+      width = this._getColumnOption(c, "width");
+      proportion = this._getColumnOption(c, "scalable");
+
+      if (width != null) {
+        host.setColumnWidth(c, width, false);
+      } else {
+        host.setColumnWidth(c, 100, proportion !== false);
+      }
+    }
+  }
+};
+/** @private */
+
+
+ColumnFitterPlugin.prototype._onPostSectionDataBinding = function () {
+  if (!this._autoAdjust) {
+    return;
+  }
+
+  if (this._synchronousRendering) {
+    this.adjustColumns(null, false);
+    return;
+  }
+
+  if (!this._timerId) {
+    this._timerId = setTimeout(this._onTimeout, this._interval);
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnFitterPlugin.prototype._onColumnAdded = function (e) {
+  var context = e.context;
+  var colIndex = e.colIndex;
+
+  this._retrieveBooleanColumnOption(context, "noFitting", colIndex);
+
+  this._retrieveBooleanColumnOption(context, "contentFitting", colIndex);
+
+  this._retrieveColumnOption(context, "width", colIndex);
+
+  this._retrieveColumnOption(context, "scalable", colIndex);
+
+  this._retrieveColumnOption(context, "minWidth", colIndex); // NOTE: minWidth is also used in core grid. This will make minWidth option redundant.
+
+
+  this._retrieveColumnOption(context, "maxWidth", colIndex);
+
+  this._synchronousRendering = true;
+};
+/** @private */
+
+
+ColumnFitterPlugin.prototype._onTimeout = function () {
+  this._timerId = 0;
+  this.adjustColumns(null, false);
+};
+/** @private
+* @param {Array.<number>=} colIndices Column indices
+* @param {boolean} force
+* @return {!Array.<Object>}
+*/
+
+
+ColumnFitterPlugin.prototype._collectCandidates = function (colIndices, force) {
+  var host = this._hosts[0];
+  var section = host ? host.getSection("content") : null;
+
+  if (!section) {
+    return [];
+  }
+
+  var candidate;
+  var candidates = [];
+  var len = colIndices ? colIndices.length : host.getColumnCount();
+
+  for (var i = 0; i < len; ++i) {
+    candidate = this._collectCandidate(section, colIndices ? colIndices[i] : i, force);
+
+    if (candidate) {
+      candidates.push(candidate);
+    }
+  }
+
+  return candidates;
+};
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} colIndex
+* @param {boolean} force
+* @return {Object}
+*/
+
+
+ColumnFitterPlugin.prototype._collectCandidate = function (section, colIndex, force) {
+  var colObj = section.getColumn(colIndex);
+
+  if (colObj) {
+    var obj = {
+      index: colIndex,
+      elem: colObj.getElement()
+    };
+    var noFitting = force ? false : this._getColumnOption(colIndex, "noFitting");
+
+    var contentFitting = this._getColumnOption(colIndex, "contentFitting");
+
+    if (!noFitting) {
+      if (contentFitting) {
+        var width = this._getColumnFitContentWidth(colIndex);
+
+        if (width > 0) {
+          obj.width = width;
+        }
+      } else {
+        var text = this._getColumnFitContentText(colIndex);
+
+        if (text) {
+          obj.text = text;
+        }
+      }
+    }
+
+    return obj;
+  }
+
+  return null;
+};
+/** @private
+* @description Calculate width of cell's custom rendered content
+* @param {number} colIndex
+* @return {number}
+*/
+
+
+ColumnFitterPlugin.prototype._getColumnFitContentWidth = function (colIndex) {
+  var w, contentWidth;
+  var width = 0;
+
+  var cellPadding = this._getCellPadding(colIndex);
+
+  for (var i = this._hosts.length; --i >= 0;) {
+    var host = this._hosts[i];
+    var sections = host.getAllSections("content");
+    var sectionCount = sections.length;
+
+    for (var s = 0; s < sectionCount; s++) {
+      var section = sections[s];
+      var rowCount = section.getRowCount();
+
+      for (var r = 0; r < rowCount; r++) {
+        var cell = section.getCell(colIndex, r, false);
+
+        if (!cell) {
+          continue;
+        }
+
+        var cellElem = cell.getElement();
+
+        if (cellElem.classList.contains("tr-stretched")) {
+          continue;
+        }
+
+        var content = cell.getContent();
+
+        if (content && cellElem && cell.isVisible()) {
+          w = contentWidth = content.offsetWidth;
+          var children = content.children;
+
+          var isWidth100Pct = ColumnFitterPlugin._almost100Pct(contentWidth + cellPadding, cellElem.offsetWidth);
+
+          var hasChild = children.length > 0;
+
+          if (isWidth100Pct && hasChild) {
+            // Content width is 100% of cell.
+            w = ColumnFitterPlugin._sumChildrenWidth(children); // Use children to calculate width
+          }
+
+          if (w > width) {
+            width = w;
+          }
+        }
+      }
+    }
+  }
+
+  if (!width) {
+    // If there is no with, clear cell padding cache.
+    this._cellPaddings[colIndex] = 0;
+    return 0;
+  }
+
+  return width + cellPadding;
+};
+/** @private
+* @param {number} colIndex
+* @return {string}
+*/
+
+
+ColumnFitterPlugin.prototype._getColumnFitContentText = function (colIndex) {
+  var maxLen = NaN;
+  var filteringChars = 3; // TODO: Change this default value
+
+  var texts = [];
+
+  for (var i = this._hosts.length; --i >= 0;) {
+    var host = this._hosts[i];
+    var sections = host.getAllSections("content"); // TODO: Get data from the datasource
+
+    if (this._title) {
+      sections = host.getAllSections("title").concat(sections);
+    }
+
+    var sectionCount = sections.length;
+
+    for (var s = 0; s < sectionCount; s++) {
+      var section = sections[s];
+      var rowCount = section.getRowCount();
+
+      for (var r = 0; r < rowCount; r++) {
+        var cell = section.getCell(colIndex, r, false); // Ignore cell span
+
+        if (!cell) {
+          continue;
+        }
+
+        var text = cell.getTextContent(); // Content can only be string
+
+        if (text && cell.getElement() && cell.isVisible()) {
+          // Due to timer nature of the algorithm
+          var textLen = text.length;
+
+          if (textLen <= maxLen) {
+            if (textLen >= maxLen - filteringChars) {
+              texts.push(text);
+            }
+          } else {
+            maxLen = textLen;
+            texts.push(text);
+          }
+        }
+      }
+    }
+  }
+
+  return texts.length ? texts.join("\n") : "";
+};
+/** @private
+* @param {number} colIndex
+* @param {string=} text
+* @return {Element}
+*/
+
+
+ColumnFitterPlugin.prototype._getDummyCell = function (colIndex, text) {
+  var dummyCell = this._dummyCells[colIndex];
+
+  if (!dummyCell) {
+    dummyCell = this._dummyCells[colIndex] = ColumnFitterPlugin._createDummyCell();
+  }
+
+  if (text) {
+    // TODO: Check if we can find a better way to improve innerText
+    dummyCell.innerText = text; // innerText will populate <br> tag from the newline character '\n'
+  }
+
+  return dummyCell;
+};
+/** @private
+* @param {number} colIndex
+* @return {number}
+*/
+
+
+ColumnFitterPlugin.prototype._getCellPadding = function (colIndex) {
+  var cellPadding = this._cellPaddings[colIndex];
+
+  if (cellPadding > 0) {
+    return cellPadding;
+  }
+
+  var host = this._hosts[0];
+  var section = host ? host.getSection("content") : null;
+  var colObj = section.getColumn(colIndex);
+
+  if (!colObj) {
+    cellPadding = this._cellPaddings[colIndex] = NaN;
+    return cellPadding;
+  }
+
+  var columnElem = colObj.getElement();
+
+  var dummyCell = ColumnFitterPlugin._createDummyCell();
+
+  columnElem.appendChild(dummyCell);
+  var width = this._cellPaddings[colIndex] = dummyCell.offsetWidth;
+  columnElem.removeChild(dummyCell);
+  return width;
+};
+/** @private
+* @param {number} colIndex
+* @param {Object} grid core grid object
+* @param {number=} opt_width Optional initial width
+* @return {number}
+*/
+
+
+ColumnFitterPlugin.prototype._calculateCellWidth = function (colIndex, grid, opt_width) {
+  var minWidth = NaN;
+  var maxWidth = NaN;
+  var colDef = grid.getColumnData(colIndex);
+
+  if (colDef) {
+    minWidth = colDef["minWidth"] || NaN;
+    maxWidth = colDef["maxWidth"] || NaN;
+  }
+
+  var width;
+
+  if (opt_width) {
+    width = opt_width;
+  } else {
+    var dummyCell = this._dummyCells[colIndex];
+
+    if (dummyCell) {
+      // NOTE: If font isn't cached, comparison is being done against Arial instead of Proxima Nova, thus yielding wrong offsetwidth
+      width = dummyCell.offsetWidth; // TODO: Handle case where the column is hidden or virtualized
+    }
+  }
+
+  if (width) {
+    width += this._paddingSize;
+
+    if (width > maxWidth) {
+      width = maxWidth;
+    }
+
+    if (width < minWidth) {
+      width = minWidth;
+    }
+  }
+
+  return width;
+};
+/** @private
+* @param {NodeList} childNodes
+* @return {number}
+*/
+
+
+ColumnFitterPlugin._sumChildrenWidth = function (childNodes) {
+  var len = childNodes.length;
+
+  if (len > 0) {
+    var last = childNodes[len - 1];
+    var first = childNodes[0];
+    return last.offsetWidth + last.offsetLeft - first.offsetLeft;
+  }
+
+  return 0;
+};
+/** @private
+* @return {Element}
+*/
+
+
+ColumnFitterPlugin._createDummyCell = function () {
+  var dummyCell = document.createElement("div");
+  dummyCell.className = "cell";
+  dummyCell.style.whiteSpace = "nowrap"; // Inline style will override everything
+
+  dummyCell.style.width = "auto";
+  dummyCell.style.display = "table";
+  return dummyCell;
+};
+/** @private
+* @param {number} val1
+* @param {number} val2
+* @return {boolean}
+*/
+
+
+ColumnFitterPlugin._almost100Pct = function (val1, val2) {
+  return (val1 > val2 ? val2 / val1 : val1 / val2) >= 0.97;
+};
+
+export default ColumnFitterPlugin;
+export { ColumnFitterPlugin, ColumnFitterPlugin as ColumnFitter, ColumnFitterPlugin as ColumnFitterExtension };