fix: 🐛 More robust column width calculation

Set minimum column width based on options (default 70), also measure
rowIndex column directly in DOM

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,

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;
+}

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;
     }
 }