diff --git a/lib/frappe-datatable.js b/lib/frappe-datatable.js
index 4d93f9f..72181c1 100644
--- a/lib/frappe-datatable.js
+++ b/lib/frappe-datatable.js
@@ -259,6 +259,16 @@ $.getStyle = function (element, prop) {
return val;
};
+
+$.closest = function (selector, element) {
+ if (!element) return null;
+
+ if (element.matches(selector)) {
+ return element;
+ }
+
+ return $.closest(selector, element.parentNode);
+};
module.exports = exports['default'];
/***/ }),
@@ -520,6 +530,8 @@ var _dom = __webpack_require__(0);
var _dom2 = _interopRequireDefault(_dom);
+var _columnmanager = __webpack_require__(9);
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -1236,11 +1248,17 @@ function getCellHTML(column) {
function getCellContent(column) {
var isHeader = column.isHeader;
- var editCellHTML = isHeader ? '' : getEditCellHTML();
- var sortIndicator = isHeader ? '' : '';
- var resizeColumn = isHeader ? '' : '';
- return '\n \n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n ' + resizeColumn + '\n
\n ' + editCellHTML + '\n ';
+ var editable = !isHeader && column.editable;
+ var editCellHTML = editable ? getEditCellHTML() : '';
+
+ var resizable = isHeader && column.resizable !== false;
+ var resizeColumn = resizable ? '' : '';
+
+ var hasDropdown = isHeader && column.dropdown !== false;
+ var dropdown = hasDropdown ? '' + (0, _columnmanager.getDropdownHTML)() + '
' : '';
+
+ return '\n \n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + resizeColumn + '\n ' + dropdown + '\n
\n ' + editCellHTML + '\n ';
}
function getEditCellHTML() {
@@ -1544,6 +1562,28 @@ var DEFAULT_OPTIONS = {
columns: [],
rows: []
},
+ dropdownButton: '▼',
+ headerDropdown: [{
+ label: 'Sort Ascending',
+ action: function action(column) {
+ this.sortColumn(column.colIndex, 'asc');
+ }
+ }, {
+ label: 'Sort Descending',
+ action: function action(column) {
+ this.sortColumn(column.colIndex, 'desc');
+ }
+ }, {
+ label: 'Reset sorting',
+ action: function action(column) {
+ this.sortColumn(column.colIndex, 'none');
+ }
+ }, {
+ label: 'Remove column',
+ action: function action(column) {
+ this.removeColumn(column.colIndex);
+ }
+ }],
freezeMessage: 'Loading...',
editing: null,
addSerialNoColumn: true,
@@ -1569,6 +1609,7 @@ var DataTable = function () {
}
this.options = Object.assign({}, DEFAULT_OPTIONS, options);
+ this.options.headerDropdown = DEFAULT_OPTIONS.headerDropdown.concat(options.headerDropdown || []);
// custom user events
this.events = this.options.events;
@@ -1773,6 +1814,16 @@ var DataTable = function () {
return this.viewportHeight;
}
+ }, {
+ key: 'sortColumn',
+ value: function sortColumn(colIndex, sortOrder) {
+ this.columnmanager.sortColumn(colIndex, sortOrder);
+ }
+ }, {
+ key: 'removeColumn',
+ value: function removeColumn(colIndex) {
+ this.columnmanager.removeColumn(colIndex);
+ }
}, {
key: 'scrollToLastColumn',
value: function scrollToLastColumn() {
@@ -1879,7 +1930,8 @@ var DataManager = function () {
editable: false,
resizable: false,
align: 'center',
- focusable: false
+ focusable: false,
+ dropdown: false
};
columns = [val].concat(columns);
@@ -1892,7 +1944,8 @@ var DataManager = function () {
editable: false,
resizable: false,
sortable: false,
- focusable: false
+ focusable: false,
+ dropdown: false
};
columns = [_val].concat(columns);
@@ -2271,6 +2324,7 @@ module.exports = exports['default'];
Object.defineProperty(exports, "__esModule", {
value: true
});
+exports.getDropdownHTML = undefined;
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; }; }();
@@ -2303,6 +2357,7 @@ var ColumnManager = function () {
this.rowmanager = this.instance.rowmanager;
this.bindEvents();
+ exports.getDropdownHTML = getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton);
}
_createClass(ColumnManager, [{
@@ -2322,7 +2377,6 @@ var ColumnManager = function () {
} else {
var $cols = _dom2.default.each('.data-table-col', this.header);
-
if (columns.length < $cols.length) {
// deleted column
(0, _dom2.default)('thead', this.header).innerHTML = (0, _rowmanager.getRowHTML)(columns, { isHeader: 1 });
@@ -2342,14 +2396,58 @@ var ColumnManager = function () {
}, {
key: 'bindEvents',
value: function bindEvents() {
+ this.bindDropdown();
this.bindResizeColumn();
- this.bindSortColumn();
this.bindMoveColumn();
}
+ }, {
+ key: 'bindDropdown',
+ value: function bindDropdown() {
+ var _this = this;
+
+ var $activeDropdown = void 0;
+ _dom2.default.on(this.header, 'click', '.data-table-dropdown-toggle', function (e, $button) {
+ var $dropdown = $button.parentNode;
+
+ if (!$dropdown.classList.contains('is-active')) {
+ deactivateDropdown();
+ $dropdown.classList.add('is-active');
+ $activeDropdown = $dropdown;
+ } else {
+ deactivateDropdown();
+ }
+ });
+
+ _dom2.default.on(document.body, 'click', function (e) {
+ if (e.target.matches('.data-table-dropdown-toggle')) return;
+ deactivateDropdown();
+ });
+
+ var dropdownItems = this.options.headerDropdown;
+
+ _dom2.default.on(this.header, 'click', '.data-table-dropdown-list > div', function (e, $item) {
+ var $col = _dom2.default.closest('.data-table-col', $item);
+
+ var _$$data = _dom2.default.data($item),
+ index = _$$data.index;
+
+ var _$$data2 = _dom2.default.data($col),
+ colIndex = _$$data2.colIndex;
+
+ var callback = dropdownItems[index].action;
+
+ callback && callback.call(_this.instance, _this.getColumn(colIndex));
+ });
+
+ function deactivateDropdown(e) {
+ $activeDropdown && $activeDropdown.classList.remove('is-active');
+ $activeDropdown = null;
+ }
+ }
}, {
key: 'bindResizeColumn',
value: function bindResizeColumn() {
- var _this = this;
+ var _this2 = this;
var isDragging = false;
var $resizingCell = void 0,
@@ -2360,10 +2458,10 @@ var ColumnManager = function () {
var $cell = $handle.parentNode.parentNode;
$resizingCell = $cell;
- var _$$data = _dom2.default.data($resizingCell),
- colIndex = _$$data.colIndex;
+ var _$$data3 = _dom2.default.data($resizingCell),
+ colIndex = _$$data3.colIndex;
- var col = _this.getColumn(colIndex);
+ var col = _this2.getColumn(colIndex);
if (col && col.resizable === false) {
return;
@@ -2378,13 +2476,13 @@ var ColumnManager = function () {
if (!$resizingCell) return;
isDragging = false;
- var _$$data2 = _dom2.default.data($resizingCell),
- colIndex = _$$data2.colIndex;
+ var _$$data4 = _dom2.default.data($resizingCell),
+ colIndex = _$$data4.colIndex;
var width = _dom2.default.style((0, _dom2.default)('.content', $resizingCell), 'width');
- _this.setColumnWidth(colIndex, width);
- _this.instance.setBodyWidth();
+ _this2.setColumnWidth(colIndex, width);
+ _this2.instance.setBodyWidth();
$resizingCell = null;
});
@@ -2392,21 +2490,21 @@ var ColumnManager = function () {
if (!isDragging) return;
var finalWidth = startWidth + (e.pageX - startX);
- var _$$data3 = _dom2.default.data($resizingCell),
- colIndex = _$$data3.colIndex;
+ var _$$data5 = _dom2.default.data($resizingCell),
+ colIndex = _$$data5.colIndex;
- if (_this.getColumnMinWidth(colIndex) > finalWidth) {
+ if (_this2.getColumnMinWidth(colIndex) > finalWidth) {
// don't resize past minWidth
return;
}
- _this.setColumnHeaderWidth(colIndex, finalWidth);
+ _this2.setColumnHeaderWidth(colIndex, finalWidth);
});
}
}, {
key: 'bindMoveColumn',
value: function bindMoveColumn() {
- var _this2 = this;
+ var _this3 = this;
var initialized = void 0;
@@ -2415,10 +2513,10 @@ var ColumnManager = function () {
_dom2.default.off(document.body, 'mousemove', initialize);
return;
}
- var ready = (0, _dom2.default)('.data-table-col', _this2.header);
+ var ready = (0, _dom2.default)('.data-table-col', _this3.header);
if (!ready) return;
- var $parent = (0, _dom2.default)('.data-table-row', _this2.header);
+ var $parent = (0, _dom2.default)('.data-table-row', _this3.header);
_dom2.default.on(document, 'drag', '.data-table-col', (0, _utils.throttle)(function (e, $target) {
if (e.offsetY > 200) {
@@ -2430,40 +2528,40 @@ var ColumnManager = function () {
}
}));
- _this2.sortable = _sortablejs2.default.create($parent, {
+ _this3.sortable = _sortablejs2.default.create($parent, {
onEnd: function onEnd(e) {
var oldIndex = e.oldIndex,
newIndex = e.newIndex;
var $draggedCell = e.item;
- var _$$data4 = _dom2.default.data($draggedCell),
- colIndex = _$$data4.colIndex;
+ var _$$data6 = _dom2.default.data($draggedCell),
+ colIndex = _$$data6.colIndex;
// debugger;
if ($draggedCell.classList.contains('remove-column')) {
- _this2.instance.freeze();
- _this2.datamanager.removeColumn(colIndex).then(function () {
- _this2.refreshHeader();
- return _this2.rowmanager.refreshRows();
+ _this3.instance.freeze();
+ _this3.datamanager.removeColumn(colIndex).then(function () {
+ _this3.refreshHeader();
+ return _this3.rowmanager.refreshRows();
}).then(function () {
- return _this2.instance.unfreeze();
+ return _this3.instance.unfreeze();
});
return;
}
if (+colIndex === newIndex) return;
- _this2.instance.freeze();
- _this2.datamanager.switchColumn(oldIndex, newIndex).then(function () {
- _this2.refreshHeader();
- return _this2.rowmanager.refreshRows();
+ _this3.instance.freeze();
+ _this3.datamanager.switchColumn(oldIndex, newIndex).then(function () {
+ _this3.refreshHeader();
+ return _this3.rowmanager.refreshRows();
}).then(function () {
- _this2.setColumnWidth(oldIndex);
- _this2.setColumnWidth(newIndex);
+ _this3.setColumnWidth(oldIndex);
+ _this3.setColumnWidth(newIndex);
}).then(function () {
- return _this2.instance.unfreeze();
+ return _this3.instance.unfreeze();
});
},
preventOnFilter: false,
@@ -2477,25 +2575,25 @@ var ColumnManager = function () {
}, {
key: 'bindSortColumn',
value: function bindSortColumn() {
- var _this3 = this;
+ var _this4 = this;
_dom2.default.on(this.header, 'click', '.data-table-col .column-title', function (e, span) {
var $cell = span.closest('.data-table-col');
- var _$$data5 = _dom2.default.data($cell),
- colIndex = _$$data5.colIndex,
- sortOrder = _$$data5.sortOrder;
+ var _$$data7 = _dom2.default.data($cell),
+ colIndex = _$$data7.colIndex,
+ sortOrder = _$$data7.sortOrder;
sortOrder = (0, _utils.getDefault)(sortOrder, 'none');
- var col = _this3.getColumn(colIndex);
+ var col = _this4.getColumn(colIndex);
if (col && col.sortable === false) {
return;
}
// reset sort indicator
- (0, _dom2.default)('.sort-indicator', _this3.header).textContent = '';
- _dom2.default.each('.data-table-col', _this3.header).map(function ($cell) {
+ (0, _dom2.default)('.sort-indicator', _this4.header).textContent = '';
+ _dom2.default.each('.data-table-col', _this4.header).map(function ($cell) {
_dom2.default.data($cell, {
sortOrder: 'none'
});
@@ -2519,18 +2617,38 @@ var ColumnManager = function () {
});
(0, _dom2.default)('.sort-indicator', $cell).textContent = textContent;
- if (_this3.events && _this3.events.onSort) {
- _this3.events.onSort(colIndex, nextSortOrder);
+ if (_this4.events && _this4.events.onSort) {
+ _this4.events.onSort(colIndex, nextSortOrder);
} else {
- _this3.instance.freeze();
- _this3.sortRows(colIndex, nextSortOrder).then(function () {
- return _this3.rowmanager.refreshRows();
- }).then(function () {
- return _this3.instance.unfreeze();
- });
+ _this4.sortColumn(colIndex, nextSortOrder);
}
});
}
+ }, {
+ key: 'sortColumn',
+ value: function sortColumn(colIndex, nextSortOrder) {
+ var _this5 = this;
+
+ this.instance.freeze();
+ this.sortRows(colIndex, nextSortOrder).then(function () {
+ return _this5.rowmanager.refreshRows();
+ }).then(function () {
+ return _this5.instance.unfreeze();
+ });
+ }
+ }, {
+ key: 'removeColumn',
+ value: function removeColumn(colIndex) {
+ var _this6 = this;
+
+ this.instance.freeze();
+ this.datamanager.removeColumn(colIndex).then(function () {
+ _this6.refreshHeader();
+ return _this6.rowmanager.refreshRows();
+ }).then(function () {
+ return _this6.instance.unfreeze();
+ });
+ }
}, {
key: 'setDimensions',
value: function setDimensions() {
@@ -2571,7 +2689,7 @@ var ColumnManager = function () {
}, {
key: 'setupMinWidth',
value: function setupMinWidth() {
- var _this4 = this;
+ var _this7 = this;
// cache minWidth for each column
this.minWidthMap = (0, _utils.getDefault)(this.minWidthMap, []);
@@ -2579,19 +2697,19 @@ var ColumnManager = function () {
_dom2.default.each('.data-table-col', this.header).map(function (col) {
var width = _dom2.default.style((0, _dom2.default)('.content', col), 'width');
- var _$$data6 = _dom2.default.data(col),
- colIndex = _$$data6.colIndex;
+ var _$$data8 = _dom2.default.data(col),
+ colIndex = _$$data8.colIndex;
- if (!_this4.minWidthMap[colIndex]) {
+ if (!_this7.minWidthMap[colIndex]) {
// only set this once
- _this4.minWidthMap[colIndex] = width;
+ _this7.minWidthMap[colIndex] = width;
}
});
}
}, {
key: 'setNaturalColumnWidth',
value: function setNaturalColumnWidth() {
- var _this5 = this;
+ var _this8 = 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) {
@@ -2599,22 +2717,22 @@ var ColumnManager = function () {
var width = _dom2.default.style((0, _dom2.default)('.content', $cell), 'width');
var height = _dom2.default.style((0, _dom2.default)('.content', $cell), 'height');
- var _$$data7 = _dom2.default.data($cell),
- colIndex = _$$data7.colIndex;
+ var _$$data9 = _dom2.default.data($cell),
+ colIndex = _$$data9.colIndex;
- var minWidth = _this5.getColumnMinWidth(colIndex);
+ var minWidth = _this8.getColumnMinWidth(colIndex);
if (width < minWidth) {
width = minWidth;
}
- _this5.setColumnWidth(colIndex, width);
- _this5.setDefaultCellHeight(height);
+ _this8.setColumnWidth(colIndex, width);
+ _this8.setDefaultCellHeight(height);
});
}
}, {
key: 'distributeRemainingWidth',
value: function distributeRemainingWidth() {
- var _this6 = this;
+ var _this9 = this;
if (!this.options.takeAvailableSpace) return;
@@ -2633,11 +2751,11 @@ var ColumnManager = function () {
var deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;
resizableColumns.map(function (col) {
- var width = _dom2.default.style(_this6.getColumnHeaderElement(col.colIndex), 'width');
+ var width = _dom2.default.style(_this9.getColumnHeaderElement(col.colIndex), 'width');
var finalWidth = Math.min(width + deltaWidth) - 2;
- _this6.setColumnHeaderWidth(col.colIndex, finalWidth);
- _this6.setColumnWidth(col.colIndex, finalWidth);
+ _this9.setColumnHeaderWidth(col.colIndex, finalWidth);
+ _this9.setColumnWidth(col.colIndex, finalWidth);
});
this.instance.setBodyWidth();
}
@@ -2651,12 +2769,12 @@ var ColumnManager = function () {
}, {
key: 'setColumnAlignments',
value: function setColumnAlignments() {
- var _this7 = this;
+ var _this10 = this;
// align columns
this.getColumns().map(function (column) {
if (['left', 'center', 'right'].includes(column.align)) {
- _this7.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
+ _this10.style.setStyle('[data-col-index="' + column.colIndex + '"]', {
'text-align': column.align
});
}
@@ -2760,8 +2878,22 @@ var ColumnManager = function () {
return ColumnManager;
}();
+// eslint-disable-next-line
+
+
exports.default = ColumnManager;
-module.exports = exports['default'];
+var getDropdownHTML = function getDropdownHTML() {
+ var dropdownButton = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'v';
+
+ // add dropdown buttons
+ var dropdownItems = this.options.headerDropdown;
+
+ return '' + dropdownButton + '
\n \n ' + dropdownItems.map(function (d, i) {
+ return '
' + d.label + '
';
+ }).join('') + '\n
\n ${getCellContent(column)}\n | \n `;\n}\n\nexport function getCellContent(column) {\n const { isHeader } = column;\n const editCellHTML = isHeader ? '' : getEditCellHTML();\n const sortIndicator = isHeader ? '' : '';\n const resizeColumn = isHeader ? '' : '';\n\n return `\n \n ${column.format ? column.format(column.content) : column.content}\n ${sortIndicator}\n ${resizeColumn}\n
\n ${editCellHTML}\n `;\n}\n\nexport function getEditCellHTML() {\n return `\n \n `;\n}\n\nfunction cellSelector(colIndex, rowIndex) {\n return `.data-table-col[data-col-index=\"${colIndex}\"][data-row-index=\"${rowIndex}\"]`;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/cellmanager.js","import $ from './dom';\nimport { makeDataAttributeString, promisify } from './utils';\nimport { getCellHTML } from './cellmanager';\n\nexport default class RowManager {\n constructor(instance) {\n this.instance = instance;\n this.options = this.instance.options;\n this.wrapper = this.instance.wrapper;\n this.bodyScrollable = this.instance.bodyScrollable;\n\n this.bindEvents();\n this.refreshRows = promisify(this.refreshRows, this);\n }\n\n get datamanager() {\n return this.instance.datamanager;\n }\n\n bindEvents() {\n this.bindCheckbox();\n }\n\n bindCheckbox() {\n if (!this.options.addCheckboxColumn) return;\n\n // map of checked rows\n this.checkMap = [];\n\n $.on(this.wrapper, 'click', '.data-table-col[data-col-index=\"0\"] [type=\"checkbox\"]', (e, $checkbox) => {\n const $cell = $checkbox.closest('.data-table-col');\n const { rowIndex, isHeader } = $.data($cell);\n const checked = $checkbox.checked;\n\n if (isHeader) {\n this.checkAll(checked);\n } else {\n this.checkRow(rowIndex, checked);\n }\n });\n }\n\n refreshRows() {\n this.instance.renderBody();\n this.instance.setDimensions();\n }\n\n getCheckedRows() {\n return this.checkMap\n .map((c, rowIndex) => {\n if (c) {\n return rowIndex;\n }\n return null;\n })\n .filter(c => {\n return c !== null || c !== undefined;\n });\n }\n\n highlightCheckedRows() {\n this.getCheckedRows()\n .map(rowIndex => this.checkRow(rowIndex, true));\n }\n\n checkRow(rowIndex, toggle) {\n const value = toggle ? 1 : 0;\n\n // update internal map\n this.checkMap[rowIndex] = value;\n // set checkbox value explicitly\n $.each(`.data-table-col[data-row-index=\"${rowIndex}\"][data-col-index=\"0\"] [type=\"checkbox\"]`, this.bodyScrollable)\n .map(input => {\n input.checked = toggle;\n });\n // highlight row\n this.highlightRow(rowIndex, toggle);\n }\n\n checkAll(toggle) {\n const value = toggle ? 1 : 0;\n\n // update internal map\n if (toggle) {\n this.checkMap = Array.from(Array(this.getTotalRows())).map(c => value);\n } else {\n this.checkMap = [];\n }\n // set checkbox value\n $.each('.data-table-col[data-col-index=\"0\"] [type=\"checkbox\"]', this.bodyScrollable)\n .map(input => {\n input.checked = toggle;\n });\n // highlight all\n this.highlightAll(toggle);\n }\n\n highlightRow(rowIndex, toggle = true) {\n const $row = this.getRow$(rowIndex);\n if (!$row) return;\n\n if (!toggle && this.bodyScrollable.classList.contains('row-highlight-all')) {\n $row.classList.add('row-unhighlight');\n return;\n }\n\n if (toggle && $row.classList.contains('row-unhighlight')) {\n $row.classList.remove('row-unhighlight');\n }\n\n this._highlightedRows = this._highlightedRows || {};\n\n if (toggle) {\n $row.classList.add('row-highlight');\n this._highlightedRows[rowIndex] = $row;\n } else {\n $row.classList.remove('row-highlight');\n delete this._highlightedRows[rowIndex];\n }\n }\n\n highlightAll(toggle = true) {\n if (toggle) {\n this.bodyScrollable.classList.add('row-highlight-all');\n } else {\n this.bodyScrollable.classList.remove('row-highlight-all');\n for (const rowIndex in this._highlightedRows) {\n const $row = this._highlightedRows[rowIndex];\n $row.classList.remove('row-highlight');\n }\n this._highlightedRows = {};\n }\n }\n\n getRow$(rowIndex) {\n return $(`.data-table-row[data-row-index=\"${rowIndex}\"]`, this.bodyScrollable);\n }\n\n getTotalRows() {\n return this.datamanager.getRowCount();\n }\n\n getFirstRowIndex() {\n return 0;\n }\n\n getLastRowIndex() {\n return this.datamanager.getRowCount() - 1;\n }\n}\n\nexport function getRowHTML(columns, props) {\n const dataAttr = makeDataAttributeString(props);\n\n return `\n \n ${columns.map(getCellHTML).join('')}\n
\n `;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/rowmanager.js","import DataTable from './datatable.js';\nimport packageJson from '../package.json';\nDataTable.__version__ = packageJson.version;\n\nexport default DataTable;\n\n\n\n// WEBPACK FOOTER //\n// ./src/index.js","import $ from './dom';\nimport Clusterize from 'clusterize.js';\nimport DataManager from './datamanager';\nimport CellManager from './cellmanager';\nimport ColumnManager from './columnmanager';\nimport RowManager from './rowmanager';\nimport Style from './style';\n\nimport { getRowHTML } from './rowmanager';\n\nimport './style.scss';\n\nconst DEFAULT_OPTIONS = {\n events: null,\n data: {\n columns: [],\n rows: []\n },\n freezeMessage: 'Loading...',\n editing: null,\n addSerialNoColumn: true,\n addCheckboxColumn: true,\n enableClusterize: true,\n enableLogs: false,\n takeAvailableSpace: false\n};\n\nclass DataTable {\n constructor(wrapper, options) {\n DataTable.instances++;\n\n if (typeof wrapper === 'string') {\n // css selector\n wrapper = document.querySelector(wrapper);\n }\n this.wrapper = wrapper;\n if (!this.wrapper) {\n throw new Error('Invalid argument given for `wrapper`');\n }\n\n this.options = Object.assign({}, DEFAULT_OPTIONS, options);\n // custom user events\n this.events = this.options.events;\n\n this.prepare();\n\n this.style = new Style(this);\n this.datamanager = new DataManager(this.options);\n this.rowmanager = new RowManager(this);\n this.columnmanager = new ColumnManager(this);\n this.cellmanager = new CellManager(this);\n\n if (this.options.data) {\n this.refresh(this.options.data);\n }\n }\n\n prepare() {\n this.prepareDom();\n }\n\n prepareDom() {\n this.wrapper.innerHTML = `\n \n \n
\n
\n
\n ${this.options.freezeMessage}\n
\n \n
\n ${getBodyHTML(rows)}\n
\n `;\n }\n\n renderBodyWithClusterize() {\n // empty body\n this.bodyScrollable.innerHTML = `\n \n `;\n\n this.start = 0;\n this.pageLength = 1000;\n this.end = this.start + this.pageLength;\n\n // only append ${this.pageLength} rows in the beginning,\n // defer remaining\n const rows = this.datamanager.getRows(this.start, this.end);\n const initialData = this.getDataForClusterize(rows);\n\n this.clusterize = new Clusterize({\n rows: initialData,\n scrollElem: this.bodyScrollable,\n contentElem: $('tbody', this.bodyScrollable),\n callbacks: {\n clusterChanged: () => {\n this.rowmanager.highlightCheckedRows();\n this.cellmanager.selectAreaOnClusterChanged();\n this.cellmanager.focusCellOnClusterChanged();\n }\n }\n });\n this.log('dataAppended', this.pageLength);\n this.appendRemainingData();\n }\n\n appendRemainingData() {\n let dataAppended = this.pageLength;\n const promises = [];\n const rowCount = this.datamanager.getRowCount();\n\n while (dataAppended + this.pageLength < rowCount) {\n this.start = this.end;\n this.end = this.start + this.pageLength;\n promises.push(this.appendNextPagePromise(this.start, this.end));\n dataAppended += this.pageLength;\n }\n\n if (rowCount % this.pageLength > 0) {\n // last page\n this.start = this.end;\n this.end = this.start + this.pageLength;\n promises.push(this.appendNextPagePromise(this.start, this.end));\n }\n\n return promises.reduce(\n (prev, cur) => prev.then(cur), Promise.resolve()\n );\n }\n\n appendNextPagePromise(start, end) {\n return new Promise(resolve => {\n setTimeout(() => {\n const rows = this.datamanager.getRows(start, end);\n const data = this.getDataForClusterize(rows);\n\n this.clusterize.append(data);\n this.log('dataAppended', rows.length);\n resolve();\n }, 0);\n });\n }\n\n getDataForClusterize(rows) {\n return rows.map((row) => getRowHTML(row, { rowIndex: row[0].rowIndex }));\n }\n\n setDimensions() {\n this.columnmanager.setDimensions();\n\n this.setBodyWidth();\n\n $.style(this.bodyScrollable, {\n marginTop: $.style(this.header, 'height') + 'px'\n });\n\n $.style($('table', this.bodyScrollable), {\n margin: 0\n });\n }\n\n setBodyWidth() {\n const width = $.style(this.header, 'width');\n\n $.style(this.bodyScrollable, { width: width + 'px' });\n }\n\n getColumn(colIndex) {\n return this.datamanager.getColumn(colIndex);\n }\n\n getCell(colIndex, rowIndex) {\n return this.datamanager.getCell(colIndex, rowIndex);\n }\n\n getColumnHeaderElement(colIndex) {\n return this.columnmanager.getColumnHeaderElement(colIndex);\n }\n\n getViewportHeight() {\n if (!this.viewportHeight) {\n this.viewportHeight = $.style(this.bodyScrollable, 'height');\n }\n\n return this.viewportHeight;\n }\n\n scrollToLastColumn() {\n this.datatableWrapper.scrollLeft = 9999;\n }\n\n freeze() {\n $.style(this.freezeContainer, {\n display: ''\n });\n }\n\n unfreeze() {\n $.style(this.freezeContainer, {\n display: 'none'\n });\n }\n\n log() {\n if (this.options.enableLogs) {\n console.log.apply(console, arguments);\n }\n }\n}\n\nDataTable.instances = 0;\n\nexport default DataTable;\n\nexport function getBodyHTML(rows) {\n return `\n \n ${rows.map(row => getRowHTML(row, { rowIndex: row[0].rowIndex })).join('')}\n \n `;\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/datatable.js","module.exports = __WEBPACK_EXTERNAL_MODULE_6__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external {\"commonjs\":\"clusterize.js\",\"commonjs2\":\"clusterize.js\",\"root\":\"Clusterize\"}\n// module id = 6\n// module chunks = 0","import { isNumeric, promisify } from './utils';\n\nexport default class DataManager {\n constructor(options) {\n this.options = options;\n this.currentSort = {\n sortBy: -1, // colIndex\n sortOrder: 'none' // asc, desc, none\n };\n this.sortRows = promisify(this.sortRows, this);\n this.switchColumn = promisify(this.switchColumn, this);\n this.removeColumn = promisify(this.removeColumn, this);\n }\n\n init(data) {\n let { columns, rows } = data;\n\n this.rowCount = 0;\n this.columns = [];\n this.rows = [];\n\n this.columns = this.prepareColumns(columns);\n this.rows = this.prepareRows(rows);\n\n this.prepareNumericColumns();\n }\n\n prepareColumns(columns) {\n if (!Array.isArray(columns)) {\n throw new TypeError('`columns` must be an array');\n }\n\n if (this.options.addSerialNoColumn && !this._serialNoColumnAdded) {\n const val = {\n content: 'Sr. No',\n editable: false,\n resizable: false,\n align: 'center',\n focusable: false\n };\n\n columns = [val].concat(columns);\n this._serialNoColumnAdded = true;\n }\n\n if (this.options.addCheckboxColumn && !this._checkboxColumnAdded) {\n const val = {\n content: '',\n editable: false,\n resizable: false,\n sortable: false,\n focusable: false\n };\n\n columns = [val].concat(columns);\n this._checkboxColumnAdded = true;\n }\n\n return prepareColumns(columns, {\n isHeader: 1,\n format: value => `${value}`\n });\n }\n\n prepareNumericColumns() {\n const row0 = this.getRow(0);\n this.columns = this.columns.map((column, i) => {\n\n const cellValue = row0[i].content;\n if (!column.align && cellValue && isNumeric(cellValue)) {\n column.align = 'right';\n }\n\n return column;\n });\n }\n\n prepareRows(rows) {\n if (!Array.isArray(rows) || !Array.isArray(rows[0])) {\n throw new TypeError('`rows` must be an array of arrays');\n }\n\n rows = rows.map((row, i) => {\n const index = this._getNextRowCount();\n\n if (row.length < this.columns.length) {\n if (this._serialNoColumnAdded) {\n const val = (index + 1) + '';\n\n row = [val].concat(row);\n }\n\n if (this._checkboxColumnAdded) {\n const val = '';\n\n row = [val].concat(row);\n }\n }\n\n return prepareRow(row, index);\n });\n\n return rows;\n }\n\n appendRows(rows) {\n if (Array.isArray(rows) && !Array.isArray(rows[0])) {\n rows = [rows];\n }\n const _rows = this.prepareRows(rows);\n\n this.rows = this.rows.concat(_rows);\n }\n\n sortRows(colIndex, sortOrder = 'none') {\n colIndex = +colIndex;\n\n if (this.currentSort.colIndex === colIndex) {\n // reverse the array if only sortOrder changed\n if (\n (this.currentSort.sortOrder === 'asc' && sortOrder === 'desc') ||\n (this.currentSort.sortOrder === 'desc' && sortOrder === 'asc')\n ) {\n this.reverseArray(this.rows);\n this.currentSort.sortOrder = sortOrder;\n return;\n }\n }\n\n this.rows.sort((a, b) => {\n const _aIndex = a[0].rowIndex;\n const _bIndex = b[0].rowIndex;\n const _a = a[colIndex].content;\n const _b = b[colIndex].content;\n\n if (sortOrder === 'none') {\n return _aIndex - _bIndex;\n } else if (sortOrder === 'asc') {\n if (_a < _b) return -1;\n if (_a > _b) return 1;\n if (_a === _b) return 0;\n } else if (sortOrder === 'desc') {\n if (_a < _b) return 1;\n if (_a > _b) return -1;\n if (_a === _b) return 0;\n }\n return 0;\n });\n\n this.currentSort.colIndex = colIndex;\n this.currentSort.sortOrder = sortOrder;\n }\n\n reverseArray(array) {\n let left = null;\n let right = null;\n let length = array.length;\n\n for (left = 0, right = length - 1; left < right; left += 1, right -= 1) {\n const temporary = array[left];\n\n array[left] = array[right];\n array[right] = temporary;\n }\n }\n\n switchColumn(index1, index2) {\n // update columns\n const temp = this.columns[index1];\n this.columns[index1] = this.columns[index2];\n this.columns[index2] = temp;\n\n this.columns[index1].colIndex = index1;\n this.columns[index2].colIndex = index2;\n\n // update rows\n this.rows = this.rows.map(row => {\n const newCell1 = Object.assign({}, row[index1], { colIndex: index2 });\n const newCell2 = Object.assign({}, row[index2], { colIndex: index1 });\n\n let newRow = row.map(cell => {\n // make object copy\n return Object.assign({}, cell);\n });\n\n newRow[index2] = newCell1;\n newRow[index1] = newCell2;\n\n return newRow;\n });\n }\n\n removeColumn(index) {\n index = +index;\n const filter = cell => cell.colIndex !== index;\n const map = (cell, i) => Object.assign({}, cell, { colIndex: i });\n // update columns\n this.columns = this.columns\n .filter(filter)\n .map(map);\n\n // update rows\n this.rows = this.rows.map(row => {\n const newRow = row\n .filter(filter)\n .map(map);\n\n return newRow;\n });\n }\n\n getRowCount() {\n return this.rowCount;\n }\n\n _getNextRowCount() {\n const val = this.rowCount;\n\n this.rowCount++;\n return val;\n }\n\n getRows(start, end) {\n return this.rows.slice(start, end);\n }\n\n getColumns(skipStandardColumns) {\n let columns = this.columns;\n\n if (skipStandardColumns) {\n columns = columns.slice(this.getStandardColumnCount());\n }\n\n return columns;\n }\n\n getStandardColumnCount() {\n if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) {\n return 2;\n }\n\n if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) {\n return 1;\n }\n\n return 0;\n }\n\n getColumnCount(skipStandardColumns) {\n let val = this.columns.length;\n\n if (skipStandardColumns) {\n val = val - this.getStandardColumnCount();\n }\n\n return val;\n }\n\n getColumn(colIndex) {\n colIndex = +colIndex;\n return this.columns.find(col => col.colIndex === colIndex);\n }\n\n getRow(rowIndex) {\n rowIndex = +rowIndex;\n return this.rows.find(row => row[0].rowIndex === rowIndex);\n }\n\n getCell(colIndex, rowIndex) {\n rowIndex = +rowIndex;\n colIndex = +colIndex;\n return this.rows.find(row => row[0].rowIndex === rowIndex)[colIndex];\n }\n\n get() {\n return {\n columns: this.columns,\n rows: this.rows\n };\n }\n}\n\nfunction prepareColumns(columns, props = {}) {\n const _columns = columns.map(prepareCell);\n\n return _columns.map(col => Object.assign({}, col, props));\n}\n\nfunction prepareRow(row, i) {\n return prepareColumns(row, {\n rowIndex: i\n });\n}\n\nfunction prepareCell(col, i) {\n if (typeof col === 'string') {\n col = {\n content: col\n };\n }\n return Object.assign(col, {\n colIndex: i\n });\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/datamanager.js","import $ from './dom';\n\nconst KEYCODES = {\n 13: 'enter',\n 91: 'meta',\n 16: 'shift',\n 17: 'ctrl',\n 18: 'alt',\n 37: 'left',\n 38: 'up',\n 39: 'right',\n 40: 'down',\n 9: 'tab',\n 27: 'esc',\n 67: 'c'\n};\n\nconst handlers = {};\n\nfunction bind() {\n $.on(document, 'keydown', handler);\n}\n\nfunction handler(e) {\n let key = KEYCODES[e.keyCode];\n\n if (e.shiftKey && key !== 'shift') {\n key = 'shift+' + key;\n }\n\n if ((e.ctrlKey && key !== 'ctrl') || (e.metaKey && key !== 'meta')) {\n key = 'ctrl+' + key;\n }\n\n const _handlers = handlers[key];\n\n if (_handlers && _handlers.length > 0) {\n _handlers.map(handler => {\n const preventBubbling = handler();\n\n if (preventBubbling === undefined || preventBubbling === true) {\n e.preventDefault();\n }\n });\n }\n}\n\nbind();\n\nexport default {\n on(key, handler) {\n const keys = key.split(',').map(k => k.trim());\n\n keys.map(key => {\n handlers[key] = handlers[key] || [];\n handlers[key].push(handler);\n });\n }\n};\n\n\n\n// WEBPACK FOOTER //\n// ./src/keyboard.js","import $ from './dom';\nimport Sortable from 'sortablejs';\nimport { getRowHTML } from './rowmanager';\nimport { getDefault, throttle } from './utils';\n\nexport default class ColumnManager {\n constructor(instance) {\n this.instance = instance;\n this.options = this.instance.options;\n this.header = this.instance.header;\n this.datamanager = this.instance.datamanager;\n this.style = this.instance.style;\n this.wrapper = this.instance.wrapper;\n this.rowmanager = this.instance.rowmanager;\n\n this.bindEvents();\n }\n\n renderHeader() {\n this.header.innerHTML = '';\n this.refreshHeader();\n }\n\n refreshHeader() {\n const columns = this.datamanager.getColumns();\n\n if (!$('.data-table-col', this.header)) {\n // insert html\n $('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });\n } else {\n\n const $cols = $.each('.data-table-col', this.header);\n\n if (columns.length < $cols.length) {\n // deleted column\n $('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });\n return;\n }\n\n // update colIndex of each header cell\n $cols.map(($col, i) => {\n $.data($col, {\n colIndex: columns[i].colIndex\n });\n });\n }\n // reset columnMap\n this.$columnMap = [];\n }\n\n bindEvents() {\n this.bindResizeColumn();\n this.bindSortColumn();\n this.bindMoveColumn();\n }\n\n bindResizeColumn() {\n let isDragging = false;\n let $resizingCell, startWidth, startX;\n\n $.on(this.header, 'mousedown', '.data-table-col .column-resizer', (e, $handle) => {\n const $cell = $handle.parentNode.parentNode;\n $resizingCell = $cell;\n const { colIndex } = $.data($resizingCell);\n const col = this.getColumn(colIndex);\n\n if (col && col.resizable === false) {\n return;\n }\n\n isDragging = true;\n startWidth = $.style($('.content', $resizingCell), 'width');\n startX = e.pageX;\n });\n\n $.on(document.body, 'mouseup', (e) => {\n if (!$resizingCell) return;\n isDragging = false;\n\n const { colIndex } = $.data($resizingCell);\n const width = $.style($('.content', $resizingCell), 'width');\n\n this.setColumnWidth(colIndex, width);\n this.instance.setBodyWidth();\n $resizingCell = null;\n });\n\n $.on(document.body, 'mousemove', (e) => {\n if (!isDragging) return;\n const finalWidth = startWidth + (e.pageX - startX);\n const { colIndex } = $.data($resizingCell);\n\n if (this.getColumnMinWidth(colIndex) > finalWidth) {\n // don't resize past minWidth\n return;\n }\n\n this.setColumnHeaderWidth(colIndex, finalWidth);\n });\n }\n\n bindMoveColumn() {\n let initialized;\n\n const initialize = () => {\n if (initialized) {\n $.off(document.body, 'mousemove', initialize);\n return;\n }\n const ready = $('.data-table-col', this.header);\n if (!ready) return;\n\n const $parent = $('.data-table-row', this.header);\n\n $.on(document, 'drag', '.data-table-col', throttle((e, $target) => {\n if (e.offsetY > 200) {\n $target.classList.add('remove-column');\n } else {\n setTimeout(() => {\n $target.classList.remove('remove-column');\n }, 10);\n }\n }));\n\n this.sortable = Sortable.create($parent, {\n onEnd: (e) => {\n const { oldIndex, newIndex } = e;\n const $draggedCell = e.item;\n const { colIndex } = $.data($draggedCell);\n\n // debugger;\n\n if ($draggedCell.classList.contains('remove-column')) {\n this.instance.freeze();\n this.datamanager.removeColumn(colIndex)\n .then(() => {\n this.refreshHeader();\n return this.rowmanager.refreshRows();\n })\n .then(() => this.instance.unfreeze());\n return;\n }\n\n if (+colIndex === newIndex) return;\n\n this.instance.freeze();\n this.datamanager.switchColumn(oldIndex, newIndex)\n .then(() => {\n this.refreshHeader();\n return this.rowmanager.refreshRows();\n })\n .then(() => {\n this.setColumnWidth(oldIndex);\n this.setColumnWidth(newIndex);\n })\n .then(() => this.instance.unfreeze());\n },\n preventOnFilter: false,\n filter: '.column-resizer, .sort-indicator',\n animation: 150\n });\n };\n\n $.on(document.body, 'mousemove', initialize);\n }\n\n bindSortColumn() {\n\n $.on(this.header, 'click', '.data-table-col .column-title', (e, span) => {\n const $cell = span.closest('.data-table-col');\n let { colIndex, sortOrder } = $.data($cell);\n sortOrder = getDefault(sortOrder, 'none');\n const col = this.getColumn(colIndex);\n\n if (col && col.sortable === false) {\n return;\n }\n\n // reset sort indicator\n $('.sort-indicator', this.header).textContent = '';\n $.each('.data-table-col', this.header).map($cell => {\n $.data($cell, {\n sortOrder: 'none'\n });\n });\n\n let nextSortOrder, textContent;\n if (sortOrder === 'none') {\n nextSortOrder = 'asc';\n textContent = '▲';\n } else if (sortOrder === 'asc') {\n nextSortOrder = 'desc';\n textContent = '▼';\n } else if (sortOrder === 'desc') {\n nextSortOrder = 'none';\n textContent = '';\n }\n\n $.data($cell, {\n sortOrder: nextSortOrder\n });\n $('.sort-indicator', $cell).textContent = textContent;\n\n if (this.events && this.events.onSort) {\n this.events.onSort(colIndex, nextSortOrder);\n } else {\n this.instance.freeze();\n this.sortRows(colIndex, nextSortOrder)\n .then(() => this.rowmanager.refreshRows())\n .then(() => this.instance.unfreeze());\n }\n });\n }\n\n setDimensions() {\n this.setHeaderStyle();\n this.setupMinWidth();\n this.setNaturalColumnWidth();\n this.distributeRemainingWidth();\n this.setColumnAlignments();\n }\n\n setHeaderStyle() {\n if (!this.options.takeAvailableSpace) {\n // setting width as 0 will ensure that the\n // header doesn't take the available space\n $.style(this.header, {\n width: 0\n });\n }\n\n $.style(this.header, {\n margin: 0\n });\n\n // don't show resize cursor on nonResizable columns\n const nonResizableColumnsSelector = this.datamanager.getColumns()\n .filter(col => col.resizable !== undefined && !col.resizable)\n .map(col => col.colIndex)\n .map(i => `.data-table-header [data-col-index=\"${i}\"]`)\n .join();\n\n this.style.setStyle(nonResizableColumnsSelector, {\n cursor: 'pointer'\n });\n }\n\n setupMinWidth() {\n // cache minWidth for each column\n this.minWidthMap = getDefault(this.minWidthMap, []);\n\n $.each('.data-table-col', this.header).map(col => {\n const width = $.style($('.content', col), 'width');\n const { colIndex } = $.data(col);\n\n if (!this.minWidthMap[colIndex]) {\n // only set this once\n this.minWidthMap[colIndex] = width;\n }\n });\n }\n\n setNaturalColumnWidth() {\n // set initial width as naturally calculated by table's first row\n $.each('.data-table-row[data-row-index=\"0\"] .data-table-col', this.bodyScrollable).map($cell => {\n\n let width = $.style($('.content', $cell), 'width');\n const height = $.style($('.content', $cell), 'height');\n const { colIndex } = $.data($cell);\n const minWidth = this.getColumnMinWidth(colIndex);\n\n if (width < minWidth) {\n width = minWidth;\n }\n this.setColumnWidth(colIndex, width);\n this.setDefaultCellHeight(height);\n });\n }\n\n distributeRemainingWidth() {\n if (!this.options.takeAvailableSpace) return;\n\n const wrapperWidth = $.style(this.instance.datatableWrapper, 'width');\n const headerWidth = $.style(this.header, 'width');\n\n if (headerWidth >= wrapperWidth) {\n // don't resize, horizontal scroll takes place\n return;\n }\n\n const resizableColumns = this.datamanager.getColumns().filter(\n col => col.resizable === undefined || col.resizable\n );\n\n const deltaWidth = (wrapperWidth - headerWidth) / resizableColumns.length;\n\n resizableColumns.map(col => {\n const width = $.style(this.getColumnHeaderElement(col.colIndex), 'width');\n let finalWidth = Math.min(width + deltaWidth) - 2;\n\n this.setColumnHeaderWidth(col.colIndex, finalWidth);\n this.setColumnWidth(col.colIndex, finalWidth);\n });\n this.instance.setBodyWidth();\n }\n\n setDefaultCellHeight(height) {\n this.style.setStyle('.data-table-col .content', {\n height: height + 'px'\n });\n }\n\n setColumnAlignments() {\n // align columns\n this.getColumns()\n .map(column => {\n if (['left', 'center', 'right'].includes(column.align)) {\n this.style.setStyle(`[data-col-index=\"${column.colIndex}\"]`, {\n 'text-align': column.align\n });\n }\n });\n }\n\n sortRows(colIndex, sortOrder) {\n return this.datamanager.sortRows(colIndex, sortOrder);\n }\n\n getColumn(colIndex) {\n return this.datamanager.getColumn(colIndex);\n }\n\n getColumns() {\n return this.datamanager.getColumns();\n }\n\n setColumnWidth(colIndex, width) {\n this._columnWidthMap = this._columnWidthMap || [];\n\n if (!width) {\n const $headerContent = $(`.data-table-col[data-col-index=\"${colIndex}\"] .content`, this.header);\n width = $.style($headerContent, 'width');\n }\n\n let index = this._columnWidthMap[colIndex];\n const selector = `[data-col-index=\"${colIndex}\"] .content, [data-col-index=\"${colIndex}\"] .edit-cell`;\n const styles = {\n width: width + 'px'\n };\n\n index = this.style.setStyle(selector, styles, index);\n this._columnWidthMap[colIndex] = index;\n }\n\n setColumnHeaderWidth(colIndex, width) {\n this.$columnMap = this.$columnMap || [];\n const selector = `[data-col-index=\"${colIndex}\"][data-is-header] .content`;\n\n let $column = this.$columnMap[colIndex];\n if (!$column) {\n $column = this.header.querySelector(selector);\n this.$columnMap[colIndex] = $column;\n }\n\n $column.style.width = width + 'px';\n }\n\n getColumnMinWidth(colIndex) {\n colIndex = +colIndex;\n return this.minWidthMap && this.minWidthMap[colIndex];\n }\n\n getFirstColumnIndex() {\n if (this.options.addCheckboxColumn && this.options.addSerialNoColumn) {\n return 2;\n }\n\n if (this.options.addCheckboxColumn || this.options.addSerialNoColumn) {\n return 1;\n }\n\n return 0;\n }\n\n getHeaderCell$(colIndex) {\n return $(`.data-table-col[data-col-index=\"${colIndex}\"]`, this.header);\n }\n\n getLastColumnIndex() {\n return this.datamanager.getColumnCount() - 1;\n }\n\n getColumnHeaderElement(colIndex) {\n colIndex = +colIndex;\n if (colIndex < 0) return null;\n return $(`.data-table-col[data-is-header][data-col-index=\"${colIndex}\"]`, this.wrapper);\n }\n\n getSerialColumnIndex() {\n const columns = this.datamanager.getColumns();\n\n return columns.findIndex(column => column.content.includes('Sr. No'));\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/columnmanager.js","module.exports = __WEBPACK_EXTERNAL_MODULE_10__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external {\"commonjs\":\"sortablejs\",\"commonjs2\":\"sortablejs\",\"root\":\"Sortable\"}\n// module id = 10\n// module chunks = 0","import { camelCaseToDash } from './utils';\n\nexport default class Style {\n\n constructor(datatable) {\n this.datatable = datatable;\n this.scopeClass = 'datatable-instance-' + datatable.constructor.instances;\n datatable.datatableWrapper.classList.add(this.scopeClass);\n\n const styleEl = document.createElement('style');\n datatable.wrapper.insertBefore(styleEl, datatable.datatableWrapper);\n this.styleEl = styleEl;\n this.styleSheet = styleEl.sheet;\n }\n\n destroy() {\n this.datatable.wrapper.removeChild(this.styleEl);\n }\n\n setStyle(rule, styleMap, index = -1) {\n const styles = Object.keys(styleMap)\n .map(prop => {\n if (!prop.includes('-')) {\n prop = camelCaseToDash(prop);\n }\n return `${prop}:${styleMap[prop]};`;\n })\n .join('');\n let ruleString = `.${this.scopeClass} ${rule} { ${styles} }`;\n\n let _index = this.styleSheet.cssRules.length;\n if (index !== -1) {\n this.styleSheet.deleteRule(index);\n _index = index;\n }\n\n this.styleSheet.insertRule(ruleString, _index);\n return _index;\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./src/style.js","// style-loader: Adds some css to the DOM by adding a