diff --git a/src/columnmanager.js b/src/columnmanager.js index 508a055..b483276 100644 --- a/src/columnmanager.js +++ b/src/columnmanager.js @@ -14,6 +14,7 @@ export default class ColumnManager { 'fireEvent', 'header', 'datamanager', + 'cellmanager', 'style', 'wrapper', 'rowmanager', @@ -59,6 +60,7 @@ export default class ColumnManager { bindEvents() { this.bindDropdown(); this.bindResizeColumn(); + this.bindPerfectColumnWidth(); this.bindFilter(); } @@ -193,6 +195,38 @@ export default class ColumnManager { }); } + bindPerfectColumnWidth() { + $.on(this.header, 'dblclick', '.dt-cell .dt-cell__resize-handle', (e, $handle) => { + const $cell = $handle.parentNode.parentNode; + const { colIndex } = $.data($cell); + + let longestCell = this.bodyRenderer.visibleRows + .map(d => d[colIndex]) + .reduce((acc, curr) => acc.content.length > curr.content.length ? acc : curr); + + let $longestCellHTML = this.cellmanager.getCellHTML(longestCell); + let $div = document.createElement('div'); + $div.innerHTML = $longestCellHTML; + let cellText = $div.querySelector('.dt-cell__content').textContent; + + let { + borderLeftWidth, + borderRightWidth, + paddingLeft, + paddingRight + } = $.getStyle(this.bodyScrollable.querySelector('.dt-cell__content')); + + let padding = [borderLeftWidth, borderRightWidth, paddingLeft, paddingRight] + .map(parseFloat) + .reduce((sum, val) => sum + val); + + let width = $.measureTextWidth(cellText) + padding; + this.datamanager.updateColumn(colIndex, { width }); + this.setColumnHeaderWidth(colIndex); + this.setColumnWidth(colIndex); + }); + } + bindMoveColumn() { const $parent = $('.dt-row', this.header); diff --git a/src/dom.js b/src/dom.js index bb921d6..be1177c 100644 --- a/src/dom.js +++ b/src/dom.js @@ -138,6 +138,10 @@ $.removeStyle = (elements, styleProps) => { }; $.getStyle = (element, prop) => { + if (!prop) { + return getComputedStyle(element); + } + let val = getComputedStyle(element)[prop]; if (['width', 'height'].includes(prop)) {