From 84b7fa3d83ecf5ed38f14b9af0f337f156ee7acb Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Thu, 11 Oct 2018 13:05:25 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20More=20robust=20column=20?=
 =?UTF-8?q?width=20calculation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Set minimum column width based on options (default 70), also measure
rowIndex column directly in DOM
---
 src/defaults.js |  1 +
 src/dom.js      | 13 +++++++++++++
 src/style.js    | 32 ++++++++++++++++++++------------
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/defaults.js b/src/defaults.js
index 2235ef3..215feb5 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -53,6 +53,7 @@ export default {
     layout: 'fixed', // fixed, fluid, ratio
     noDataMessage: 'No Data',
     cellHeight: 40,
+    minimumColumnWidth: 70,
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
diff --git a/src/dom.js b/src/dom.js
index c08ff85..13e1050 100644
--- a/src/dom.js
+++ b/src/dom.js
@@ -204,3 +204,16 @@ $.scrollbarWidth = function scrollbarWidth() {
 $.hasVerticalOverflow = function (element) {
     return element.scrollHeight > element.offsetHeight + 10;
 };
+
+
+$.measureTextWidth = function(text) {
+    const div = document.createElement('div');
+    div.style.position = 'absolute';
+    div.style.visibility = 'hidden';
+    div.style.height = 'auto';
+    div.style.width = 'auto';
+    div.style.whiteSpace = 'nowrap';
+    div.innerText = text;
+    document.body.appendChild(div);
+    return div.clientWidth + 1;
+}
\ No newline at end of file
diff --git a/src/style.js b/src/style.js
index 5cda80b..6a947f1 100644
--- a/src/style.js
+++ b/src/style.js
@@ -145,6 +145,17 @@ export default class Style {
     setupNaturalColumnWidth() {
         if (!$('.dt-row')) return;
 
+        $.each('.dt-row-header .dt-cell', this.header).map($headerCell => {
+            const { colIndex } = $.data($headerCell);
+            const column = this.datamanager.getColumn(colIndex);
+            let width = $.style($('.dt-cell__content', $headerCell), 'width');
+            if (typeof width === 'number' && width >= this.options.minimumColumnWidth) {
+                column.naturalWidth = width;
+            } else {
+                column.naturalWidth = this.options.minimumColumnWidth;
+            }
+        });
+
         // set initial width as naturally calculated by table's first row
         $.each('.dt-row-0 .dt-cell', this.bodyScrollable).map($cell => {
             const {
@@ -155,11 +166,15 @@ export default class Style {
             let naturalWidth = $.style($('.dt-cell__content', $cell), 'width');
 
             if (column.id === '_rowIndex') {
-                naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
+                naturalWidth = this.getRowIndexColumnWidth();
                 column.width = naturalWidth;
             }
 
-            column.naturalWidth = naturalWidth;
+            if (typeof naturalWidth === 'number' && naturalWidth >= this.options.minimumColumnWidth) {
+                column.naturalWidth = naturalWidth;
+            } else {
+                column.naturalWidth = this.options.minimumColumnWidth;
+            }
         });
     }
 
@@ -308,16 +323,9 @@ export default class Style {
         return $(`.dt-cell--col-${colIndex}`, this.header);
     }
 
-    getRowIndexColumnWidth(baseWidth) {
-        this._rowIndexColumnWidthMap = this._rowIndexColumnWidthMap || {};
+    getRowIndexColumnWidth() {
         const rowCount = this.datamanager.getRowCount();
-        const digits = (rowCount + '').length;
-
-        if (!this._rowIndexColumnWidthMap[digits]) {
-            // add 8px for each unit
-            this._rowIndexColumnWidthMap[digits] = baseWidth + ((digits - 1) * 8);
-        }
-
-        return this._rowIndexColumnWidthMap[digits];
+        const padding = 22;
+        return $.measureTextWidth(rowCount + '') + padding;
     }
 }