Added Layout options: fixed, fluid
This commit is contained in:
Faris Ansari
parent
349108c61e
commit
330aa5f52a
File diff suppressed because one or more lines are too long
@ -7,7 +7,7 @@
|
||||
exports["DataTable"] = factory(require("sortablejs"), require("clusterize.js"));
|
||||
else
|
||||
root["DataTable"] = factory(root["Sortable"], root["Clusterize"]);
|
||||
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_11__) {
|
||||
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_10__) {
|
||||
return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
||||
/******/ __webpack_require__.p = "";
|
||||
/******/
|
||||
/******/ // Load entry module and return exports
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 4);
|
||||
/******/ return __webpack_require__(__webpack_require__.s = 3);
|
||||
/******/ })
|
||||
/************************************************************************/
|
||||
/******/ ([
|
||||
@ -316,6 +316,7 @@ exports.isNumeric = isNumeric;
|
||||
exports.throttle = throttle;
|
||||
exports.promisify = promisify;
|
||||
exports.chainPromises = chainPromises;
|
||||
exports.linkProperties = linkProperties;
|
||||
function camelCaseToDash(str) {
|
||||
return str.replace(/([A-Z])/g, function (g) {
|
||||
return '-' + g[0].toLowerCase();
|
||||
@ -530,119 +531,20 @@ function chainPromises(promises) {
|
||||
}, Promise.resolve());
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var KEYCODES = {
|
||||
13: 'enter',
|
||||
91: 'meta',
|
||||
16: 'shift',
|
||||
17: 'ctrl',
|
||||
18: 'alt',
|
||||
37: 'left',
|
||||
38: 'up',
|
||||
39: 'right',
|
||||
40: 'down',
|
||||
9: 'tab',
|
||||
27: 'esc',
|
||||
67: 'c'
|
||||
function linkProperties(target, source, properties) {
|
||||
var props = properties.reduce(function (acc, prop) {
|
||||
acc[prop] = {
|
||||
get: function get() {
|
||||
return source[prop];
|
||||
}
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
Object.defineProperties(target, props);
|
||||
};
|
||||
|
||||
var Keyboard = function () {
|
||||
function Keyboard(element) {
|
||||
_classCallCheck(this, Keyboard);
|
||||
|
||||
this.listeners = {};
|
||||
_dom2.default.on(element, 'keydown', this.handler.bind(this));
|
||||
}
|
||||
|
||||
_createClass(Keyboard, [{
|
||||
key: 'handler',
|
||||
value: function handler(e) {
|
||||
var key = KEYCODES[e.keyCode];
|
||||
|
||||
if (e.shiftKey && key !== 'shift') {
|
||||
key = 'shift+' + key;
|
||||
}
|
||||
|
||||
if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
|
||||
key = 'ctrl+' + key;
|
||||
}
|
||||
|
||||
var listeners = this.listeners[key];
|
||||
|
||||
if (listeners && listeners.length > 0) {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = listeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var listener = _step.value;
|
||||
|
||||
var preventBubbling = listener();
|
||||
if (preventBubbling === undefined || preventBubbling === true) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'on',
|
||||
value: function on(key, listener) {
|
||||
var _this = this;
|
||||
|
||||
var keys = key.split(',').map(function (k) {
|
||||
return k.trim();
|
||||
});
|
||||
|
||||
keys.map(function (key) {
|
||||
_this.listeners[key] = _this.listeners[key] || [];
|
||||
_this.listeners[key].push(listener);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return Keyboard;
|
||||
}();
|
||||
|
||||
exports.default = Keyboard;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 3 */
|
||||
/* 2 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -659,7 +561,7 @@ var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _sortablejs = __webpack_require__(8);
|
||||
var _sortablejs = __webpack_require__(7);
|
||||
|
||||
var _sortablejs2 = _interopRequireDefault(_sortablejs);
|
||||
|
||||
@ -674,14 +576,8 @@ var ColumnManager = function () {
|
||||
_classCallCheck(this, ColumnManager);
|
||||
|
||||
this.instance = instance;
|
||||
this.options = this.instance.options;
|
||||
this.fireEvent = this.instance.fireEvent;
|
||||
this.header = this.instance.header;
|
||||
this.datamanager = this.instance.datamanager;
|
||||
this.style = this.instance.style;
|
||||
this.wrapper = this.instance.wrapper;
|
||||
this.rowmanager = this.instance.rowmanager;
|
||||
this.bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
(0, _utils.linkProperties)(this, this.instance, ['options', 'fireEvent', 'header', 'datamanager', 'style', 'wrapper', 'rowmanager', 'bodyScrollable']);
|
||||
|
||||
this.bindEvents();
|
||||
exports.getDropdownHTML = getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton);
|
||||
@ -819,7 +715,7 @@ var ColumnManager = function () {
|
||||
colIndex = _$$data4.colIndex;
|
||||
|
||||
_this3.setColumnWidth(colIndex);
|
||||
_this3.instance.setBodyWidth();
|
||||
_this3.style.setBodyStyle();
|
||||
$resizingCell = null;
|
||||
});
|
||||
|
||||
@ -973,154 +869,6 @@ var ColumnManager = function () {
|
||||
_this8.fireEvent('onSwitchColumn', _this8.getColumn(oldIndex), _this8.getColumn(newIndex));
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setDimensions',
|
||||
value: function setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
this.setupMinWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
}
|
||||
}, {
|
||||
key: 'setHeaderStyle',
|
||||
value: function setHeaderStyle() {
|
||||
if (!this.options.takeAvailableSpace) {
|
||||
// setting width as 0 will ensure that the
|
||||
// header doesn't take the available space
|
||||
_dom2.default.style(this.header, {
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
|
||||
_dom2.default.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
var nonResizableColumnsSelector = this.datamanager.getColumns().filter(function (col) {
|
||||
return col.resizable === false;
|
||||
}).map(function (col) {
|
||||
return col.colIndex;
|
||||
}).map(function (i) {
|
||||
return '.data-table-header [data-col-index="' + i + '"]';
|
||||
}).join();
|
||||
|
||||
this.style.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setupMinWidth',
|
||||
value: function setupMinWidth() {
|
||||
var _this9 = this;
|
||||
|
||||
_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;
|
||||
|
||||
var column = _this9.getColumn(colIndex);
|
||||
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
_this9.datamanager.updateColumn(colIndex, { minWidth: width });
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
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 _$$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 });
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'distributeRemainingWidth',
|
||||
value: function distributeRemainingWidth() {
|
||||
var _this11 = this;
|
||||
|
||||
if (!this.options.takeAvailableSpace) return;
|
||||
|
||||
var wrapperWidth = _dom2.default.style(this.instance.datatableWrapper, 'width');
|
||||
var headerWidth = _dom2.default.style(this.header, 'width');
|
||||
|
||||
if (headerWidth >= wrapperWidth) {
|
||||
// don't resize, horizontal scroll takes place
|
||||
return;
|
||||
}
|
||||
|
||||
var resizableColumns = this.datamanager.getColumns().filter(function (col) {
|
||||
return col.resizable === undefined || col.resizable;
|
||||
});
|
||||
|
||||
var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
|
||||
|
||||
resizableColumns.map(function (col) {
|
||||
var width = _dom2.default.style(_this11.getColumnHeaderElement(col.colIndex), 'width');
|
||||
var finalWidth = Math.min(width + deltaWidth) - 2;
|
||||
|
||||
_this11.datamanager.updateColumn(col.colIndex, { width: finalWidth });
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setDefaultCellHeight',
|
||||
value: function setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
var height = _dom2.default.style((0, _dom2.default)('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'setCellHeight',
|
||||
value: function setCellHeight(height) {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.style.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
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',
|
||||
value: function sortRows(colIndex, sortOrder) {
|
||||
@ -1201,13 +949,6 @@ var ColumnManager = function () {
|
||||
value: function getLastColumnIndex() {
|
||||
return this.datamanager.getColumnCount() - 1;
|
||||
}
|
||||
}, {
|
||||
key: 'getColumnHeaderElement',
|
||||
value: function getColumnHeaderElement(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
if (colIndex < 0) return null;
|
||||
return (0, _dom2.default)('.data-table-col[data-is-header][data-col-index="' + colIndex + '"]', this.wrapper);
|
||||
}
|
||||
}, {
|
||||
key: 'getSerialColumnIndex',
|
||||
value: function getSerialColumnIndex() {
|
||||
@ -1240,7 +981,7 @@ var getDropdownHTML = function getDropdownHTML() {
|
||||
exports.getDropdownHTML = getDropdownHTML;
|
||||
|
||||
/***/ }),
|
||||
/* 4 */
|
||||
/* 3 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -1250,7 +991,7 @@ Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _datatable = __webpack_require__(5);
|
||||
var _datatable = __webpack_require__(4);
|
||||
|
||||
var _datatable2 = _interopRequireDefault(_datatable);
|
||||
|
||||
@ -1266,7 +1007,7 @@ exports.default = _datatable2.default;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 5 */
|
||||
/* 4 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -1282,31 +1023,31 @@ var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _datamanager = __webpack_require__(6);
|
||||
var _datamanager = __webpack_require__(5);
|
||||
|
||||
var _datamanager2 = _interopRequireDefault(_datamanager);
|
||||
|
||||
var _cellmanager = __webpack_require__(7);
|
||||
var _cellmanager = __webpack_require__(6);
|
||||
|
||||
var _cellmanager2 = _interopRequireDefault(_cellmanager);
|
||||
|
||||
var _columnmanager = __webpack_require__(3);
|
||||
var _columnmanager = __webpack_require__(2);
|
||||
|
||||
var _columnmanager2 = _interopRequireDefault(_columnmanager);
|
||||
|
||||
var _rowmanager = __webpack_require__(9);
|
||||
var _rowmanager = __webpack_require__(8);
|
||||
|
||||
var _rowmanager2 = _interopRequireDefault(_rowmanager);
|
||||
|
||||
var _bodyRenderer = __webpack_require__(10);
|
||||
var _bodyRenderer = __webpack_require__(9);
|
||||
|
||||
var _bodyRenderer2 = _interopRequireDefault(_bodyRenderer);
|
||||
|
||||
var _style = __webpack_require__(12);
|
||||
var _style = __webpack_require__(11);
|
||||
|
||||
var _style2 = _interopRequireDefault(_style);
|
||||
|
||||
var _keyboard = __webpack_require__(2);
|
||||
var _keyboard = __webpack_require__(12);
|
||||
|
||||
var _keyboard2 = _interopRequireDefault(_keyboard);
|
||||
|
||||
@ -1415,30 +1156,23 @@ var DataTable = function () {
|
||||
}, {
|
||||
key: 'setDimensions',
|
||||
value: function setDimensions() {
|
||||
this.columnmanager.setDimensions();
|
||||
|
||||
this.setBodyWidth();
|
||||
|
||||
_dom2.default.style(this.bodyScrollable, {
|
||||
marginTop: _dom2.default.style(this.header, 'height') + 'px'
|
||||
});
|
||||
|
||||
_dom2.default.style((0, _dom2.default)('table', this.bodyScrollable), {
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setBodyWidth',
|
||||
value: function setBodyWidth() {
|
||||
var width = _dom2.default.style(this.header, 'width');
|
||||
|
||||
_dom2.default.style(this.bodyScrollable, { width: width + 'px' });
|
||||
this.style.setDimensions();
|
||||
}
|
||||
}, {
|
||||
key: 'getColumn',
|
||||
value: function getColumn(colIndex) {
|
||||
return this.datamanager.getColumn(colIndex);
|
||||
}
|
||||
}, {
|
||||
key: 'getColumns',
|
||||
value: function getColumns() {
|
||||
return this.datamanager.getColumns();
|
||||
}
|
||||
}, {
|
||||
key: 'getRows',
|
||||
value: function getRows() {
|
||||
return this.datamanager.getRows();
|
||||
}
|
||||
}, {
|
||||
key: 'getCell',
|
||||
value: function getCell(colIndex, rowIndex) {
|
||||
@ -1514,7 +1248,7 @@ exports.default = DataTable;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 6 */
|
||||
/* 5 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -1661,6 +1395,7 @@ var DataManager = function () {
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
width: null,
|
||||
format: function format(value) {
|
||||
if (value === null || value === undefined) {
|
||||
return '';
|
||||
@ -1686,8 +1421,7 @@ var DataManager = function () {
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: i,
|
||||
column: this.columns[i],
|
||||
width: 0
|
||||
column: this.columns[i]
|
||||
};
|
||||
|
||||
if (content !== null && (typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object') {
|
||||
@ -1735,6 +1469,10 @@ var DataManager = function () {
|
||||
row.push(index + 1 + '');
|
||||
}
|
||||
row = row.concat(d);
|
||||
|
||||
while (row.length < _this3.columns.length) {
|
||||
row.push('');
|
||||
}
|
||||
} else {
|
||||
// row is a dict
|
||||
var _iteratorNormalCompletion = true;
|
||||
@ -2143,7 +1881,7 @@ var DataError = exports.DataError = function (_extendableBuiltin2) {
|
||||
;
|
||||
|
||||
/***/ }),
|
||||
/* 7 */
|
||||
/* 6 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -2163,7 +1901,7 @@ var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _columnmanager = __webpack_require__(3);
|
||||
var _columnmanager = __webpack_require__(2);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
@ -2236,7 +1974,7 @@ var CellManager = function () {
|
||||
|
||||
var $cell = _this2.$focusedCell;
|
||||
|
||||
if (direction === 'left') {
|
||||
if (direction === 'left' || direction === 'shift+tab') {
|
||||
$cell = _this2.getLeftCell$($cell);
|
||||
} else if (direction === 'right' || direction === 'tab') {
|
||||
$cell = _this2.getRightCell$($cell);
|
||||
@ -2275,7 +2013,7 @@ var CellManager = function () {
|
||||
return true;
|
||||
};
|
||||
|
||||
['left', 'right', 'up', 'down', 'tab'].map(function (direction) {
|
||||
['left', 'right', 'up', 'down', 'tab', 'shift+tab'].map(function (direction) {
|
||||
return _this2.keyboard.on(direction, function () {
|
||||
return focusCell(direction);
|
||||
});
|
||||
@ -2883,13 +2621,13 @@ exports.default = CellManager;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 8 */
|
||||
/* 7 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
|
||||
|
||||
/***/ }),
|
||||
/* 9 */
|
||||
/* 8 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -3151,7 +2889,7 @@ exports.default = RowManager;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 10 */
|
||||
/* 9 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -3169,7 +2907,7 @@ var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _clusterize = __webpack_require__(11);
|
||||
var _clusterize = __webpack_require__(10);
|
||||
|
||||
var _clusterize2 = _interopRequireDefault(_clusterize);
|
||||
|
||||
@ -3236,7 +2974,7 @@ var BodyRenderer = function () {
|
||||
}
|
||||
},
|
||||
/* eslint-disable */
|
||||
no_data_text: this.options.loadingText,
|
||||
no_data_text: this.options.noDataMessage,
|
||||
no_data_class: 'empty-state'
|
||||
/* eslint-enable */
|
||||
});
|
||||
@ -3289,13 +3027,13 @@ function getBodyHTML(rows) {
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
/* 11 */
|
||||
/* 10 */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_11__;
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
|
||||
|
||||
/***/ }),
|
||||
/* 12 */
|
||||
/* 11 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
@ -3307,25 +3045,49 @@ Object.defineProperty(exports, "__esModule", {
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
var _utils = __webpack_require__(1);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var Style = function () {
|
||||
function Style(datatable) {
|
||||
function Style(instance) {
|
||||
_classCallCheck(this, Style);
|
||||
|
||||
this.datatable = datatable;
|
||||
this.scopeClass = 'datatable-instance-' + datatable.constructor.instances;
|
||||
datatable.datatableWrapper.classList.add(this.scopeClass);
|
||||
this.instance = instance;
|
||||
|
||||
(0, _utils.linkProperties)(this, this.instance, ['options', 'datamanager', 'columnmanager', 'header', 'bodyScrollable', 'getColumn']);
|
||||
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
|
||||
var styleEl = document.createElement('style');
|
||||
datatable.wrapper.insertBefore(styleEl, datatable.datatableWrapper);
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
this.styleSheet = styleEl.sheet;
|
||||
|
||||
this.bindResizeWindow();
|
||||
}
|
||||
|
||||
_createClass(Style, [{
|
||||
key: 'bindResizeWindow',
|
||||
value: function bindResizeWindow() {
|
||||
var _this = this;
|
||||
|
||||
if (this.options.layout === 'fluid') {
|
||||
_dom2.default.on(window, 'resize', (0, _utils.throttle)(function () {
|
||||
_this.distributeRemainingWidth();
|
||||
_this.refreshColumnWidth();
|
||||
_this.setBodyStyle();
|
||||
}, 300));
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'destroy',
|
||||
value: function destroy() {
|
||||
this.styleEl.remove();
|
||||
@ -3352,6 +3114,200 @@ var Style = function () {
|
||||
this.styleSheet.insertRule(ruleString, _index);
|
||||
return _index;
|
||||
}
|
||||
}, {
|
||||
key: 'setDimensions',
|
||||
value: function setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
|
||||
this.setupMinWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.setupColumnWidth();
|
||||
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
this.setBodyStyle();
|
||||
}
|
||||
}, {
|
||||
key: 'setHeaderStyle',
|
||||
value: function setHeaderStyle() {
|
||||
if (this.options.layout === 'fluid') {
|
||||
// setting width as 0 will ensure that the
|
||||
// header doesn't take the available space
|
||||
_dom2.default.style(this.header, {
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
|
||||
_dom2.default.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
var nonResizableColumnsSelector = this.datamanager.getColumns().filter(function (col) {
|
||||
return col.resizable === false;
|
||||
}).map(function (col) {
|
||||
return col.colIndex;
|
||||
}).map(function (i) {
|
||||
return '.data-table-header [data-col-index="' + i + '"]';
|
||||
}).join();
|
||||
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setupMinWidth',
|
||||
value: function setupMinWidth() {
|
||||
var _this2 = this;
|
||||
|
||||
_dom2.default.each('.data-table-col', this.header).map(function (col) {
|
||||
var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width');
|
||||
|
||||
var _$$data = _dom2.default.data(col),
|
||||
colIndex = _$$data.colIndex;
|
||||
|
||||
var column = _this2.getColumn(colIndex);
|
||||
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
column.minWidth = width;
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setupNaturalColumnWidth',
|
||||
value: function setupNaturalColumnWidth() {
|
||||
var _this3 = this;
|
||||
|
||||
if (!(0, _dom2.default)('.data-table-row')) return;
|
||||
|
||||
// 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 _$$data2 = _dom2.default.data($cell),
|
||||
colIndex = _$$data2.colIndex;
|
||||
|
||||
var column = _this3.datamanager.getColumn(colIndex);
|
||||
|
||||
var naturalWidth = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
|
||||
column.naturalWidth = naturalWidth;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setupColumnWidth',
|
||||
value: function setupColumnWidth() {
|
||||
this.datamanager.getColumns().map(function (column) {
|
||||
if (column.width === null) {
|
||||
column.width = column.naturalWidth;
|
||||
}
|
||||
if (column.width < column.minWidth) {
|
||||
column.width = column.minWidth;
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'distributeRemainingWidth',
|
||||
value: function distributeRemainingWidth() {
|
||||
var _this4 = this;
|
||||
|
||||
if (this.options.layout !== 'fluid') return;
|
||||
|
||||
var wrapperWidth = _dom2.default.style(this.instance.datatableWrapper, 'width');
|
||||
var headerWidth = _dom2.default.style(this.header, 'width');
|
||||
|
||||
// if (headerWidth >= wrapperWidth) {
|
||||
// // don't resize, horizontal scroll takes place
|
||||
// return;
|
||||
// }
|
||||
|
||||
var resizableColumns = this.datamanager.getColumns().filter(function (col) {
|
||||
return col.resizable;
|
||||
});
|
||||
|
||||
var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
|
||||
|
||||
resizableColumns.map(function (col) {
|
||||
var width = _dom2.default.style(_this4.getColumnHeaderElement(col.colIndex), 'width');
|
||||
var finalWidth = Math.floor(width + deltaWidth) - 2;
|
||||
|
||||
_this4.datamanager.updateColumn(col.colIndex, {
|
||||
width: finalWidth
|
||||
});
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setDefaultCellHeight',
|
||||
value: function setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
var height = _dom2.default.style((0, _dom2.default)('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'setCellHeight',
|
||||
value: function setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setColumnStyle',
|
||||
value: function setColumnStyle() {
|
||||
var _this5 = this;
|
||||
|
||||
// align columns
|
||||
this.datamanager.getColumns().map(function (column) {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
_this5.setStyle('[data-col-index="' + column.colIndex + '"]', {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
// width
|
||||
_this5.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
_this5.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.setBodyStyle();
|
||||
}
|
||||
}, {
|
||||
key: 'refreshColumnWidth',
|
||||
value: function refreshColumnWidth() {
|
||||
var _this6 = this;
|
||||
|
||||
this.datamanager.getColumns().map(function (column) {
|
||||
_this6.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
_this6.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setBodyStyle',
|
||||
value: function setBodyStyle() {
|
||||
var width = _dom2.default.style(this.header, 'width');
|
||||
|
||||
_dom2.default.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
|
||||
_dom2.default.style(this.bodyScrollable, {
|
||||
marginTop: _dom2.default.style(this.header, 'height') + 'px'
|
||||
});
|
||||
|
||||
_dom2.default.style((0, _dom2.default)('table', this.bodyScrollable), {
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'getColumnHeaderElement',
|
||||
value: function getColumnHeaderElement(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
if (colIndex < 0) return null;
|
||||
return (0, _dom2.default)('.data-table-col[data-col-index="' + colIndex + '"]', this.header);
|
||||
}
|
||||
}]);
|
||||
|
||||
return Style;
|
||||
@ -3360,6 +3316,117 @@ var Style = function () {
|
||||
exports.default = Style;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 12 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
||||
var _dom = __webpack_require__(0);
|
||||
|
||||
var _dom2 = _interopRequireDefault(_dom);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var KEYCODES = {
|
||||
13: 'enter',
|
||||
91: 'meta',
|
||||
16: 'shift',
|
||||
17: 'ctrl',
|
||||
18: 'alt',
|
||||
37: 'left',
|
||||
38: 'up',
|
||||
39: 'right',
|
||||
40: 'down',
|
||||
9: 'tab',
|
||||
27: 'esc',
|
||||
67: 'c'
|
||||
};
|
||||
|
||||
var Keyboard = function () {
|
||||
function Keyboard(element) {
|
||||
_classCallCheck(this, Keyboard);
|
||||
|
||||
this.listeners = {};
|
||||
_dom2.default.on(element, 'keydown', this.handler.bind(this));
|
||||
}
|
||||
|
||||
_createClass(Keyboard, [{
|
||||
key: 'handler',
|
||||
value: function handler(e) {
|
||||
var key = KEYCODES[e.keyCode];
|
||||
|
||||
if (e.shiftKey && key !== 'shift') {
|
||||
key = 'shift+' + key;
|
||||
}
|
||||
|
||||
if (e.ctrlKey && key !== 'ctrl' || e.metaKey && key !== 'meta') {
|
||||
key = 'ctrl+' + key;
|
||||
}
|
||||
|
||||
var listeners = this.listeners[key];
|
||||
|
||||
if (listeners && listeners.length > 0) {
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = listeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var listener = _step.value;
|
||||
|
||||
var preventBubbling = listener();
|
||||
if (preventBubbling === undefined || preventBubbling === true) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'on',
|
||||
value: function on(key, listener) {
|
||||
var _this = this;
|
||||
|
||||
var keys = key.split(',').map(function (k) {
|
||||
return k.trim();
|
||||
});
|
||||
|
||||
keys.map(function (key) {
|
||||
_this.listeners[key] = _this.listeners[key] || [];
|
||||
_this.listeners[key].push(listener);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return Keyboard;
|
||||
}();
|
||||
|
||||
exports.default = Keyboard;
|
||||
module.exports = exports['default'];
|
||||
|
||||
/***/ }),
|
||||
/* 13 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
@ -3411,8 +3478,8 @@ exports.default = {
|
||||
addCheckboxColumn: false,
|
||||
enableClusterize: true,
|
||||
enableLogs: false,
|
||||
takeAvailableSpace: false,
|
||||
loadingText: ''
|
||||
layout: 'fixed', // fixed, fluid
|
||||
noDataMessage: 'No Data'
|
||||
};
|
||||
module.exports = exports['default'];
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -59,7 +59,7 @@ export default class BodyRenderer {
|
||||
}
|
||||
},
|
||||
/* eslint-disable */
|
||||
no_data_text: this.options.loadingText,
|
||||
no_data_text: this.options.noDataMessage,
|
||||
no_data_class: 'empty-state'
|
||||
/* eslint-enable */
|
||||
});
|
||||
|
||||
@ -60,7 +60,7 @@ export default class CellManager {
|
||||
|
||||
let $cell = this.$focusedCell;
|
||||
|
||||
if (direction === 'left') {
|
||||
if (direction === 'left' || direction === 'shift+tab') {
|
||||
$cell = this.getLeftCell$($cell);
|
||||
} else if (direction === 'right' || direction === 'tab') {
|
||||
$cell = this.getRightCell$($cell);
|
||||
@ -96,7 +96,7 @@ export default class CellManager {
|
||||
return true;
|
||||
};
|
||||
|
||||
['left', 'right', 'up', 'down', 'tab'].map(
|
||||
['left', 'right', 'up', 'down', 'tab', 'shift+tab'].map(
|
||||
direction => this.keyboard.on(direction, () => focusCell(direction))
|
||||
);
|
||||
|
||||
|
||||
@ -1,18 +1,21 @@
|
||||
import $ from './dom';
|
||||
import Sortable from 'sortablejs';
|
||||
import { getDefault } from './utils';
|
||||
import { getDefault, linkProperties } from './utils';
|
||||
|
||||
export default class ColumnManager {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
this.options = this.instance.options;
|
||||
this.fireEvent = this.instance.fireEvent;
|
||||
this.header = this.instance.header;
|
||||
this.datamanager = this.instance.datamanager;
|
||||
this.style = this.instance.style;
|
||||
this.wrapper = this.instance.wrapper;
|
||||
this.rowmanager = this.instance.rowmanager;
|
||||
this.bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
linkProperties(this, this.instance, [
|
||||
'options',
|
||||
'fireEvent',
|
||||
'header',
|
||||
'datamanager',
|
||||
'style',
|
||||
'wrapper',
|
||||
'rowmanager',
|
||||
'bodyScrollable'
|
||||
]);
|
||||
|
||||
this.bindEvents();
|
||||
getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton);
|
||||
@ -126,7 +129,7 @@ export default class ColumnManager {
|
||||
|
||||
const { colIndex } = $.data($resizingCell);
|
||||
this.setColumnWidth(colIndex);
|
||||
this.instance.setBodyWidth();
|
||||
this.style.setBodyStyle();
|
||||
$resizingCell = null;
|
||||
});
|
||||
|
||||
@ -262,133 +265,6 @@ export default class ColumnManager {
|
||||
});
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
this.setupMinWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
}
|
||||
|
||||
setHeaderStyle() {
|
||||
if (!this.options.takeAvailableSpace) {
|
||||
// setting width as 0 will ensure that the
|
||||
// header doesn't take the available space
|
||||
$.style(this.header, {
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.style.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
setupMinWidth() {
|
||||
$.each('.data-table-col', this.header).map(col => {
|
||||
const width = $.style($('.content', col), 'width');
|
||||
const { colIndex } = $.data(col);
|
||||
const column = this.getColumn(colIndex);
|
||||
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
this.datamanager.updateColumn(colIndex, { minWidth: width });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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 => {
|
||||
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 });
|
||||
});
|
||||
}
|
||||
|
||||
distributeRemainingWidth() {
|
||||
if (!this.options.takeAvailableSpace) return;
|
||||
|
||||
const wrapperWidth = $.style(this.instance.datatableWrapper, 'width');
|
||||
const headerWidth = $.style(this.header, 'width');
|
||||
|
||||
if (headerWidth >= wrapperWidth) {
|
||||
// don't resize, horizontal scroll takes place
|
||||
return;
|
||||
}
|
||||
|
||||
const resizableColumns = this.datamanager.getColumns().filter(
|
||||
col => col.resizable === undefined || col.resizable
|
||||
);
|
||||
|
||||
const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
|
||||
|
||||
resizableColumns.map(col => {
|
||||
const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
|
||||
let finalWidth = Math.min(width + deltaWidth) - 2;
|
||||
|
||||
this.datamanager.updateColumn(col.colIndex, { width: finalWidth });
|
||||
});
|
||||
}
|
||||
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.style.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
return this.datamanager.sortRows(colIndex, sortOrder);
|
||||
}
|
||||
@ -457,12 +333,6 @@ export default class ColumnManager {
|
||||
return this.datamanager.getColumnCount() - 1;
|
||||
}
|
||||
|
||||
getColumnHeaderElement(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
if (colIndex < 0) return null;
|
||||
return $(`.data-table-col[data-is-header][data-col-index="${colIndex}"]`, this.wrapper);
|
||||
}
|
||||
|
||||
getSerialColumnIndex() {
|
||||
const columns = this.datamanager.getColumns();
|
||||
|
||||
|
||||
@ -91,6 +91,7 @@ export default class DataManager {
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
width: null,
|
||||
format: (value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return '';
|
||||
@ -114,8 +115,7 @@ export default class DataManager {
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: i,
|
||||
column: this.columns[i],
|
||||
width: 0
|
||||
column: this.columns[i]
|
||||
};
|
||||
|
||||
if (content !== null && typeof content === 'object') {
|
||||
@ -160,6 +160,10 @@ export default class DataManager {
|
||||
}
|
||||
row = row.concat(d);
|
||||
|
||||
while (row.length < this.columns.length) {
|
||||
row.push('');
|
||||
}
|
||||
|
||||
} else {
|
||||
// row is a dict
|
||||
for (let col of this.columns) {
|
||||
|
||||
@ -107,29 +107,21 @@ class DataTable {
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
this.columnmanager.setDimensions();
|
||||
|
||||
this.setBodyWidth();
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
|
||||
$.style($('table', this.bodyScrollable), {
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
|
||||
setBodyWidth() {
|
||||
const width = $.style(this.header, 'width');
|
||||
|
||||
$.style(this.bodyScrollable, { width: width + 'px' });
|
||||
this.style.setDimensions();
|
||||
}
|
||||
|
||||
getColumn(colIndex) {
|
||||
return this.datamanager.getColumn(colIndex);
|
||||
}
|
||||
|
||||
getColumns() {
|
||||
return this.datamanager.getColumns();
|
||||
}
|
||||
|
||||
getRows() {
|
||||
return this.datamanager.getRows();
|
||||
}
|
||||
|
||||
getCell(colIndex, rowIndex) {
|
||||
return this.datamanager.getCell(colIndex, rowIndex);
|
||||
}
|
||||
|
||||
@ -44,6 +44,6 @@ export default {
|
||||
addCheckboxColumn: false,
|
||||
enableClusterize: true,
|
||||
enableLogs: false,
|
||||
takeAvailableSpace: false,
|
||||
loadingText: ''
|
||||
layout: 'fixed', // fixed, fluid
|
||||
noDataMessage: 'No Data'
|
||||
};
|
||||
|
||||
204
src/style.js
204
src/style.js
@ -1,16 +1,38 @@
|
||||
import { camelCaseToDash } from './utils';
|
||||
import $ from './dom';
|
||||
import {
|
||||
camelCaseToDash,
|
||||
linkProperties,
|
||||
throttle
|
||||
} from './utils';
|
||||
|
||||
export default class Style {
|
||||
constructor(instance) {
|
||||
this.instance = instance;
|
||||
|
||||
constructor(datatable) {
|
||||
this.datatable = datatable;
|
||||
this.scopeClass = 'datatable-instance-' + datatable.constructor.instances;
|
||||
datatable.datatableWrapper.classList.add(this.scopeClass);
|
||||
linkProperties(this, this.instance, [
|
||||
'options', 'datamanager', 'columnmanager',
|
||||
'header', 'bodyScrollable', 'getColumn'
|
||||
]);
|
||||
|
||||
this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
|
||||
instance.datatableWrapper.classList.add(this.scopeClass);
|
||||
|
||||
const styleEl = document.createElement('style');
|
||||
datatable.wrapper.insertBefore(styleEl, datatable.datatableWrapper);
|
||||
instance.wrapper.insertBefore(styleEl, instance.datatableWrapper);
|
||||
this.styleEl = styleEl;
|
||||
this.styleSheet = styleEl.sheet;
|
||||
|
||||
this.bindResizeWindow();
|
||||
}
|
||||
|
||||
bindResizeWindow() {
|
||||
if (this.options.layout === 'fluid') {
|
||||
$.on(window, 'resize', throttle(() => {
|
||||
this.distributeRemainingWidth();
|
||||
this.refreshColumnWidth();
|
||||
this.setBodyStyle();
|
||||
}, 300));
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
@ -37,4 +59,174 @@ export default class Style {
|
||||
this.styleSheet.insertRule(ruleString, _index);
|
||||
return _index;
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
|
||||
this.setupMinWidth();
|
||||
this.setupNaturalColumnWidth();
|
||||
this.setupColumnWidth();
|
||||
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
this.setBodyStyle();
|
||||
}
|
||||
|
||||
setHeaderStyle() {
|
||||
if (this.options.layout === 'fluid') {
|
||||
// setting width as 0 will ensure that the
|
||||
// header doesn't take the available space
|
||||
$.style(this.header, {
|
||||
width: 0
|
||||
});
|
||||
}
|
||||
|
||||
$.style(this.header, {
|
||||
margin: 0
|
||||
});
|
||||
|
||||
// don't show resize cursor on nonResizable columns
|
||||
const nonResizableColumnsSelector = this.datamanager.getColumns()
|
||||
.filter(col => col.resizable === false)
|
||||
.map(col => col.colIndex)
|
||||
.map(i => `.data-table-header [data-col-index="${i}"]`)
|
||||
.join();
|
||||
|
||||
this.setStyle(nonResizableColumnsSelector, {
|
||||
cursor: 'pointer'
|
||||
});
|
||||
}
|
||||
|
||||
setupMinWidth() {
|
||||
$.each('.data-table-col', this.header).map(col => {
|
||||
const width = $.style($('.content', col), 'width');
|
||||
const {
|
||||
colIndex
|
||||
} = $.data(col);
|
||||
const column = this.getColumn(colIndex);
|
||||
|
||||
if (!column.minWidth) {
|
||||
// only set this once
|
||||
column.minWidth = width;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupNaturalColumnWidth() {
|
||||
if (!$('.data-table-row')) return;
|
||||
|
||||
// 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 => {
|
||||
const {
|
||||
colIndex
|
||||
} = $.data($cell);
|
||||
const column = this.datamanager.getColumn(colIndex);
|
||||
|
||||
let naturalWidth = $.style($('.content', $cell), 'width');
|
||||
column.naturalWidth = naturalWidth;
|
||||
});
|
||||
}
|
||||
|
||||
setupColumnWidth() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
if (column.width === null) {
|
||||
column.width = column.naturalWidth;
|
||||
}
|
||||
if (column.width < column.minWidth) {
|
||||
column.width = column.minWidth;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
distributeRemainingWidth() {
|
||||
if (this.options.layout !== 'fluid') return;
|
||||
|
||||
const wrapperWidth = $.style(this.instance.datatableWrapper, 'width');
|
||||
const headerWidth = $.style(this.header, 'width');
|
||||
|
||||
// if (headerWidth >= wrapperWidth) {
|
||||
// // don't resize, horizontal scroll takes place
|
||||
// return;
|
||||
// }
|
||||
|
||||
const resizableColumns = this.datamanager.getColumns().filter(col => col.resizable);
|
||||
|
||||
const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
|
||||
|
||||
resizableColumns.map(col => {
|
||||
const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');
|
||||
let finalWidth = Math.floor(width + deltaWidth) - 2;
|
||||
|
||||
this.datamanager.updateColumn(col.colIndex, {
|
||||
width: finalWidth
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
this.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setColumnStyle() {
|
||||
// align columns
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
// alignment
|
||||
if (['left', 'center', 'right'].includes(column.align)) {
|
||||
this.setStyle(`[data-col-index="${column.colIndex}"]`, {
|
||||
'text-align': column.align
|
||||
});
|
||||
}
|
||||
// width
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.setBodyStyle();
|
||||
}
|
||||
|
||||
refreshColumnWidth() {
|
||||
this.datamanager.getColumns()
|
||||
.map(column => {
|
||||
this.columnmanager.setColumnHeaderWidth(column.colIndex);
|
||||
this.columnmanager.setColumnWidth(column.colIndex);
|
||||
});
|
||||
}
|
||||
|
||||
setBodyStyle() {
|
||||
const width = $.style(this.header, 'width');
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
width: width + 'px'
|
||||
});
|
||||
|
||||
$.style(this.bodyScrollable, {
|
||||
marginTop: $.style(this.header, 'height') + 'px'
|
||||
});
|
||||
|
||||
$.style($('table', this.bodyScrollable), {
|
||||
margin: 0
|
||||
});
|
||||
}
|
||||
|
||||
getColumnHeaderElement(colIndex) {
|
||||
colIndex = +colIndex;
|
||||
if (colIndex < 0) return null;
|
||||
return $(`.data-table-col[data-col-index="${colIndex}"]`, this.header);
|
||||
}
|
||||
}
|
||||
|
||||
12
src/utils.js
12
src/utils.js
@ -199,3 +199,15 @@ export function chainPromises(promises) {
|
||||
(prev, cur) => prev.then(cur), Promise.resolve()
|
||||
);
|
||||
};
|
||||
|
||||
export function linkProperties(target, source, properties) {
|
||||
const props = properties.reduce((acc, prop) => {
|
||||
acc[prop] = {
|
||||
get() {
|
||||
return source[prop];
|
||||
}
|
||||
};
|
||||
return acc;
|
||||
}, {});
|
||||
Object.defineProperties(target, props);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user