setColumnWidth based on column property
This commit is contained in:
Faris Ansari
parent
eb800beb90
commit
51e077cad3
@ -1779,9 +1779,7 @@ var ColumnManager = function () {
|
||||
var _$$data4 = _dom2.default.data($resizingCell),
|
||||
colIndex = _$$data4.colIndex;
|
||||
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
|
||||
|
||||
_this3.setColumnWidth(colIndex, width);
|
||||
_this3.setColumnWidth(colIndex);
|
||||
_this3.instance.setBodyWidth();
|
||||
$resizingCell = null;
|
||||
});
|
||||
@ -1797,8 +1795,8 @@ var ColumnManager = function () {
|
||||
// don't resize past minWidth
|
||||
return;
|
||||
}
|
||||
|
||||
_this3.setColumnHeaderWidth(colIndex, finalWidth);
|
||||
_this3.datamanager.updateColumn(colIndex, { width: finalWidth });
|
||||
_this3.setColumnHeaderWidth(colIndex);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@ -1818,16 +1816,6 @@ var ColumnManager = function () {
|
||||
|
||||
var $parent = (0, _dom2.default)('.data-table-row', _this4.header);
|
||||
|
||||
_dom2.default.on(document, 'drag', '.data-table-col', (0, _utils.throttle)(function (e, $target) {
|
||||
if (e.offsetY > 200) {
|
||||
$target.classList.add('remove-column');
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
$target.classList.remove('remove-column');
|
||||
}, 10);
|
||||
}
|
||||
}));
|
||||
|
||||
_this4.sortable = _sortablejs2.default.create($parent, {
|
||||
onEnd: function onEnd(e) {
|
||||
var oldIndex = e.oldIndex,
|
||||
@ -1951,9 +1939,9 @@ var ColumnManager = function () {
|
||||
value: function setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
this.setupMinWidth();
|
||||
this.setNaturalColumnWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnAlignments();
|
||||
this.setColumnStyle();
|
||||
}
|
||||
}, {
|
||||
key: 'setHeaderStyle',
|
||||
@ -1972,7 +1960,7 @@ var ColumnManager = function () {
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
var nonResizableColumnsSelector = this.datamanager.getColumns().filter(function (col) {
|
||||
return col.resizable !== undefined && !col.resizable;
|
||||
return col.resizable === false;
|
||||
}).map(function (col) {
|
||||
return col.colIndex;
|
||||
}).map(function (i) {
|
||||
@ -1988,46 +1976,42 @@ var ColumnManager = function () {
|
||||
value: function setupMinWidth() {
|
||||
var _this9 = this;
|
||||
|
||||
// cache minWidth for each column
|
||||
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
|
||||
|
||||
_dom2.default.each('.data-table-col', this.header).map(function (col) {
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width');
|
||||
|
||||
var _$$data8 = _dom2.default.data(col),
|
||||
colIndex = _$$data8.colIndex;
|
||||
|
||||
if (!_this9.minWidthMap[colIndex]) {
|
||||
var column = _this9.getColumn(colIndex);
|
||||
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
_this9.minWidthMap[colIndex] = width;
|
||||
_this9.datamanager.updateColumn(colIndex, {
|
||||
minWidth: width
|
||||
});
|
||||
_this9.datamanager.updateColumn(colIndex, { minWidth: width });
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setNaturalColumnWidth',
|
||||
value: function setNaturalColumnWidth() {
|
||||
key: 'setupNaturalColumnWidth',
|
||||
value: function setupNaturalColumnWidth() {
|
||||
var _this10 = this;
|
||||
|
||||
// set initial width as naturally calculated by table's first row
|
||||
_dom2.default.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map(function ($cell) {
|
||||
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
|
||||
var height = _dom2.default.style((0, _dom2.default)('.content', $cell), 'height');
|
||||
|
||||
var _$$data9 = _dom2.default.data($cell),
|
||||
colIndex = _$$data9.colIndex;
|
||||
|
||||
if (_this10.getColumn(colIndex).width > 0) {
|
||||
// already set
|
||||
return;
|
||||
}
|
||||
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
|
||||
var minWidth = _this10.getColumnMinWidth(colIndex);
|
||||
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
_this10.datamanager.updateColumn(colIndex, { width: width });
|
||||
_this10.setColumnWidth(colIndex, width);
|
||||
_this10.setDefaultCellHeight(height);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@ -2056,10 +2040,7 @@ var ColumnManager = function () {
|
||||
var finalWidth = Math.min(width + deltaWidth) - 2;
|
||||
|
||||
_this11.datamanager.updateColumn(col.colIndex, { width: finalWidth });
|
||||
_this11.setColumnHeaderWidth(col.colIndex, finalWidth);
|
||||
_this11.setColumnWidth(col.colIndex, finalWidth);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
}
|
||||
}, {
|
||||
key: 'setDefaultCellHeight',
|
||||
@ -2069,18 +2050,23 @@ var ColumnManager = function () {
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setColumnAlignments',
|
||||
value: function setColumnAlignments() {
|
||||
key: 'setColumnStyle',
|
||||
value: function setColumnStyle() {
|
||||
var _this12 = this;
|
||||
|
||||
// align columns
|
||||
this.getColumns().map(function (column) {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
_this12.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
// width
|
||||
_this12.setColumnHeaderWidth(column.colIndex);
|
||||
_this12.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
}
|
||||
}, {
|
||||
key: 'sortRows',
|
||||
@ -2099,13 +2085,12 @@ var ColumnManager = function () {
|
||||
}
|
||||
}, {
|
||||
key: 'setColumnWidth',
|
||||
value: function setColumnWidth(colIndex, width) {
|
||||
value: function setColumnWidth(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
if (!width) {
|
||||
var $headerContent = (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"] .content', this.header);
|
||||
width = _dom2.default.style($headerContent, 'width');
|
||||
}
|
||||
var _getColumn = this.getColumn(colIndex),
|
||||
width = _getColumn.width;
|
||||
|
||||
var index = this._columnWidthMap[colIndex];
|
||||
var selector = '[data-col-index="' + colIndex + '"] .content, [data-col-index="' + colIndex + '"] .edit-cell';
|
||||
@ -2118,10 +2103,14 @@ var ColumnManager = function () {
|
||||
}
|
||||
}, {
|
||||
key: 'setColumnHeaderWidth',
|
||||
value: function setColumnHeaderWidth(colIndex, width) {
|
||||
value: function setColumnHeaderWidth(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
this.$columnMap = this.$columnMap || [];
|
||||
var selector = '[data-col-index="' + colIndex + '"][data-is-header] .content';
|
||||
|
||||
var _getColumn2 = this.getColumn(colIndex),
|
||||
width = _getColumn2.width;
|
||||
|
||||
var $column = this.$columnMap[colIndex];
|
||||
if (!$column) {
|
||||
$column = this.header.querySelector(selector);
|
||||
@ -2134,7 +2123,7 @@ var ColumnManager = function () {
|
||||
key: 'getColumnMinWidth',
|
||||
value: function getColumnMinWidth(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
return this.minWidthMap && this.minWidthMap[colIndex];
|
||||
return this.getColumn(colIndex).minWidth || 24;
|
||||
}
|
||||
}, {
|
||||
key: 'getFirstColumnIndex',
|
||||
@ -2289,7 +2278,7 @@ var DataTable = function () {
|
||||
wrapper = document.querySelector(wrapper);
|
||||
}
|
||||
this.wrapper = wrapper;
|
||||
if (!this.wrapper) {
|
||||
if (!(this.wrapper instanceof HTMLElement)) {
|
||||
throw new Error('Invalid argument given for `wrapper`');
|
||||
}
|
||||
|
||||
@ -3013,7 +3002,7 @@ function prepareCell(col, i) {
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: 0,
|
||||
width: 40
|
||||
width: 0
|
||||
};
|
||||
|
||||
if (typeof col === 'string') {
|
||||
@ -3893,7 +3882,7 @@ module.exports = function (css) {
|
||||
/* 19 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-plugin-transform-builtin-extend":"^1.1.2","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0","sortablejs":"^1.7.0"}}
|
||||
module.exports = {"name":"frappe-datatable","version":"0.0.1","description":"A modern datatable library for the web","main":"lib/frappe-datatable.js","scripts":{"start":"npm run dev","build":"webpack --env build","dev":"webpack --progress --colors --watch --env dev","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"},"devDependencies":{"babel-cli":"6.24.1","babel-core":"6.24.1","babel-eslint":"7.2.3","babel-loader":"7.0.0","babel-plugin-add-module-exports":"0.2.1","babel-plugin-transform-builtin-extend":"^1.1.2","babel-preset-env":"^1.6.1","chai":"3.5.0","css-loader":"^0.28.7","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","node-sass":"^4.5.3","sass-loader":"^6.0.6","style-loader":"^0.18.2","webpack":"^3.1.0","yargs":"7.1.0"},"repository":{"type":"git","url":"https://github.com/frappe/datatable.git"},"keywords":["webpack","es6","starter","library","universal","umd","commonjs"],"author":"Faris Ansari","license":"MIT","bugs":{"url":"https://github.com/frappe/datatable/issues"},"homepage":"https://frappe.github.io/datatable","dependencies":{"clusterize.js":"^0.18.0","sortablejs":"^1.7.0"}}
|
||||
|
||||
/***/ })
|
||||
/******/ ]);
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
lib/frappe-datatable.min.js
vendored
2
lib/frappe-datatable.min.js
vendored
File diff suppressed because one or more lines are too long
@ -4,6 +4,7 @@
|
||||
"description": "A modern datatable library for the web",
|
||||
"main": "lib/frappe-datatable.js",
|
||||
"scripts": {
|
||||
"start": "npm run dev",
|
||||
"build": "webpack --env build",
|
||||
"dev": "webpack --progress --colors --watch --env dev",
|
||||
"test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import $ from './dom';
|
||||
import Sortable from 'sortablejs';
|
||||
import { getRowHTML } from './rowmanager';
|
||||
import { getDefault, throttle } from './utils';
|
||||
import { getDefault } from './utils';
|
||||
|
||||
export default class ColumnManager {
|
||||
constructor(instance) {
|
||||
@ -125,9 +125,7 @@ export default class ColumnManager {
|
||||
isDragging = false;
|
||||
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
const width = $.style($('.content', $resizingCell), 'width');
|
||||
|
||||
this.setColumnWidth(colIndex, width);
|
||||
this.setColumnWidth(colIndex);
|
||||
this.instance.setBodyWidth();
|
||||
$resizingCell = null;
|
||||
});
|
||||
@ -141,8 +139,8 @@ export default class ColumnManager {
|
||||
// don't resize past minWidth
|
||||
return;
|
||||
}
|
||||
|
||||
this.setColumnHeaderWidth(colIndex, finalWidth);
|
||||
this.datamanager.updateColumn(colIndex, { width: finalWidth });
|
||||
this.setColumnHeaderWidth(colIndex);
|
||||
});
|
||||
}
|
||||
|
||||
@ -159,16 +157,6 @@ export default class ColumnManager {
|
||||
|
||||
const $parent = $('.data-table-row', this.header);
|
||||
|
||||
$.on(document, 'drag', '.data-table-col', throttle((e, $target) => {
|
||||
if (e.offsetY > 200) {
|
||||
$target.classList.add('remove-column');
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
$target.classList.remove('remove-column');
|
||||
}, 10);
|
||||
}
|
||||
}));
|
||||
|
||||
this.sortable = Sortable.create($parent, {
|
||||
onEnd: (e) => {
|
||||
const { oldIndex, newIndex } = e;
|
||||
@ -277,9 +265,9 @@ export default class ColumnManager {
|
||||
setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
this.setupMinWidth();
|
||||
this.setNaturalColumnWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnAlignments();
|
||||
this.setColumnStyle();
|
||||
}
|
||||
|
||||
setHeaderStyle() {
|
||||
@ -297,7 +285,7 @@ export default class ColumnManager {
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable !== undefined && !col.resizable)
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
@ -308,38 +296,35 @@ export default class ColumnManager {
|
||||
}
|
||||
|
||||
setupMinWidth() {
|
||||
// cache minWidth for each column
|
||||
this.minWidthMap = getDefault(this.minWidthMap, []);
|
||||
|
||||
$.each('.data-table-col', this.header).map(col => {
|
||||
const width = $.style($('.content', col), 'width');
|
||||
const { colIndex } = $.data(col);
|
||||
const column = this.getColumn(colIndex);
|
||||
|
||||
if (!this.minWidthMap[colIndex]) {
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
this.minWidthMap[colIndex] = width;
|
||||
this.datamanager.updateColumn(colIndex, {
|
||||
minWidth: width
|
||||
});
|
||||
this.datamanager.updateColumn(colIndex, { minWidth: width });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setNaturalColumnWidth() {
|
||||
setupNaturalColumnWidth() {
|
||||
// set initial width as naturally calculated by table's first row
|
||||
$.each('.data-table-row[data-row-index="0"] .data-table-col', this.bodyScrollable).map($cell => {
|
||||
|
||||
let width = $.style($('.content', $cell), 'width');
|
||||
const height = $.style($('.content', $cell), 'height');
|
||||
const { colIndex } = $.data($cell);
|
||||
if (this.getColumn(colIndex).width > 0) {
|
||||
// already set
|
||||
return;
|
||||
}
|
||||
|
||||
let width = $.style($('.content', $cell), 'width');
|
||||
const minWidth = this.getColumnMinWidth(colIndex);
|
||||
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
this.datamanager.updateColumn(colIndex, { width });
|
||||
this.setColumnWidth(colIndex, width);
|
||||
this.setDefaultCellHeight(height);
|
||||
});
|
||||
}
|
||||
|
||||
@ -365,10 +350,7 @@ export default class ColumnManager {
|
||||
let finalWidth = Math.min(width + deltaWidth) - 2;
|
||||
|
||||
this.datamanager.updateColumn(col.colIndex, { width: finalWidth });
|
||||
this.setColumnHeaderWidth(col.colIndex, finalWidth);
|
||||
this.setColumnWidth(col.colIndex, finalWidth);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
}
|
||||
|
||||
setDefaultCellHeight(height) {
|
||||
@ -377,16 +359,21 @@ export default class ColumnManager {
|
||||
});
|
||||
}
|
||||
|
||||
setColumnAlignments() {
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.style.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
// width
|
||||
this.setColumnHeaderWidth(column.colIndex);
|
||||
this.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
}
|
||||
|
||||
sortRows(colIndex, sortOrder) {
|
||||
@ -401,13 +388,11 @@ export default class ColumnManager {
|
||||
return this.datamanager.getColumns();
|
||||
}
|
||||
|
||||
setColumnWidth(colIndex, width) {
|
||||
setColumnWidth(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
this._columnWidthMap = this._columnWidthMap || [];
|
||||
|
||||
if (!width) {
|
||||
const $headerContent = $(`.data-table-col[data-col-index="${colIndex}"] .content`, this.header);
|
||||
width = $.style($headerContent, 'width');
|
||||
}
|
||||
const { width } = this.getColumn(colIndex);
|
||||
|
||||
let index = this._columnWidthMap[colIndex];
|
||||
const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
|
||||
@ -419,9 +404,11 @@ export default class ColumnManager {
|
||||
this._columnWidthMap[colIndex] = index;
|
||||
}
|
||||
|
||||
setColumnHeaderWidth(colIndex, width) {
|
||||
setColumnHeaderWidth(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
this.$columnMap = this.$columnMap || [];
|
||||
const selector = `[data-col-index="${colIndex}"][data-is-header] .content`;
|
||||
const { width } = this.getColumn(colIndex);
|
||||
|
||||
let $column = this.$columnMap[colIndex];
|
||||
if (!$column) {
|
||||
@ -434,7 +421,7 @@ export default class ColumnManager {
|
||||
|
||||
getColumnMinWidth(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
return this.minWidthMap && this.minWidthMap[colIndex];
|
||||
return this.getColumn(colIndex).minWidth || 24;
|
||||
}
|
||||
|
||||
getFirstColumnIndex() {
|
||||
|
||||
@ -429,7 +429,7 @@ function prepareCell(col, i) {
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: 0,
|
||||
width: 40
|
||||
width: 0
|
||||
};
|
||||
|
||||
if (typeof col === 'string') {
|
||||
|
||||
@ -18,7 +18,7 @@ class DataTable {
|
||||
wrapper = document.querySelector(wrapper);
|
||||
}
|
||||
this.wrapper = wrapper;
|
||||
if (!this.wrapper) {
|
||||
if (!(this.wrapper instanceof HTMLElement)) {
|
||||
throw new Error('Invalid argument given for `wrapper`');
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user