Promisify sorting, add column resizer handle
This commit is contained in:
Faris Ansari
parent
85f4b5af02
commit
877d6d0695
@ -72,12 +72,6 @@
|
||||
console.log(measure.duration);
|
||||
|
||||
window.datatable = datatable;
|
||||
|
||||
var datatable2 = new DataTable('#datatable2', {
|
||||
addSerialNoColumn: true,
|
||||
enableClusterize: true,
|
||||
data
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -278,6 +278,7 @@ exports.removeCSSRule = removeCSSRule;
|
||||
exports.copyTextToClipboard = copyTextToClipboard;
|
||||
exports.isNumeric = isNumeric;
|
||||
exports.throttle = throttle;
|
||||
exports.promisify = promisify;
|
||||
function camelCaseToDash(str) {
|
||||
return str.replace(/([A-Z])/g, function (g) {
|
||||
return '-' + g[0].toLowerCase();
|
||||
@ -469,6 +470,23 @@ function throttle(func, wait, options) {
|
||||
};
|
||||
};
|
||||
|
||||
function promisify(fn) {
|
||||
var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
|
||||
return function () {
|
||||
for (var _len = arguments.length, args = Array(_len), _key2 = 0; _key2 < _len; _key2++) {
|
||||
args[_key2] = arguments[_key2];
|
||||
}
|
||||
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
fn.apply(context, args);
|
||||
resolve('done', fn.name);
|
||||
}, 0);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
/* 2 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
@ -1216,8 +1234,9 @@ function getCellContent(column) {
|
||||
|
||||
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 </div>\n ' + editCellHTML + '\n ';
|
||||
return '\n <div class="content ellipsis">\n ' + (column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n ' + resizeColumn + '\n </div>\n ' + editCellHTML + '\n ';
|
||||
}
|
||||
|
||||
function getEditCellHTML() {
|
||||
@ -1265,6 +1284,7 @@ var RowManager = function () {
|
||||
this.bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
this.bindEvents();
|
||||
this.refreshRows = (0, _utils.promisify)(this.refreshRows, this);
|
||||
}
|
||||
|
||||
_createClass(RowManager, [{
|
||||
@ -1516,6 +1536,7 @@ var DEFAULT_OPTIONS = {
|
||||
columns: [],
|
||||
rows: []
|
||||
},
|
||||
freezeMessage: 'Loading...',
|
||||
editing: null,
|
||||
addSerialNoColumn: true,
|
||||
addCheckboxColumn: true,
|
||||
@ -1564,11 +1585,13 @@ var DataTable = function () {
|
||||
}, {
|
||||
key: 'prepareDom',
|
||||
value: function prepareDom() {
|
||||
this.wrapper.innerHTML = '\n <div class="data-table">\n <table class="data-table-header">\n </table>\n <div class="body-scrollable">\n </div>\n <div class="data-table-footer">\n </div>\n <div class="data-table-borders">\n <div class="border-outline"></div>\n <div class="border-background"></div>\n </div>\n </div>\n ';
|
||||
this.wrapper.innerHTML = '\n <div class="data-table">\n <table class="data-table-header">\n </table>\n <div class="body-scrollable">\n </div>\n <div class="freeze-container">\n <span>' + this.options.freezeMessage + '</span>\n </div>\n <div class="data-table-footer">\n </div>\n </div>\n ';
|
||||
|
||||
this.datatableWrapper = (0, _dom2.default)('.data-table', this.wrapper);
|
||||
this.header = (0, _dom2.default)('.data-table-header', this.wrapper);
|
||||
this.bodyScrollable = (0, _dom2.default)('.body-scrollable', this.wrapper);
|
||||
this.freezeContainer = (0, _dom2.default)('.freeze-container', this.wrapper);
|
||||
this.unfreeze();
|
||||
}
|
||||
}, {
|
||||
key: 'refresh',
|
||||
@ -1747,6 +1770,20 @@ var DataTable = function () {
|
||||
value: function scrollToLastColumn() {
|
||||
this.datatableWrapper.scrollLeft = 9999;
|
||||
}
|
||||
}, {
|
||||
key: 'freeze',
|
||||
value: function freeze() {
|
||||
_dom2.default.style(this.freezeContainer, {
|
||||
display: ''
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'unfreeze',
|
||||
value: function unfreeze() {
|
||||
_dom2.default.style(this.freezeContainer, {
|
||||
display: 'none'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'log',
|
||||
value: function log() {
|
||||
@ -1796,6 +1833,7 @@ var DataManager = function () {
|
||||
sortBy: -1, // colIndex
|
||||
sortOrder: 'none' // asc, desc, none
|
||||
};
|
||||
this.sortRows = (0, _utils.promisify)(this.sortRows, this);
|
||||
}
|
||||
|
||||
_createClass(DataManager, [{
|
||||
@ -2233,7 +2271,8 @@ var ColumnManager = function () {
|
||||
startWidth = void 0,
|
||||
startX = void 0;
|
||||
|
||||
_dom2.default.on(this.header, 'mousedown', '.data-table-col', function (e, $cell) {
|
||||
_dom2.default.on(this.header, 'mousedown', '.data-table-col .column-resizer', function (e, $handle) {
|
||||
var $cell = $handle.parentNode.parentNode;
|
||||
$currCell = $cell;
|
||||
|
||||
var _$$data = _dom2.default.data($currCell),
|
||||
@ -2284,7 +2323,7 @@ var ColumnManager = function () {
|
||||
value: function bindSortColumn() {
|
||||
var _this2 = this;
|
||||
|
||||
_dom2.default.on(this.header, 'click', '.data-table-col .content span', function (e, span) {
|
||||
_dom2.default.on(this.header, 'click', '.data-table-col .content span:first-child', function (e, span) {
|
||||
var $cell = span.closest('.data-table-col');
|
||||
|
||||
var _$$data4 = _dom2.default.data($cell),
|
||||
@ -2327,8 +2366,12 @@ var ColumnManager = function () {
|
||||
if (_this2.events && _this2.events.onSort) {
|
||||
_this2.events.onSort(colIndex, nextSortOrder);
|
||||
} else {
|
||||
_this2.sortRows(colIndex, nextSortOrder);
|
||||
_this2.rowmanager.refreshRows();
|
||||
_this2.instance.freeze();
|
||||
_this2.sortRows(colIndex, nextSortOrder).then(function () {
|
||||
return _this2.rowmanager.refreshRows();
|
||||
}).then(function () {
|
||||
return _this2.instance.unfreeze();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -2466,7 +2509,7 @@ var ColumnManager = function () {
|
||||
}, {
|
||||
key: 'sortRows',
|
||||
value: function sortRows(colIndex, sortOrder) {
|
||||
this.datamanager.sortRows(colIndex, sortOrder);
|
||||
return this.datamanager.sortRows(colIndex, sortOrder);
|
||||
}
|
||||
}, {
|
||||
key: 'getColumn',
|
||||
@ -2660,7 +2703,7 @@ exports = module.exports = __webpack_require__(12)(undefined);
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, "/* variables */\n.data-table {\n --border-color: #d1d8dd;\n --primary-color: #5292f7;\n --light-bg: #f5f7fa; }\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\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 cursor: col-resize; }\n .data-table-header .content span {\n cursor: pointer; }\n .data-table-header .sort-indicator {\n position: absolute;\n right: 8px;\n top: 9px; }\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\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\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\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\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
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -591,11 +591,13 @@ 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>' : '';
|
||||
|
||||
return `
|
||||
<div class="content ellipsis">
|
||||
${column.format ? column.format(column.content) : column.content}
|
||||
${sortIndicator}
|
||||
${resizeColumn}
|
||||
</div>
|
||||
${editCellHTML}
|
||||
`;
|
||||
|
||||
@ -34,7 +34,8 @@ export default class ColumnManager {
|
||||
let isDragging = false;
|
||||
let $currCell, startWidth, startX;
|
||||
|
||||
$.on(this.header, 'mousedown', '.data-table-col', (e, $cell) => {
|
||||
$.on(this.header, 'mousedown', '.data-table-col .column-resizer', (e, $handle) => {
|
||||
const $cell = $handle.parentNode.parentNode;
|
||||
$currCell = $cell;
|
||||
const { colIndex } = $.data($currCell);
|
||||
const col = this.getColumn(colIndex);
|
||||
@ -76,7 +77,7 @@ export default class ColumnManager {
|
||||
|
||||
bindSortColumn() {
|
||||
|
||||
$.on(this.header, 'click', '.data-table-col .content span', (e, span) => {
|
||||
$.on(this.header, 'click', '.data-table-col .content span:first-child', (e, span) => {
|
||||
const $cell = span.closest('.data-table-col');
|
||||
let { colIndex, sortOrder } = $.data($cell);
|
||||
sortOrder = getDefault(sortOrder, 'none');
|
||||
@ -114,8 +115,10 @@ export default class ColumnManager {
|
||||
if (this.events && this.events.onSort) {
|
||||
this.events.onSort(colIndex, nextSortOrder);
|
||||
} else {
|
||||
this.sortRows(colIndex, nextSortOrder);
|
||||
this.rowmanager.refreshRows();
|
||||
this.instance.freeze();
|
||||
this.sortRows(colIndex, nextSortOrder)
|
||||
.then(() => this.rowmanager.refreshRows())
|
||||
.then(() => this.instance.unfreeze());
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -231,7 +234,7 @@ export default class ColumnManager {
|
||||
}
|
||||
|
||||
sortRows(colIndex, sortOrder) {
|
||||
this.datamanager.sortRows(colIndex, sortOrder);
|
||||
return this.datamanager.sortRows(colIndex, sortOrder);
|
||||
}
|
||||
|
||||
getColumn(colIndex) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { isNumeric } from './utils';
|
||||
import { isNumeric, promisify } from './utils';
|
||||
|
||||
export default class DataManager {
|
||||
constructor(options) {
|
||||
@ -7,6 +7,7 @@ export default class DataManager {
|
||||
sortBy: -1, // colIndex
|
||||
sortOrder: 'none' // asc, desc, none
|
||||
};
|
||||
this.sortRows = promisify(this.sortRows, this);
|
||||
}
|
||||
|
||||
init(data) {
|
||||
|
||||
@ -16,6 +16,7 @@ const DEFAULT_OPTIONS = {
|
||||
columns: [],
|
||||
rows: []
|
||||
},
|
||||
freezeMessage: 'Loading...',
|
||||
editing: null,
|
||||
addSerialNoColumn: true,
|
||||
addCheckboxColumn: true,
|
||||
@ -65,11 +66,10 @@ class DataTable {
|
||||
</table>
|
||||
<div class="body-scrollable">
|
||||
</div>
|
||||
<div class="data-table-footer">
|
||||
<div class="freeze-container">
|
||||
<span>${this.options.freezeMessage}</span>
|
||||
</div>
|
||||
<div class="data-table-borders">
|
||||
<div class="border-outline"></div>
|
||||
<div class="border-background"></div>
|
||||
<div class="data-table-footer">
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -77,6 +77,8 @@ class DataTable {
|
||||
this.datatableWrapper = $('.data-table', this.wrapper);
|
||||
this.header = $('.data-table-header', this.wrapper);
|
||||
this.bodyScrollable = $('.body-scrollable', this.wrapper);
|
||||
this.freezeContainer = $('.freeze-container', this.wrapper);
|
||||
this.unfreeze();
|
||||
}
|
||||
|
||||
refresh(data) {
|
||||
@ -240,6 +242,18 @@ class DataTable {
|
||||
this.datatableWrapper.scrollLeft = 9999;
|
||||
}
|
||||
|
||||
freeze() {
|
||||
$.style(this.freezeContainer, {
|
||||
display: ''
|
||||
});
|
||||
}
|
||||
|
||||
unfreeze() {
|
||||
$.style(this.freezeContainer, {
|
||||
display: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
log() {
|
||||
if (this.options.enableLogs) {
|
||||
console.log.apply(console, arguments);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import $ from './dom';
|
||||
import { makeDataAttributeString } from './utils';
|
||||
import { makeDataAttributeString, promisify } from './utils';
|
||||
import { getCellHTML } from './cellmanager';
|
||||
|
||||
export default class RowManager {
|
||||
@ -10,6 +10,7 @@ export default class RowManager {
|
||||
this.bodyScrollable = this.instance.bodyScrollable;
|
||||
|
||||
this.bindEvents();
|
||||
this.refreshRows = promisify(this.refreshRows, this);
|
||||
}
|
||||
|
||||
get datamanager() {
|
||||
|
||||
@ -42,6 +42,26 @@ button, input {
|
||||
thead td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
.freeze-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: var(--light-bg);
|
||||
opacity: 0.5;
|
||||
font-size: 2em;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-scrollable {
|
||||
@ -60,9 +80,8 @@ button, input {
|
||||
left: 0;
|
||||
background-color: white;
|
||||
font-weight: bold;
|
||||
cursor: col-resize;
|
||||
|
||||
.content span {
|
||||
.content span:not(.column-resizer) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -71,6 +90,17 @@ button, input {
|
||||
right: 8px;
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.column-resizer {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--primary-color);
|
||||
cursor: col-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-col {
|
||||
@ -121,6 +151,10 @@ button, input {
|
||||
&.highlight {
|
||||
background-color: var(--light-bg);
|
||||
}
|
||||
|
||||
&:hover .column-resizer {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-row {
|
||||
|
||||
11
src/utils.js
11
src/utils.js
@ -182,3 +182,14 @@ export function throttle(func, wait, options) {
|
||||
return result;
|
||||
};
|
||||
};
|
||||
|
||||
export function promisify(fn, context = null) {
|
||||
return (...args) => {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
fn.apply(context, args);
|
||||
resolve('done', fn.name);
|
||||
}, 0);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user