Merge pull request #11 from frappe/rmehta-minor-fixes
Rmehta minor fixes
This commit is contained in:
Faris Ansari
GitHub
commit
f98a83d418
21
index.html
21
index.html
File diff suppressed because one or more lines are too long
@ -621,6 +621,10 @@ var RowManager = function () {
|
||||
}, {
|
||||
key: 'getCheckedRows',
|
||||
value: function getCheckedRows() {
|
||||
if (!this.checkMap) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.checkMap.map(function (c, rowIndex) {
|
||||
if (c) {
|
||||
return rowIndex;
|
||||
@ -873,11 +877,6 @@ var CellManager = function () {
|
||||
_this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
// $.on(document.body, 'click', e => {
|
||||
// if (e.target.matches('.edit-cell, .edit-cell *')) return;
|
||||
// this.deactivateEditing();
|
||||
// });
|
||||
}
|
||||
}, {
|
||||
key: 'bindKeyboardNav',
|
||||
@ -943,6 +942,8 @@ var CellManager = function () {
|
||||
});
|
||||
|
||||
_keyboard2.default.on('esc', function () {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
_this2.$editingCell.focus();
|
||||
_this2.deactivateEditing();
|
||||
});
|
||||
}
|
||||
@ -1052,7 +1053,7 @@ var CellManager = function () {
|
||||
colIndex = _$$data3.colIndex,
|
||||
rowIndex = _$$data3.rowIndex;
|
||||
|
||||
var _colIndex = this.columnmanager.getSerialColumnIndex();
|
||||
var _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
|
||||
var colHeaderSelector = '.data-table-header .data-table-col[data-col-index="' + colIndex + '"]';
|
||||
var rowHeaderSelector = '.data-table-col[data-row-index="' + rowIndex + '"][data-col-index="' + _colIndex + '"]';
|
||||
|
||||
@ -1252,7 +1253,7 @@ var CellManager = function () {
|
||||
if (editing) {
|
||||
this.currentCellEditing = editing;
|
||||
// initialize editing input with cell value
|
||||
editing.initValue(cell.content);
|
||||
editing.initValue(cell.content, rowIndex, col);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
@ -1300,12 +1301,14 @@ var CellManager = function () {
|
||||
rowIndex = _$$data8.rowIndex,
|
||||
colIndex = _$$data8.colIndex;
|
||||
|
||||
var col = this.datamanager.getColumn(colIndex);
|
||||
|
||||
if ($cell) {
|
||||
var editing = this.currentCellEditing;
|
||||
|
||||
if (editing) {
|
||||
var value = editing.getValue();
|
||||
var done = editing.setValue(value);
|
||||
var done = editing.setValue(value, rowIndex, col);
|
||||
var oldValue = this.getCell(colIndex, rowIndex).content;
|
||||
|
||||
// update cell immediately
|
||||
@ -1508,7 +1511,7 @@ function getCellContent(column) {
|
||||
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 ' + sortIndicator + '\n ' + resizeColumn + '\n ' + dropdown + '\n </div>\n ' + editCellHTML + '\n ';
|
||||
return '\n <div class="content ellipsis">\n ' + (!column.isHeader && column.format ? column.format(column.content) : column.content) + '\n ' + sortIndicator + '\n ' + resizeColumn + '\n ' + dropdown + '\n </div>\n ' + editCellHTML + '\n ';
|
||||
}
|
||||
|
||||
function getEditCellHTML() {
|
||||
@ -1942,6 +1945,7 @@ var ColumnManager = function () {
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
}
|
||||
}, {
|
||||
key: 'setHeaderStyle',
|
||||
@ -2044,10 +2048,21 @@ var ColumnManager = function () {
|
||||
}
|
||||
}, {
|
||||
key: 'setDefaultCellHeight',
|
||||
value: function setDefaultCellHeight(height) {
|
||||
value: function setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
var height = _dom2.default.style((0, _dom2.default)('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}, {
|
||||
key: 'setCellHeight',
|
||||
value: function setCellHeight(height) {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.style.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'setColumnStyle',
|
||||
@ -2300,7 +2315,7 @@ var DataTable = function () {
|
||||
_keyboard2.default.init(this.wrapper);
|
||||
|
||||
if (this.options.data) {
|
||||
this.refresh(this.options.data);
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
@ -2325,6 +2340,7 @@ var DataTable = function () {
|
||||
value: function refresh(data) {
|
||||
this.datamanager.init(data);
|
||||
this.render();
|
||||
this.setDimensions();
|
||||
}
|
||||
}, {
|
||||
key: 'destroy',
|
||||
@ -2526,17 +2542,14 @@ var DataManager = function () {
|
||||
data = this.options.data;
|
||||
}
|
||||
|
||||
var _data = data,
|
||||
columns = _data.columns,
|
||||
rows = _data.rows;
|
||||
|
||||
this.data = data;
|
||||
|
||||
this.rowCount = 0;
|
||||
this.columns = [];
|
||||
this.rows = [];
|
||||
|
||||
this.columns = this.prepareColumns(columns);
|
||||
this.rows = this.prepareRows(rows);
|
||||
this.prepareColumns();
|
||||
this.prepareRows();
|
||||
|
||||
this.prepareNumericColumns();
|
||||
}
|
||||
@ -2545,12 +2558,14 @@ var DataManager = function () {
|
||||
|
||||
}, {
|
||||
key: 'prepareColumns',
|
||||
value: function prepareColumns(columns) {
|
||||
value: function prepareColumns() {
|
||||
var columns = this.options.columns;
|
||||
this.validateColumns(columns);
|
||||
|
||||
if (this.options.addSerialNoColumn && !this.hasColumn('Sr. No')) {
|
||||
if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
|
||||
var val = {
|
||||
content: 'Sr. No',
|
||||
id: '_rowIndex',
|
||||
content: '',
|
||||
align: 'center',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
@ -2561,28 +2576,27 @@ var DataManager = function () {
|
||||
columns = [val].concat(columns);
|
||||
}
|
||||
|
||||
if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
|
||||
if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
|
||||
var _val = {
|
||||
content: 'Checkbox',
|
||||
id: '_checkbox',
|
||||
content: this.getCheckboxHTML(),
|
||||
editable: false,
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
focusable: false,
|
||||
dropdown: false,
|
||||
format: function format(val) {
|
||||
return '<input type="checkbox" />';
|
||||
}
|
||||
dropdown: false
|
||||
};
|
||||
|
||||
columns = [_val].concat(columns);
|
||||
}
|
||||
|
||||
return _prepareColumns(columns);
|
||||
this.columns = _prepareColumns(columns);
|
||||
}
|
||||
}, {
|
||||
key: 'prepareNumericColumns',
|
||||
value: function prepareNumericColumns() {
|
||||
var row0 = this.getRow(0);
|
||||
if (!row0) return;
|
||||
this.columns = this.columns.map(function (column, i) {
|
||||
|
||||
var cellValue = row0[i].content;
|
||||
@ -2595,32 +2609,61 @@ var DataManager = function () {
|
||||
}
|
||||
}, {
|
||||
key: 'prepareRows',
|
||||
value: function prepareRows(rows) {
|
||||
value: function prepareRows() {
|
||||
var _this = this;
|
||||
|
||||
this.validateRows(rows);
|
||||
this.validateData(this.data);
|
||||
|
||||
rows = rows.map(function (row, i) {
|
||||
this.rows = this.data.map(function (d, i) {
|
||||
var index = _this._getNextRowCount();
|
||||
|
||||
if (row.length < _this.columns.length) {
|
||||
if (_this.hasColumn('Sr. No')) {
|
||||
var val = index + 1 + '';
|
||||
var row = [];
|
||||
|
||||
row = [val].concat(row);
|
||||
if (Array.isArray(d)) {
|
||||
// row is an array
|
||||
if (_this.options.addCheckboxColumn) {
|
||||
row.push(_this.getCheckboxHTML());
|
||||
}
|
||||
if (_this.options.addSerialNoColumn) {
|
||||
row.push(index + 1 + '');
|
||||
}
|
||||
row = row.concat(d);
|
||||
} else {
|
||||
// row is a dict
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
if (_this.hasColumn('Checkbox')) {
|
||||
var _val2 = '<input type="checkbox" />';
|
||||
try {
|
||||
for (var _iterator = _this.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var col = _step.value;
|
||||
|
||||
row = [_val2].concat(row);
|
||||
if (col.id === '_checkbox') {
|
||||
row.push(_this.getCheckboxHTML());
|
||||
} else if (col.id === '_rowIndex') {
|
||||
row.push(index + 1 + '');
|
||||
} else {
|
||||
row.push(col.format(d[col.id]));
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator.return) {
|
||||
_iterator.return();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return prepareRow(row, index);
|
||||
});
|
||||
|
||||
return rows;
|
||||
}
|
||||
}, {
|
||||
key: 'validateColumns',
|
||||
@ -2636,28 +2679,17 @@ var DataManager = function () {
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'validateRows',
|
||||
value: function validateRows(rows) {
|
||||
var _this2 = this;
|
||||
|
||||
if (!Array.isArray(rows)) {
|
||||
throw new DataError('`rows` must be an array');
|
||||
key: 'validateData',
|
||||
value: function validateData(data) {
|
||||
if (Array.isArray(data) && (Array.isArray(data[0]) || _typeof(data[0]) === 'object')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
rows.forEach(function (row, i) {
|
||||
if (!Array.isArray(row)) {
|
||||
throw new DataError('`row` must be an array');
|
||||
}
|
||||
|
||||
if (row.length !== _this2.getColumnCount(true)) {
|
||||
throw new DataError('Row index "' + i + '" doesn\'t match column length');
|
||||
}
|
||||
});
|
||||
throw new DataError('`data` must be an array of arrays or objects');
|
||||
}
|
||||
}, {
|
||||
key: 'appendRows',
|
||||
value: function appendRows(rows) {
|
||||
this.validateRows(rows);
|
||||
this.validateData(rows);
|
||||
|
||||
this.rows = this.rows.concat(this.prepareRows(rows));
|
||||
}
|
||||
@ -2712,9 +2744,9 @@ var DataManager = function () {
|
||||
return 0;
|
||||
});
|
||||
|
||||
if (this.hasColumn('Sr. No')) {
|
||||
// update Sr. No indexes
|
||||
var srNoColIndex = this.getColumnIndex('Sr. No');
|
||||
if (this.hasColumnById('_rowIndex')) {
|
||||
// update row index
|
||||
var srNoColIndex = this.getColumnIndexById('_rowIndex');
|
||||
this.rows = this.rows.map(function (row, index) {
|
||||
return row.map(function (cell) {
|
||||
if (cell.colIndex === srNoColIndex) {
|
||||
@ -2790,16 +2822,16 @@ var DataManager = function () {
|
||||
key: 'updateRow',
|
||||
value: function updateRow(row, rowIndex) {
|
||||
if (row.length < this.columns.length) {
|
||||
if (this.hasColumn('Sr. No')) {
|
||||
if (this.hasColumnById('_rowIndex')) {
|
||||
var val = rowIndex + 1 + '';
|
||||
|
||||
row = [val].concat(row);
|
||||
}
|
||||
|
||||
if (this.hasColumn('Checkbox')) {
|
||||
var _val3 = '<input type="checkbox" />';
|
||||
if (this.hasColumnById('_checkbox')) {
|
||||
var _val2 = '<input type="checkbox" />';
|
||||
|
||||
row = [_val3].concat(row);
|
||||
row = [_val2].concat(row);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2813,7 +2845,7 @@ var DataManager = function () {
|
||||
}
|
||||
}, {
|
||||
key: 'updateCell',
|
||||
value: function updateCell(colIndex, rowIndex, keyValPairs) {
|
||||
value: function updateCell(colIndex, rowIndex, options) {
|
||||
var cell = void 0;
|
||||
if ((typeof colIndex === 'undefined' ? 'undefined' : _typeof(colIndex)) === 'object') {
|
||||
// cell object was passed,
|
||||
@ -2822,17 +2854,24 @@ var DataManager = function () {
|
||||
colIndex = cell.colIndex;
|
||||
rowIndex = cell.rowIndex;
|
||||
// the object passed must be merged with original cell
|
||||
keyValPairs = cell;
|
||||
options = cell;
|
||||
}
|
||||
cell = this.getCell(colIndex, rowIndex);
|
||||
|
||||
// mutate object directly
|
||||
for (var key in keyValPairs) {
|
||||
var newVal = keyValPairs[key];
|
||||
for (var key in options) {
|
||||
var newVal = options[key];
|
||||
if (newVal !== undefined) {
|
||||
cell[key] = newVal;
|
||||
}
|
||||
}
|
||||
|
||||
// update model
|
||||
if (!Array.isArray(this.data[rowIndex])) {
|
||||
var col = this.getColumn(colIndex);
|
||||
this.data[rowIndex][col.id] = options.content;
|
||||
}
|
||||
|
||||
return cell;
|
||||
}
|
||||
}, {
|
||||
@ -2940,6 +2979,13 @@ var DataManager = function () {
|
||||
return col.content === name;
|
||||
}));
|
||||
}
|
||||
}, {
|
||||
key: 'hasColumnById',
|
||||
value: function hasColumnById(id) {
|
||||
return Boolean(this.columns.find(function (col) {
|
||||
return col.id === id;
|
||||
}));
|
||||
}
|
||||
}, {
|
||||
key: 'getColumnIndex',
|
||||
value: function getColumnIndex(name) {
|
||||
@ -2947,6 +2993,18 @@ var DataManager = function () {
|
||||
return col.content === name;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'getColumnIndexById',
|
||||
value: function getColumnIndexById(id) {
|
||||
return this.columns.findIndex(function (col) {
|
||||
return col.id === id;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'getCheckboxHTML',
|
||||
value: function getCheckboxHTML() {
|
||||
return '<input type="checkbox" />';
|
||||
}
|
||||
}, {
|
||||
key: 'currentSort',
|
||||
get: function get() {
|
||||
@ -2987,12 +3045,15 @@ function _prepareColumns(columns) {
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: function format(value) {
|
||||
return '<span class="column-title">' + value + '</span>';
|
||||
return value + '';
|
||||
}
|
||||
};
|
||||
|
||||
return columns.map(prepareCell).map(function (col) {
|
||||
return Object.assign({}, baseColumn, col);
|
||||
}).map(function (col) {
|
||||
col.id = col.id || col.content;
|
||||
return col;
|
||||
});
|
||||
}
|
||||
|
||||
@ -3098,6 +3159,7 @@ var BodyRenderer = function () {
|
||||
var rows = this.datamanager.getRows();
|
||||
|
||||
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML(rows) + '\n </table>\n ';
|
||||
this.instance.setDimensions();
|
||||
}
|
||||
}, {
|
||||
key: 'renderBodyWithClusterize',
|
||||
@ -3250,10 +3312,8 @@ Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = {
|
||||
data: {
|
||||
columns: [],
|
||||
rows: []
|
||||
},
|
||||
columns: [],
|
||||
data: [],
|
||||
dropdownButton: '▼',
|
||||
headerDropdown: [{
|
||||
label: 'Sort Ascending',
|
||||
@ -3289,7 +3349,7 @@ exports.default = {
|
||||
freezeMessage: 'Loading...',
|
||||
editing: function editing() {},
|
||||
addSerialNoColumn: true,
|
||||
addCheckboxColumn: true,
|
||||
addCheckboxColumn: false,
|
||||
enableClusterize: true,
|
||||
enableLogs: false,
|
||||
takeAvailableSpace: false,
|
||||
@ -3332,12 +3392,12 @@ if(false) {
|
||||
/* 15 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(16)(undefined);
|
||||
exports = module.exports = __webpack_require__(16)(false);
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, "/* variables */\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 #d1d8dd; }\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: #f5f7fa;\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 #d1d8dd; }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: #f5f7fa; }\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 .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 4px;\n height: 100%;\n background-color: #5292f7;\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: #f5f7fa; }\n .data-table-header .data-table-col.remove-column {\n background-color: #FD8B8B;\n transition: 300ms background-color ease-in-out; }\n .data-table-header .data-table-col.sortable-chosen {\n background-color: #f5f7fa; }\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 #5292f7; }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid #5292f7;\n display: block; }\n .data-table-col.highlight {\n background-color: #f5f7fa; }\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: #f5f7fa; }\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\nbody.data-table-resize {\n cursor: col-resize; }\n", ""]);
|
||||
exports.push([module.i, "/* variables */\n/* resets */\n*, *::after, *::before {\n box-sizing: border-box; }\n\n.data-table button, .data-table input {\n overflow: visible;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n padding: 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 #d1d8dd; }\n .data-table thead td {\n border-bottom-width: 1px; }\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: #f5f7fa;\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 #d1d8dd; }\n .body-scrollable.row-highlight-all .data-table-row:not(.row-unhighlight) {\n background-color: #f5f7fa; }\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 .column-resizer {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n width: 0.25rem;\n height: 100%;\n background-color: #5292f7;\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: 0.5rem 1rem; }\n .data-table-header .data-table-dropdown-list > div:hover {\n background-color: #f5f7fa; }\n .data-table-header .data-table-col.remove-column {\n background-color: #FD8B8B;\n transition: 300ms background-color ease-in-out; }\n .data-table-header .data-table-col.sortable-chosen {\n background-color: #f5f7fa; }\n\n.data-table-col {\n position: relative; }\n .data-table-col .content {\n padding: 0.25rem;\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: 0.25rem;\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 .data-table-col.selected .content {\n border: 2px solid #5292f7; }\n .data-table-col.editing .content {\n display: none; }\n .data-table-col.editing .edit-cell {\n border: 2px solid #FD8B8B;\n display: block; }\n .data-table-col.highlight {\n background-color: #f5f7fa; }\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: #f5f7fa; }\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\nbody.data-table-resize {\n cursor: col-resize; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -31,6 +31,7 @@ export default class BodyRenderer {
|
||||
${getBodyHTML(rows)}
|
||||
</table>
|
||||
`;
|
||||
this.instance.setDimensions();
|
||||
}
|
||||
|
||||
renderBodyWithClusterize() {
|
||||
|
||||
@ -50,11 +50,6 @@ export default class CellManager {
|
||||
this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
// $.on(document.body, 'click', e => {
|
||||
// if (e.target.matches('.edit-cell, .edit-cell *')) return;
|
||||
// this.deactivateEditing();
|
||||
// });
|
||||
}
|
||||
|
||||
bindKeyboardNav() {
|
||||
@ -110,6 +105,8 @@ export default class CellManager {
|
||||
);
|
||||
|
||||
keyboard.on('esc', () => {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
this.$editingCell.focus();
|
||||
this.deactivateEditing();
|
||||
});
|
||||
}
|
||||
@ -197,7 +194,7 @@ export default class CellManager {
|
||||
|
||||
highlightRowColumnHeader($cell) {
|
||||
const { colIndex, rowIndex } = $.data($cell);
|
||||
const _colIndex = this.columnmanager.getSerialColumnIndex();
|
||||
const _colIndex = this.datamanager.getColumnIndexById('_rowIndex');
|
||||
const colHeaderSelector = `.data-table-header .data-table-col[data-col-index="${colIndex}"]`;
|
||||
const rowHeaderSelector = `.data-table-col[data-row-index="${rowIndex}"][data-col-index="${_colIndex}"]`;
|
||||
|
||||
@ -360,7 +357,7 @@ export default class CellManager {
|
||||
if (editing) {
|
||||
this.currentCellEditing = editing;
|
||||
// initialize editing input with cell value
|
||||
editing.initValue(cell.content);
|
||||
editing.initValue(cell.content, rowIndex, col);
|
||||
}
|
||||
}
|
||||
|
||||
@ -399,13 +396,14 @@ export default class CellManager {
|
||||
if (!this.$editingCell) return;
|
||||
const $cell = this.$editingCell;
|
||||
const { rowIndex, colIndex } = $.data($cell);
|
||||
const col = this.datamanager.getColumn(colIndex);
|
||||
|
||||
if ($cell) {
|
||||
const editing = this.currentCellEditing;
|
||||
|
||||
if (editing) {
|
||||
const value = editing.getValue();
|
||||
const done = editing.setValue(value);
|
||||
const done = editing.setValue(value, rowIndex, col);
|
||||
const oldValue = this.getCell(colIndex, rowIndex).content;
|
||||
|
||||
// update cell immediately
|
||||
@ -573,7 +571,7 @@ export function getCellContent(column) {
|
||||
|
||||
return `
|
||||
<div class="content ellipsis">
|
||||
${column.format ? column.format(column.content) : column.content}
|
||||
${(!column.isHeader && column.format) ? column.format(column.content) : column.content}
|
||||
${sortIndicator}
|
||||
${resizeColumn}
|
||||
${dropdown}
|
||||
|
||||
@ -268,6 +268,7 @@ export default class ColumnManager {
|
||||
this.setupNaturalColumnWidth();
|
||||
this.distributeRemainingWidth();
|
||||
this.setColumnStyle();
|
||||
this.setDefaultCellHeight();
|
||||
}
|
||||
|
||||
setHeaderStyle() {
|
||||
@ -353,10 +354,20 @@ export default class ColumnManager {
|
||||
});
|
||||
}
|
||||
|
||||
setDefaultCellHeight(height) {
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
this.style.setStyle('.data-table-col .content', {
|
||||
height: height + 'px'
|
||||
});
|
||||
this.style.setStyle('.data-table-col .edit-cell', {
|
||||
height: height + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
setColumnStyle() {
|
||||
@ -374,6 +385,7 @@ export default class ColumnManager {
|
||||
this.setColumnWidth(column.colIndex);
|
||||
});
|
||||
this.instance.setBodyWidth();
|
||||
|
||||
}
|
||||
|
||||
sortRows(colIndex, sortOrder) {
|
||||
|
||||
@ -13,14 +13,14 @@ export default class DataManager {
|
||||
data = this.options.data;
|
||||
}
|
||||
|
||||
let { columns, rows } = data;
|
||||
this.data = data;
|
||||
|
||||
this.rowCount = 0;
|
||||
this.columns = [];
|
||||
this.rows = [];
|
||||
|
||||
this.columns = this.prepareColumns(columns);
|
||||
this.rows = this.prepareRows(rows);
|
||||
this.prepareColumns();
|
||||
this.prepareRows();
|
||||
|
||||
this.prepareNumericColumns();
|
||||
}
|
||||
@ -34,12 +34,14 @@ export default class DataManager {
|
||||
};
|
||||
}
|
||||
|
||||
prepareColumns(columns) {
|
||||
prepareColumns() {
|
||||
let columns = this.options.columns;
|
||||
this.validateColumns(columns);
|
||||
|
||||
if (this.options.addSerialNoColumn && !this.hasColumn('Sr. No')) {
|
||||
if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
|
||||
let val = {
|
||||
content: 'Sr. No',
|
||||
id: '_rowIndex',
|
||||
content: '',
|
||||
align: 'center',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
@ -50,25 +52,26 @@ export default class DataManager {
|
||||
columns = [val].concat(columns);
|
||||
}
|
||||
|
||||
if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
|
||||
if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
|
||||
const val = {
|
||||
content: 'Checkbox',
|
||||
id: '_checkbox',
|
||||
content: this.getCheckboxHTML(),
|
||||
editable: false,
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
focusable: false,
|
||||
dropdown: false,
|
||||
format: val => '<input type="checkbox" />'
|
||||
dropdown: false
|
||||
};
|
||||
|
||||
columns = [val].concat(columns);
|
||||
}
|
||||
|
||||
return prepareColumns(columns);
|
||||
this.columns = prepareColumns(columns);
|
||||
}
|
||||
|
||||
prepareNumericColumns() {
|
||||
const row0 = this.getRow(0);
|
||||
if (!row0) return;
|
||||
this.columns = this.columns.map((column, i) => {
|
||||
|
||||
const cellValue = row0[i].content;
|
||||
@ -80,30 +83,39 @@ export default class DataManager {
|
||||
});
|
||||
}
|
||||
|
||||
prepareRows(rows) {
|
||||
this.validateRows(rows);
|
||||
prepareRows() {
|
||||
this.validateData(this.data);
|
||||
|
||||
rows = rows.map((row, i) => {
|
||||
this.rows = this.data.map((d, i) => {
|
||||
const index = this._getNextRowCount();
|
||||
|
||||
if (row.length < this.columns.length) {
|
||||
if (this.hasColumn('Sr. No')) {
|
||||
const val = (index + 1) + '';
|
||||
let row = [];
|
||||
|
||||
row = [val].concat(row);
|
||||
if (Array.isArray(d)) {
|
||||
// row is an array
|
||||
if (this.options.addCheckboxColumn) {
|
||||
row.push(this.getCheckboxHTML());
|
||||
}
|
||||
if (this.options.addSerialNoColumn) {
|
||||
row.push((index + 1) + '');
|
||||
}
|
||||
row = row.concat(d);
|
||||
|
||||
if (this.hasColumn('Checkbox')) {
|
||||
const val = '<input type="checkbox" />';
|
||||
|
||||
row = [val].concat(row);
|
||||
} else {
|
||||
// row is a dict
|
||||
for (let col of this.columns) {
|
||||
if (col.id === '_checkbox') {
|
||||
row.push(this.getCheckboxHTML());
|
||||
} else if (col.id === '_rowIndex') {
|
||||
row.push((index + 1) + '');
|
||||
} else {
|
||||
row.push(col.format(d[col.id]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return prepareRow(row, index);
|
||||
});
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
validateColumns(columns) {
|
||||
@ -118,24 +130,15 @@ export default class DataManager {
|
||||
});
|
||||
}
|
||||
|
||||
validateRows(rows) {
|
||||
if (!Array.isArray(rows)) {
|
||||
throw new DataError('`rows` must be an array');
|
||||
validateData(data) {
|
||||
if (Array.isArray(data) && (Array.isArray(data[0]) || typeof data[0] === 'object')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
rows.forEach((row, i) => {
|
||||
if (!Array.isArray(row)) {
|
||||
throw new DataError('`row` must be an array');
|
||||
}
|
||||
|
||||
if (row.length !== this.getColumnCount(true)) {
|
||||
throw new DataError(`Row index "${i}" doesn't match column length`);
|
||||
}
|
||||
});
|
||||
throw new DataError('`data` must be an array of arrays or objects');
|
||||
}
|
||||
|
||||
appendRows(rows) {
|
||||
this.validateRows(rows);
|
||||
this.validateData(rows);
|
||||
|
||||
this.rows = this.rows.concat(this.prepareRows(rows));
|
||||
}
|
||||
@ -190,9 +193,9 @@ export default class DataManager {
|
||||
return 0;
|
||||
});
|
||||
|
||||
if (this.hasColumn('Sr. No')) {
|
||||
// update Sr. No indexes
|
||||
const srNoColIndex = this.getColumnIndex('Sr. No');
|
||||
if (this.hasColumnById('_rowIndex')) {
|
||||
// update row index
|
||||
const srNoColIndex = this.getColumnIndexById('_rowIndex');
|
||||
this.rows = this.rows.map((row, index) => {
|
||||
return row.map(cell => {
|
||||
if (cell.colIndex === srNoColIndex) {
|
||||
@ -264,13 +267,13 @@ export default class DataManager {
|
||||
|
||||
updateRow(row, rowIndex) {
|
||||
if (row.length < this.columns.length) {
|
||||
if (this.hasColumn('Sr. No')) {
|
||||
if (this.hasColumnById('_rowIndex')) {
|
||||
const val = (rowIndex + 1) + '';
|
||||
|
||||
row = [val].concat(row);
|
||||
}
|
||||
|
||||
if (this.hasColumn('Checkbox')) {
|
||||
if (this.hasColumnById('_checkbox')) {
|
||||
const val = '<input type="checkbox" />';
|
||||
|
||||
row = [val].concat(row);
|
||||
@ -284,7 +287,7 @@ export default class DataManager {
|
||||
return _row;
|
||||
}
|
||||
|
||||
updateCell(colIndex, rowIndex, keyValPairs) {
|
||||
updateCell(colIndex, rowIndex, options) {
|
||||
let cell;
|
||||
if (typeof colIndex === 'object') {
|
||||
// cell object was passed,
|
||||
@ -293,17 +296,24 @@ export default class DataManager {
|
||||
colIndex = cell.colIndex;
|
||||
rowIndex = cell.rowIndex;
|
||||
// the object passed must be merged with original cell
|
||||
keyValPairs = cell;
|
||||
options = cell;
|
||||
}
|
||||
cell = this.getCell(colIndex, rowIndex);
|
||||
|
||||
// mutate object directly
|
||||
for (let key in keyValPairs) {
|
||||
const newVal = keyValPairs[key];
|
||||
for (let key in options) {
|
||||
const newVal = options[key];
|
||||
if (newVal !== undefined) {
|
||||
cell[key] = newVal;
|
||||
}
|
||||
}
|
||||
|
||||
// update model
|
||||
if (!Array.isArray(this.data[rowIndex])) {
|
||||
const col = this.getColumn(colIndex);
|
||||
this.data[rowIndex][col.id] = options.content;
|
||||
}
|
||||
|
||||
return cell;
|
||||
}
|
||||
|
||||
@ -392,9 +402,21 @@ export default class DataManager {
|
||||
return Boolean(this.columns.find(col => col.content === name));
|
||||
}
|
||||
|
||||
hasColumnById(id) {
|
||||
return Boolean(this.columns.find(col => col.id === id));
|
||||
}
|
||||
|
||||
getColumnIndex(name) {
|
||||
return this.columns.findIndex(col => col.content === name);
|
||||
}
|
||||
|
||||
getColumnIndexById(id) {
|
||||
return this.columns.findIndex(col => col.id === id);
|
||||
}
|
||||
|
||||
getCheckboxHTML() {
|
||||
return '<input type="checkbox" />';
|
||||
}
|
||||
}
|
||||
|
||||
function prepareRow(row, i) {
|
||||
@ -415,12 +437,16 @@ function prepareColumns(columns, props = {}) {
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: value => `<span class="column-title">${value}</span>`
|
||||
format: value => value + ''
|
||||
};
|
||||
|
||||
return columns
|
||||
.map(prepareCell)
|
||||
.map(col => Object.assign({}, baseColumn, col));
|
||||
.map(col => Object.assign({}, baseColumn, col))
|
||||
.map(col => {
|
||||
col.id = col.id || col.content;
|
||||
return col;
|
||||
});
|
||||
}
|
||||
|
||||
function prepareCell(col, i) {
|
||||
|
||||
@ -44,7 +44,7 @@ class DataTable {
|
||||
keyboard.init(this.wrapper);
|
||||
|
||||
if (this.options.data) {
|
||||
this.refresh(this.options.data);
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,6 +77,7 @@ class DataTable {
|
||||
refresh(data) {
|
||||
this.datamanager.init(data);
|
||||
this.render();
|
||||
this.setDimensions();
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
export default {
|
||||
data: {
|
||||
columns: [],
|
||||
rows: []
|
||||
},
|
||||
columns: [],
|
||||
data: [],
|
||||
dropdownButton: '▼',
|
||||
headerDropdown: [
|
||||
{
|
||||
@ -43,7 +41,7 @@ export default {
|
||||
freezeMessage: 'Loading...',
|
||||
editing: () => {},
|
||||
addSerialNoColumn: true,
|
||||
addCheckboxColumn: true,
|
||||
addCheckboxColumn: false,
|
||||
enableClusterize: true,
|
||||
enableLogs: false,
|
||||
takeAvailableSpace: false,
|
||||
|
||||
@ -58,6 +58,10 @@ export default class RowManager {
|
||||
}
|
||||
|
||||
getCheckedRows() {
|
||||
if (!this.checkMap) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return this.checkMap
|
||||
.map((c, rowIndex) => {
|
||||
if (c) {
|
||||
|
||||
@ -5,17 +5,22 @@ $primary-color: rgb(82, 146, 247);
|
||||
$light-bg: #f5f7fa;
|
||||
$light-red: #FD8B8B;
|
||||
|
||||
$spacer-1: 0.25rem;
|
||||
$spacer-2: 0.5rem;
|
||||
$spacer-3: 1rem;
|
||||
|
||||
/* resets */
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button, input {
|
||||
.data-table button, .data-table input {
|
||||
overflow: visible;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* styling */
|
||||
@ -39,7 +44,7 @@ button, input {
|
||||
}
|
||||
|
||||
thead td {
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.freeze-container {
|
||||
@ -99,7 +104,7 @@ button, input {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
width: $spacer-1;
|
||||
height: 100%;
|
||||
background-color: $primary-color;
|
||||
cursor: col-resize;
|
||||
@ -141,11 +146,11 @@ button, input {
|
||||
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;
|
||||
padding-bottom: $spacer-2;
|
||||
padding-top: $spacer-2;
|
||||
|
||||
&> div {
|
||||
padding: 5px 10px;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
|
||||
&:hover {
|
||||
background-color: $light-bg;
|
||||
@ -167,7 +172,7 @@ button, input {
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
padding: 8px;
|
||||
padding: $spacer-1;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&.ellipsis {
|
||||
@ -180,7 +185,7 @@ button, input {
|
||||
.edit-cell {
|
||||
display: none;
|
||||
// position: absolute;
|
||||
padding: 8px;
|
||||
padding: $spacer-1;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
@ -189,7 +194,6 @@ button, input {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,7 +207,7 @@ button, input {
|
||||
}
|
||||
|
||||
.edit-cell {
|
||||
border: 2px solid $primary-color;
|
||||
border: 2px solid $light-red;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,13 +50,6 @@ describe.only('DataManager instance', () => {
|
||||
})).to.throw(DataError, '`rows` must be an array');
|
||||
});
|
||||
|
||||
it('should throw when any of the row is not an Array', () => {
|
||||
expect(() => datamanager.init({
|
||||
columns: ['Name'],
|
||||
rows: [2]
|
||||
})).to.throw(DataError, '`row` must be an array');
|
||||
});
|
||||
|
||||
it('should throw when any of the row\'s length doesn\'t match column length', () => {
|
||||
expect(() => datamanager.init({
|
||||
columns: ['Name'],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user