Column actions in dropdown
This commit is contained in:
Faris Ansari
parent
608e133ff9
commit
ba0e339d2c
@ -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 ? '<span class="sort-indicator"></span>' : '';
|
||||
var resizeColumn = isHeader ? '<span class="column-resizer"></span>' : '';
|
||||
|
||||
return '\n <div class="content ellipsis">\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n ' + resizeColumn + '\n </div>\n ' + editCellHTML + '\n ';
|
||||
var editable = !isHeader && column.editable;
|
||||
var editCellHTML = editable ? getEditCellHTML() : '';
|
||||
|
||||
var resizable = isHeader && column.resizable !== false;
|
||||
var resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
|
||||
|
||||
var hasDropdown = isHeader && column.dropdown !== false;
|
||||
var dropdown = hasDropdown ? '<div class="data-table-dropdown">' + (0, _columnmanager.getDropdownHTML)() + '</div>' : '';
|
||||
|
||||
return '\n <div class="content ellipsis">\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + resizeColumn + '\n ' + dropdown + '\n </div>\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 '<div class="data-table-dropdown-toggle">' + dropdownButton + '</div>\n <div class="data-table-dropdown-list">\n ' + dropdownItems.map(function (d, i) {
|
||||
return '<div data-index="' + i + '">' + d.label + '</div>';
|
||||
}).join('') + '\n </div>\n ';
|
||||
};
|
||||
|
||||
exports.getDropdownHTML = getDropdownHTML;
|
||||
|
||||
/***/ }),
|
||||
/* 10 */
|
||||
@ -2880,7 +3012,7 @@ exports = module.exports = __webpack_require__(19)(undefined);
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, "/* variables */\n.data-table {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa;\n --light-red: #FD8B8B; }\n\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\nbutton, input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid var(--border-color); }\n .data-table thead td {\n border-bottom-width: 2px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: var(--light-bg);\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n .data-table .trash-container {\n position: absolute;\n bottom: 0;\n left: 30%;\n right: 30%;\n height: 70px;\n background: palevioletred;\n opacity: 0.5; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid var(--border-color); }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: var(--light-bg); }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .sort-indicator {\n position: absolute;\n right: 8px;\n top: 9px; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 4px;\n height: 100%;\n background-color: var(--primary-color);\n cursor: col-resize; }\n .data-table-header .data-table-col.remove-column {\n background-color: var(--light-red);\n transition: 300ms background-color ease-in-out; }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 8px;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 8px;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none;\n height: 1em; }\n .data-table-col.selected .content {\n border: 2px solid var(--primary-color); }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid var(--primary-color);\n display: block; }\n .data-table-col.highlight {\n background-color: var(--light-bg); }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n\n.data-table-row.row-highlight {\n background-color: var(--light-bg); }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n", ""]);
|
||||
exports.push([module.i, "/* variables */\n.data-table {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa;\n --light-red: #FD8B8B; }\n\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\nbutton, input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0; }\n\n/* styling */\n.data-table * {\n outline: none; }\n\n.data-table {\n width: 100%;\n position: relative;\n overflow: auto; }\n .data-table table {\n border-collapse: collapse; }\n .data-table table td {\n padding: 0;\n border: 1px solid var(--border-color); }\n .data-table thead td {\n border-bottom-width: 2px; }\n .data-table .freeze-container {\n display: flex;\n justify-content: center;\n align-content: center;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background-color: var(--light-bg);\n opacity: 0.5;\n font-size: 2em; }\n .data-table .freeze-container span {\n position: absolute;\n top: 50%;\n transform: translateY(-50%); }\n .data-table .trash-container {\n position: absolute;\n bottom: 0;\n left: 30%;\n right: 30%;\n height: 70px;\n background: palevioletred;\n opacity: 0.5; }\n\n.body-scrollable {\n max-height: 500px;\n overflow: auto;\n border-bottom: 1px solid var(--border-color); }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: var(--light-bg); }\n\n.data-table-header {\n position: absolute;\n top: 0;\n left: 0;\n background-color: white;\n font-weight: bold; }\n .data-table-header .content span:not(.column-resizer) {\n cursor: pointer; }\n .data-table-header .sort-indicator {\n position: absolute;\n right: 8px;\n top: 9px; }\n .data-table-header .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 4px;\n height: 100%;\n background-color: var(--primary-color);\n cursor: col-resize; }\n .data-table-header .data-table-dropdown {\n position: absolute;\n right: 10px;\n display: inline-flex;\n vertical-align: top;\n text-align: left; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-list {\n display: block; }\n .data-table-header .data-table-dropdown.is-active .data-table-dropdown-toggle {\n display: block; }\n .data-table-header .data-table-dropdown-toggle {\n display: none;\n background-color: transparent;\n border: none; }\n .data-table-header .data-table-dropdown-list {\n display: none;\n font-weight: normal;\n position: absolute;\n min-width: 8rem;\n top: 100%;\n right: 0;\n z-index: 1;\n background-color: white;\n border-radius: 3px;\n box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);\n padding-bottom: 0.5rem;\n padding-top: 0.5rem; }\n .data-table-header .data-table-dropdown-list > div {\n padding: 5px 10px; }\n .data-table-header .data-table-dropdown-list > div:hover {\n background-color: var(--light-bg); }\n .data-table-header .data-table-col.remove-column {\n background-color: var(--light-red);\n transition: 300ms background-color ease-in-out; }\n .data-table-header .data-table-col.sortable-chosen {\n background-color: var(--light-bg); }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 8px;\n border: 2px solid transparent; }\n .data-table-col .content.ellipsis {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n .data-table-col .edit-cell {\n display: none;\n padding: 8px;\n background: #fff;\n z-index: 1;\n height: 100%; }\n .data-table-col .edit-cell input {\n outline: none;\n width: 100%;\n border: none;\n height: 1em; }\n .data-table-col.selected .content {\n border: 2px solid var(--primary-color); }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid var(--primary-color);\n display: block; }\n .data-table-col.highlight {\n background-color: var(--light-bg); }\n .data-table-col:hover .column-resizer {\n display: inline-block; }\n .data-table-col:hover .data-table-dropdown-toggle {\n display: block; }\n\n.data-table-row.row-highlight {\n background-color: var(--light-bg); }\n\n.noselect {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,7 @@ import {
|
||||
} from './utils';
|
||||
import keyboard from './keyboard';
|
||||
import $ from './dom';
|
||||
import { getDropdownHTML } from './columnmanager';
|
||||
|
||||
export default class CellManager {
|
||||
constructor(instance) {
|
||||
@ -589,15 +590,21 @@ export function getCellHTML(column) {
|
||||
|
||||
export function getCellContent(column) {
|
||||
const { isHeader } = column;
|
||||
const editCellHTML = isHeader ? '' : getEditCellHTML();
|
||||
const sortIndicator = isHeader ? '<span class="sort-indicator"></span>' : '';
|
||||
const resizeColumn = isHeader ? '<span class="column-resizer"></span>' : '';
|
||||
|
||||
const editable = !isHeader && column.editable;
|
||||
const editCellHTML = editable ? getEditCellHTML() : '';
|
||||
|
||||
const resizable = isHeader && column.resizable !== false;
|
||||
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
|
||||
|
||||
const hasDropdown = isHeader && column.dropdown !== false;
|
||||
const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
|
||||
|
||||
return `
|
||||
<div class="content ellipsis">
|
||||
${column.format ? column.format(column.content) : column.content}
|
||||
${sortIndicator}
|
||||
${resizeColumn}
|
||||
${dropdown}
|
||||
</div>
|
||||
${editCellHTML}
|
||||
`;
|
||||
|
||||
@ -14,6 +14,7 @@ export default class ColumnManager {
|
||||
this.rowmanager = this.instance.rowmanager;
|
||||
|
||||
this.bindEvents();
|
||||
getDropdownHTML = getDropdownHTML.bind(this, this.options.dropdownButton);
|
||||
}
|
||||
|
||||
renderHeader() {
|
||||
@ -30,7 +31,6 @@ export default class ColumnManager {
|
||||
} else {
|
||||
|
||||
const $cols = $.each('.data-table-col', this.header);
|
||||
|
||||
if (columns.length < $cols.length) {
|
||||
// deleted column
|
||||
$('thead', this.header).innerHTML = getRowHTML(columns, { isHeader: 1 });
|
||||
@ -49,11 +49,47 @@ export default class ColumnManager {
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
this.bindDropdown();
|
||||
this.bindResizeColumn();
|
||||
this.bindSortColumn();
|
||||
this.bindMoveColumn();
|
||||
}
|
||||
|
||||
bindDropdown() {
|
||||
let $activeDropdown;
|
||||
$.on(this.header, 'click', '.data-table-dropdown-toggle', (e, $button) => {
|
||||
const $dropdown = $button.parentNode;
|
||||
|
||||
if (!$dropdown.classList.contains('is-active')) {
|
||||
deactivateDropdown();
|
||||
$dropdown.classList.add('is-active');
|
||||
$activeDropdown = $dropdown;
|
||||
} else {
|
||||
deactivateDropdown();
|
||||
}
|
||||
});
|
||||
|
||||
$.on(document.body, 'click', (e) => {
|
||||
if (e.target.matches('.data-table-dropdown-toggle')) return;
|
||||
deactivateDropdown();
|
||||
});
|
||||
|
||||
const dropdownItems = this.options.headerDropdown;
|
||||
|
||||
$.on(this.header, 'click', '.data-table-dropdown-list > div', (e, $item) => {
|
||||
const $col = $.closest('.data-table-col', $item);
|
||||
const { index } = $.data($item);
|
||||
const { colIndex } = $.data($col);
|
||||
let callback = dropdownItems[index].action;
|
||||
|
||||
callback && callback.call(this.instance, this.getColumn(colIndex));
|
||||
});
|
||||
|
||||
function deactivateDropdown(e) {
|
||||
$activeDropdown && $activeDropdown.classList.remove('is-active');
|
||||
$activeDropdown = null;
|
||||
}
|
||||
}
|
||||
|
||||
bindResizeColumn() {
|
||||
let isDragging = false;
|
||||
let $resizingCell, startWidth, startX;
|
||||
@ -204,14 +240,28 @@ export default class ColumnManager {
|
||||
if (this.events && this.events.onSort) {
|
||||
this.events.onSort(colIndex, nextSortOrder);
|
||||
} else {
|
||||
this.instance.freeze();
|
||||
this.sortRows(colIndex, nextSortOrder)
|
||||
.then(() => this.rowmanager.refreshRows())
|
||||
.then(() => this.instance.unfreeze());
|
||||
this.sortColumn(colIndex, nextSortOrder);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
sortColumn(colIndex, nextSortOrder) {
|
||||
this.instance.freeze();
|
||||
this.sortRows(colIndex, nextSortOrder)
|
||||
.then(() => this.rowmanager.refreshRows())
|
||||
.then(() => this.instance.unfreeze());
|
||||
}
|
||||
|
||||
removeColumn(colIndex) {
|
||||
this.instance.freeze();
|
||||
this.datamanager.removeColumn(colIndex)
|
||||
.then(() => {
|
||||
this.refreshHeader();
|
||||
return this.rowmanager.refreshRows();
|
||||
})
|
||||
.then(() => this.instance.unfreeze());
|
||||
}
|
||||
|
||||
setDimensions() {
|
||||
this.setHeaderStyle();
|
||||
this.setupMinWidth();
|
||||
@ -402,3 +452,19 @@ export default class ColumnManager {
|
||||
return columns.findIndex(column => column.content.includes('Sr. No'));
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
var getDropdownHTML = function getDropdownHTML(dropdownButton = 'v') {
|
||||
// add dropdown buttons
|
||||
const dropdownItems = this.options.headerDropdown;
|
||||
|
||||
return `<div class="data-table-dropdown-toggle">${dropdownButton}</div>
|
||||
<div class="data-table-dropdown-list">
|
||||
${dropdownItems.map((d, i) => `<div data-index="${i}">${d.label}</div>`).join('')}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
export {
|
||||
getDropdownHTML
|
||||
};
|
||||
|
||||
@ -36,7 +36,8 @@ export default class DataManager {
|
||||
editable: false,
|
||||
resizable: false,
|
||||
align: 'center',
|
||||
focusable: false
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
};
|
||||
|
||||
columns = [val].concat(columns);
|
||||
@ -49,7 +50,8 @@ export default class DataManager {
|
||||
editable: false,
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
focusable: false
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
};
|
||||
|
||||
columns = [val].concat(columns);
|
||||
|
||||
@ -16,6 +16,33 @@ const DEFAULT_OPTIONS = {
|
||||
columns: [],
|
||||
rows: []
|
||||
},
|
||||
dropdownButton: '▼',
|
||||
headerDropdown: [
|
||||
{
|
||||
label: 'Sort Ascending',
|
||||
action: function (column) {
|
||||
this.sortColumn(column.colIndex, 'asc');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Sort Descending',
|
||||
action: function (column) {
|
||||
this.sortColumn(column.colIndex, 'desc');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Reset sorting',
|
||||
action: function (column) {
|
||||
this.sortColumn(column.colIndex, 'none');
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Remove column',
|
||||
action: function (column) {
|
||||
this.removeColumn(column.colIndex);
|
||||
}
|
||||
}
|
||||
],
|
||||
freezeMessage: 'Loading...',
|
||||
editing: null,
|
||||
addSerialNoColumn: true,
|
||||
@ -39,6 +66,9 @@ class DataTable {
|
||||
}
|
||||
|
||||
this.options = Object.assign({}, DEFAULT_OPTIONS, options);
|
||||
this.options.headerDropdown =
|
||||
DEFAULT_OPTIONS.headerDropdown
|
||||
.concat(options.headerDropdown || []);
|
||||
// custom user events
|
||||
this.events = this.options.events;
|
||||
|
||||
@ -238,6 +268,14 @@ class DataTable {
|
||||
return this.viewportHeight;
|
||||
}
|
||||
|
||||
sortColumn(colIndex, sortOrder) {
|
||||
this.columnmanager.sortColumn(colIndex, sortOrder);
|
||||
}
|
||||
|
||||
removeColumn(colIndex) {
|
||||
this.columnmanager.removeColumn(colIndex);
|
||||
}
|
||||
|
||||
scrollToLastColumn() {
|
||||
this.datatableWrapper.scrollLeft = 9999;
|
||||
}
|
||||
|
||||
10
src/dom.js
10
src/dom.js
@ -147,3 +147,13 @@ $.getStyle = (element, prop) => {
|
||||
|
||||
return val;
|
||||
};
|
||||
|
||||
$.closest = (selector, element) => {
|
||||
if (!element) return null;
|
||||
|
||||
if (element.matches(selector)) {
|
||||
return element;
|
||||
}
|
||||
|
||||
return $.closest(selector, element.parentNode);
|
||||
};
|
||||
|
||||
@ -113,10 +113,62 @@ button, input {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.data-table-dropdown {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
|
||||
&.is-active {
|
||||
.data-table-dropdown-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.data-table-dropdown-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-dropdown-toggle {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-table-dropdown-list {
|
||||
display: none;
|
||||
font-weight: normal;
|
||||
|
||||
position: absolute;
|
||||
min-width: 8rem;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
&> div {
|
||||
padding: 5px 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-col.remove-column {
|
||||
background-color: var(--light-red);
|
||||
transition: 300ms background-color ease-in-out;
|
||||
}
|
||||
|
||||
.data-table-col.sortable-chosen {
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-col {
|
||||
@ -171,6 +223,10 @@ button, input {
|
||||
&:hover .column-resizer {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover .data-table-dropdown-toggle {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-row {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user