Rmehta cell refactor (#13)
* refactor: prepare cells * checkbox sequence and always focus before deactivate * don't set model * fixes * minor
This commit is contained in:
Faris Ansari
GitHub
parent
f98a83d418
commit
0ebe0461e1
@ -783,10 +783,10 @@ var RowManager = function () {
|
||||
}();
|
||||
|
||||
exports.default = RowManager;
|
||||
function getRowHTML(columns, props) {
|
||||
function getRowHTML(row, props) {
|
||||
var dataAttr = (0, _utils.makeDataAttributeString)(props);
|
||||
|
||||
return '\n <tr class="data-table-row" ' + dataAttr + '>\n ' + columns.map(_cellmanager.getCellHTML).join('') + '\n </tr>\n ';
|
||||
return '\n <tr class="data-table-row" ' + dataAttr + '>\n ' + row.map(_cellmanager.getCellHTML).join('') + '\n </tr>\n ';
|
||||
}
|
||||
|
||||
/***/ }),
|
||||
@ -884,6 +884,7 @@ var CellManager = function () {
|
||||
var _this2 = this;
|
||||
|
||||
var focusCell = function focusCell(direction) {
|
||||
console.log(direction);
|
||||
if (!_this2.$focusedCell || _this2.$editingCell) {
|
||||
return false;
|
||||
}
|
||||
@ -892,7 +893,7 @@ var CellManager = function () {
|
||||
|
||||
if (direction === 'left') {
|
||||
$cell = _this2.getLeftCell$($cell);
|
||||
} else if (direction === 'right') {
|
||||
} else if (direction === 'right' || direction === 'tab') {
|
||||
$cell = _this2.getRightCell$($cell);
|
||||
} else if (direction === 'up') {
|
||||
$cell = _this2.getAboveCell$($cell);
|
||||
@ -929,7 +930,7 @@ var CellManager = function () {
|
||||
return true;
|
||||
};
|
||||
|
||||
['left', 'right', 'up', 'down'].map(function (direction) {
|
||||
['left', 'right', 'up', 'down', 'tab'].map(function (direction) {
|
||||
return _keyboard2.default.on(direction, function () {
|
||||
return focusCell(direction);
|
||||
});
|
||||
@ -942,8 +943,6 @@ var CellManager = function () {
|
||||
});
|
||||
|
||||
_keyboard2.default.on('esc', function () {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
_this2.$editingCell.focus();
|
||||
_this2.deactivateEditing();
|
||||
});
|
||||
}
|
||||
@ -1259,6 +1258,9 @@ var CellManager = function () {
|
||||
}, {
|
||||
key: 'deactivateEditing',
|
||||
value: function deactivateEditing() {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
if (this.$focusedCell) this.$focusedCell.focus();
|
||||
|
||||
if (!this.$editingCell) return;
|
||||
this.$editingCell.classList.remove('editing');
|
||||
this.$editingCell = null;
|
||||
@ -1481,10 +1483,10 @@ var CellManager = function () {
|
||||
}();
|
||||
|
||||
exports.default = CellManager;
|
||||
function getCellHTML(column) {
|
||||
var rowIndex = column.rowIndex,
|
||||
colIndex = column.colIndex,
|
||||
isHeader = column.isHeader;
|
||||
function getCellHTML(cell) {
|
||||
var rowIndex = cell.rowIndex,
|
||||
colIndex = cell.colIndex,
|
||||
isHeader = cell.isHeader;
|
||||
|
||||
var dataAttr = (0, _utils.makeDataAttributeString)({
|
||||
rowIndex: rowIndex,
|
||||
@ -1492,26 +1494,28 @@ function getCellHTML(column) {
|
||||
isHeader: isHeader
|
||||
});
|
||||
|
||||
return '\n <td class="data-table-col noselect" ' + dataAttr + ' tabindex="0">\n ' + getCellContent(column) + '\n </td>\n ';
|
||||
return '\n <td class="data-table-col noselect" ' + dataAttr + ' tabindex="0">\n ' + getCellContent(cell) + '\n </td>\n ';
|
||||
}
|
||||
|
||||
function getCellContent(column) {
|
||||
var isHeader = column.isHeader;
|
||||
function getCellContent(cell) {
|
||||
var isHeader = cell.isHeader;
|
||||
|
||||
|
||||
var editable = !isHeader && column.editable !== false;
|
||||
var editable = !isHeader && cell.editable !== false;
|
||||
var editCellHTML = editable ? getEditCellHTML() : '';
|
||||
|
||||
var sortable = isHeader && column.sortable !== false;
|
||||
var sortable = isHeader && cell.sortable !== false;
|
||||
var sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
|
||||
|
||||
var resizable = isHeader && column.resizable !== false;
|
||||
var resizable = isHeader && cell.resizable !== false;
|
||||
var resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
|
||||
|
||||
var hasDropdown = isHeader && column.dropdown !== false;
|
||||
var hasDropdown = isHeader && cell.dropdown !== false;
|
||||
var dropdown = hasDropdown ? '<div class="data-table-dropdown">' + (0, _columnmanager.getDropdownHTML)() + '</div>' : '';
|
||||
|
||||
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 ';
|
||||
var contentHTML = !cell.isHeader && cell.column.format ? cell.column.format(cell.content) : cell.content;
|
||||
|
||||
return '\n <div class="content ellipsis">\n ' + contentHTML + '\n ' + sortIndicator + '\n ' + resizeColumn + '\n ' + dropdown + '\n </div>\n ' + editCellHTML + '\n ';
|
||||
}
|
||||
|
||||
function getEditCellHTML() {
|
||||
@ -2051,8 +2055,10 @@ var ColumnManager = function () {
|
||||
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;
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'setCellHeight',
|
||||
@ -2341,6 +2347,9 @@ var DataTable = function () {
|
||||
this.datamanager.init(data);
|
||||
this.render();
|
||||
this.setDimensions();
|
||||
if (this.cellmanager.$focusedCell) {
|
||||
this.cellmanager.$focusedCell.focus();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'destroy',
|
||||
@ -2559,38 +2568,108 @@ var DataManager = function () {
|
||||
}, {
|
||||
key: 'prepareColumns',
|
||||
value: function prepareColumns() {
|
||||
var columns = this.options.columns;
|
||||
this.validateColumns(columns);
|
||||
|
||||
if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
|
||||
var val = {
|
||||
id: '_rowIndex',
|
||||
content: '',
|
||||
align: 'center',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
};
|
||||
|
||||
columns = [val].concat(columns);
|
||||
}
|
||||
|
||||
this.columns = [];
|
||||
this.validateColumns();
|
||||
this.prepareDefaultColumns();
|
||||
this.prepareHeader();
|
||||
}
|
||||
}, {
|
||||
key: 'prepareDefaultColumns',
|
||||
value: function prepareDefaultColumns() {
|
||||
if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
|
||||
var _val = {
|
||||
var cell = {
|
||||
id: '_checkbox',
|
||||
content: this.getCheckboxHTML(),
|
||||
editable: false,
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
dropdown: false,
|
||||
width: 25
|
||||
};
|
||||
|
||||
columns = [_val].concat(columns);
|
||||
this.columns.push(cell);
|
||||
}
|
||||
|
||||
this.columns = _prepareColumns(columns);
|
||||
if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
|
||||
var _cell = {
|
||||
id: '_rowIndex',
|
||||
content: '',
|
||||
align: 'center',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
focusable: false,
|
||||
dropdown: false,
|
||||
width: 30
|
||||
};
|
||||
|
||||
this.columns.push(_cell);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'prepareRow',
|
||||
value: function prepareRow(row, i) {
|
||||
var _this = this;
|
||||
|
||||
var baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
return row.map(function (cell, i) {
|
||||
return _this.prepareCell(cell, i);
|
||||
}).map(function (cell) {
|
||||
return Object.assign({}, baseRowCell, cell);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'prepareHeader',
|
||||
value: function prepareHeader() {
|
||||
var _this2 = this;
|
||||
|
||||
var columns = this.columns.concat(this.options.columns);
|
||||
var baseCell = {
|
||||
isHeader: 1,
|
||||
editable: true,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: function format(value) {
|
||||
if (value === null || value === undefined) {
|
||||
return '';
|
||||
}
|
||||
return value + '';
|
||||
}
|
||||
};
|
||||
|
||||
this.columns = columns.map(function (cell, i) {
|
||||
return _this2.prepareCell(cell, i);
|
||||
}).map(function (col) {
|
||||
return Object.assign({}, baseCell, col);
|
||||
}).map(function (col) {
|
||||
col.id = col.id || col.content;
|
||||
return col;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'prepareCell',
|
||||
value: function prepareCell(content, i) {
|
||||
var cell = {
|
||||
content: '',
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: i,
|
||||
column: this.columns[i],
|
||||
width: 0
|
||||
};
|
||||
|
||||
if (content !== null && (typeof content === 'undefined' ? 'undefined' : _typeof(content)) === 'object') {
|
||||
// passed as column/header
|
||||
Object.assign(cell, content);
|
||||
} else {
|
||||
cell.content = content;
|
||||
}
|
||||
|
||||
return cell;
|
||||
}
|
||||
}, {
|
||||
key: 'prepareNumericColumns',
|
||||
@ -2610,21 +2689,21 @@ var DataManager = function () {
|
||||
}, {
|
||||
key: 'prepareRows',
|
||||
value: function prepareRows() {
|
||||
var _this = this;
|
||||
var _this3 = this;
|
||||
|
||||
this.validateData(this.data);
|
||||
|
||||
this.rows = this.data.map(function (d, i) {
|
||||
var index = _this._getNextRowCount();
|
||||
var index = _this3._getNextRowCount();
|
||||
|
||||
var row = [];
|
||||
|
||||
if (Array.isArray(d)) {
|
||||
// row is an array
|
||||
if (_this.options.addCheckboxColumn) {
|
||||
row.push(_this.getCheckboxHTML());
|
||||
if (_this3.options.addCheckboxColumn) {
|
||||
row.push(_this3.getCheckboxHTML());
|
||||
}
|
||||
if (_this.options.addSerialNoColumn) {
|
||||
if (_this3.options.addSerialNoColumn) {
|
||||
row.push(index + 1 + '');
|
||||
}
|
||||
row = row.concat(d);
|
||||
@ -2635,11 +2714,11 @@ var DataManager = function () {
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
for (var _iterator = _this.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
for (var _iterator = _this3.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var col = _step.value;
|
||||
|
||||
if (col.id === '_checkbox') {
|
||||
row.push(_this.getCheckboxHTML());
|
||||
row.push(_this3.getCheckboxHTML());
|
||||
} else if (col.id === '_rowIndex') {
|
||||
row.push(index + 1 + '');
|
||||
} else {
|
||||
@ -2662,12 +2741,13 @@ var DataManager = function () {
|
||||
}
|
||||
}
|
||||
|
||||
return prepareRow(row, index);
|
||||
return _this3.prepareRow(row, index);
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'validateColumns',
|
||||
value: function validateColumns(columns) {
|
||||
value: function validateColumns() {
|
||||
var columns = this.options.columns;
|
||||
if (!Array.isArray(columns)) {
|
||||
throw new DataError('`columns` must be an array');
|
||||
}
|
||||
@ -2681,7 +2761,7 @@ var DataManager = function () {
|
||||
}, {
|
||||
key: 'validateData',
|
||||
value: function validateData(data) {
|
||||
if (Array.isArray(data) && (Array.isArray(data[0]) || _typeof(data[0]) === 'object')) {
|
||||
if (Array.isArray(data) && (data.length === 0 || Array.isArray(data[0]) || _typeof(data[0]) === 'object')) {
|
||||
return true;
|
||||
}
|
||||
throw new DataError('`data` must be an array of arrays or objects');
|
||||
@ -2829,13 +2909,13 @@ var DataManager = function () {
|
||||
}
|
||||
|
||||
if (this.hasColumnById('_checkbox')) {
|
||||
var _val2 = '<input type="checkbox" />';
|
||||
var _val = '<input type="checkbox" />';
|
||||
|
||||
row = [_val2].concat(row);
|
||||
row = [_val].concat(row);
|
||||
}
|
||||
}
|
||||
|
||||
var _row = prepareRow(row, rowIndex);
|
||||
var _row = this.prepareRow(row, rowIndex);
|
||||
var index = this.rows.findIndex(function (row) {
|
||||
return row[0].rowIndex === rowIndex;
|
||||
});
|
||||
@ -2866,12 +2946,6 @@ var DataManager = function () {
|
||||
}
|
||||
}
|
||||
|
||||
// update model
|
||||
if (!Array.isArray(this.data[rowIndex])) {
|
||||
var col = this.getColumn(colIndex);
|
||||
this.data[rowIndex][col.id] = options.content;
|
||||
}
|
||||
|
||||
return cell;
|
||||
}
|
||||
}, {
|
||||
@ -3021,64 +3095,11 @@ var DataManager = function () {
|
||||
return DataManager;
|
||||
}();
|
||||
|
||||
exports.default = DataManager;
|
||||
|
||||
|
||||
function prepareRow(row, i) {
|
||||
var baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
return row.map(prepareCell).map(function (cell) {
|
||||
return Object.assign({}, baseRowCell, cell);
|
||||
});
|
||||
}
|
||||
|
||||
function _prepareColumns(columns) {
|
||||
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
var baseColumn = {
|
||||
isHeader: 1,
|
||||
editable: true,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: function format(value) {
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
function prepareCell(col, i) {
|
||||
var baseCell = {
|
||||
content: '',
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: 0,
|
||||
width: 0
|
||||
};
|
||||
|
||||
if (typeof col === 'string') {
|
||||
col = {
|
||||
content: col
|
||||
};
|
||||
}
|
||||
|
||||
return Object.assign({}, baseCell, col, {
|
||||
colIndex: i
|
||||
});
|
||||
}
|
||||
|
||||
// Custom Errors
|
||||
|
||||
|
||||
exports.default = DataManager;
|
||||
|
||||
var DataError = exports.DataError = function (_extendableBuiltin2) {
|
||||
_inherits(DataError, _extendableBuiltin2);
|
||||
|
||||
@ -3160,6 +3181,7 @@ var BodyRenderer = function () {
|
||||
|
||||
this.bodyScrollable.innerHTML = '\n <table class="data-table-body">\n ' + getBodyHTML(rows) + '\n </table>\n ';
|
||||
this.instance.setDimensions();
|
||||
this.restoreState();
|
||||
}
|
||||
}, {
|
||||
key: 'renderBodyWithClusterize',
|
||||
@ -3182,9 +3204,7 @@ var BodyRenderer = function () {
|
||||
contentElem: (0, _dom2.default)('tbody', this.bodyScrollable),
|
||||
callbacks: {
|
||||
clusterChanged: function clusterChanged() {
|
||||
_this.rowmanager.highlightCheckedRows();
|
||||
_this.cellmanager.selectAreaOnClusterChanged();
|
||||
_this.cellmanager.focusCellOnClusterChanged();
|
||||
_this.restoreState();
|
||||
}
|
||||
},
|
||||
/* eslint-disable */
|
||||
@ -3201,6 +3221,13 @@ var BodyRenderer = function () {
|
||||
|
||||
this.appendRemainingData();
|
||||
}
|
||||
}, {
|
||||
key: 'restoreState',
|
||||
value: function restoreState() {
|
||||
this.rowmanager.highlightCheckedRows();
|
||||
this.cellmanager.selectAreaOnClusterChanged();
|
||||
this.cellmanager.focusCellOnClusterChanged();
|
||||
}
|
||||
}, {
|
||||
key: 'appendRemainingData',
|
||||
value: function appendRemainingData() {
|
||||
@ -3346,14 +3373,14 @@ exports.default = {
|
||||
desc: '↓',
|
||||
none: ''
|
||||
},
|
||||
freezeMessage: 'Loading...',
|
||||
freezeMessage: '',
|
||||
editing: function editing() {},
|
||||
addSerialNoColumn: true,
|
||||
addCheckboxColumn: false,
|
||||
enableClusterize: true,
|
||||
enableLogs: false,
|
||||
takeAvailableSpace: false,
|
||||
loadingText: 'Loading...'
|
||||
loadingText: ''
|
||||
};
|
||||
module.exports = exports['default'];
|
||||
|
||||
@ -3397,7 +3424,7 @@ exports = module.exports = __webpack_require__(16)(false);
|
||||
|
||||
|
||||
// module
|
||||
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.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 *, .data-table *:focus {\n outline: none !important;\n border-radius: 0px;\n box-shadow: 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 #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
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -32,6 +32,7 @@ export default class BodyRenderer {
|
||||
</table>
|
||||
`;
|
||||
this.instance.setDimensions();
|
||||
this.restoreState();
|
||||
}
|
||||
|
||||
renderBodyWithClusterize() {
|
||||
@ -55,9 +56,7 @@ export default class BodyRenderer {
|
||||
contentElem: $('tbody', this.bodyScrollable),
|
||||
callbacks: {
|
||||
clusterChanged: () => {
|
||||
this.rowmanager.highlightCheckedRows();
|
||||
this.cellmanager.selectAreaOnClusterChanged();
|
||||
this.cellmanager.focusCellOnClusterChanged();
|
||||
this.restoreState();
|
||||
}
|
||||
},
|
||||
/* eslint-disable */
|
||||
@ -75,6 +74,12 @@ export default class BodyRenderer {
|
||||
this.appendRemainingData();
|
||||
}
|
||||
|
||||
restoreState() {
|
||||
this.rowmanager.highlightCheckedRows();
|
||||
this.cellmanager.selectAreaOnClusterChanged();
|
||||
this.cellmanager.focusCellOnClusterChanged();
|
||||
}
|
||||
|
||||
appendRemainingData() {
|
||||
const rows = this.datamanager.getRows(20);
|
||||
const data = this.getDataForClusterize(rows);
|
||||
|
||||
@ -62,7 +62,7 @@ export default class CellManager {
|
||||
|
||||
if (direction === 'left') {
|
||||
$cell = this.getLeftCell$($cell);
|
||||
} else if (direction === 'right') {
|
||||
} else if (direction === 'right' || direction === 'tab') {
|
||||
$cell = this.getRightCell$($cell);
|
||||
} else if (direction === 'up') {
|
||||
$cell = this.getAboveCell$($cell);
|
||||
@ -96,7 +96,7 @@ export default class CellManager {
|
||||
return true;
|
||||
};
|
||||
|
||||
['left', 'right', 'up', 'down'].map(
|
||||
['left', 'right', 'up', 'down', 'tab'].map(
|
||||
direction => keyboard.on(direction, () => focusCell(direction))
|
||||
);
|
||||
|
||||
@ -105,8 +105,6 @@ export default class CellManager {
|
||||
);
|
||||
|
||||
keyboard.on('esc', () => {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
this.$editingCell.focus();
|
||||
this.deactivateEditing();
|
||||
});
|
||||
}
|
||||
@ -188,6 +186,9 @@ export default class CellManager {
|
||||
this.$focusedCell = $cell;
|
||||
$cell.classList.add('selected');
|
||||
|
||||
// so that keyboard nav works
|
||||
$cell.focus();
|
||||
|
||||
this.highlightRowColumnHeader($cell);
|
||||
this.scrollToCell($cell);
|
||||
}
|
||||
@ -362,6 +363,9 @@ export default class CellManager {
|
||||
}
|
||||
|
||||
deactivateEditing() {
|
||||
// keep focus on the cell so that keyboard navigation works
|
||||
if (this.$focusedCell) this.$focusedCell.focus();
|
||||
|
||||
if (!this.$editingCell) return;
|
||||
this.$editingCell.classList.remove('editing');
|
||||
this.$editingCell = null;
|
||||
@ -539,8 +543,8 @@ export default class CellManager {
|
||||
}
|
||||
}
|
||||
|
||||
export function getCellHTML(column) {
|
||||
const { rowIndex, colIndex, isHeader } = column;
|
||||
export function getCellHTML(cell) {
|
||||
const { rowIndex, colIndex, isHeader } = cell;
|
||||
const dataAttr = makeDataAttributeString({
|
||||
rowIndex,
|
||||
colIndex,
|
||||
@ -549,29 +553,31 @@ export function getCellHTML(column) {
|
||||
|
||||
return `
|
||||
<td class="data-table-col noselect" ${dataAttr} tabindex="0">
|
||||
${getCellContent(column)}
|
||||
${getCellContent(cell)}
|
||||
</td>
|
||||
`;
|
||||
}
|
||||
|
||||
export function getCellContent(column) {
|
||||
const { isHeader } = column;
|
||||
export function getCellContent(cell) {
|
||||
const { isHeader } = cell;
|
||||
|
||||
const editable = !isHeader && column.editable !== false;
|
||||
const editable = !isHeader && cell.editable !== false;
|
||||
const editCellHTML = editable ? getEditCellHTML() : '';
|
||||
|
||||
const sortable = isHeader && column.sortable !== false;
|
||||
const sortable = isHeader && cell.sortable !== false;
|
||||
const sortIndicator = sortable ? '<span class="sort-indicator"></span>' : '';
|
||||
|
||||
const resizable = isHeader && column.resizable !== false;
|
||||
const resizable = isHeader && cell.resizable !== false;
|
||||
const resizeColumn = resizable ? '<span class="column-resizer"></span>' : '';
|
||||
|
||||
const hasDropdown = isHeader && column.dropdown !== false;
|
||||
const hasDropdown = isHeader && cell.dropdown !== false;
|
||||
const dropdown = hasDropdown ? `<div class="data-table-dropdown">${getDropdownHTML()}</div>` : '';
|
||||
|
||||
const contentHTML = (!cell.isHeader && cell.column.format) ? cell.column.format(cell.content) : cell.content;
|
||||
|
||||
return `
|
||||
<div class="content ellipsis">
|
||||
${(!column.isHeader && column.format) ? column.format(column.content) : column.content}
|
||||
${(contentHTML)}
|
||||
${sortIndicator}
|
||||
${resizeColumn}
|
||||
${dropdown}
|
||||
|
||||
@ -357,8 +357,10 @@ export default class ColumnManager {
|
||||
setDefaultCellHeight() {
|
||||
if (this.__cellHeightSet) return;
|
||||
const height = $.style($('.data-table-col', this.instance.datatableWrapper), 'height');
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
if (height) {
|
||||
this.setCellHeight(height);
|
||||
this.__cellHeightSet = true;
|
||||
}
|
||||
}
|
||||
|
||||
setCellHeight(height) {
|
||||
|
||||
@ -35,38 +35,97 @@ export default class DataManager {
|
||||
}
|
||||
|
||||
prepareColumns() {
|
||||
let columns = this.options.columns;
|
||||
this.validateColumns(columns);
|
||||
|
||||
if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
|
||||
let val = {
|
||||
id: '_rowIndex',
|
||||
content: '',
|
||||
align: 'center',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
};
|
||||
|
||||
columns = [val].concat(columns);
|
||||
}
|
||||
this.columns = [];
|
||||
this.validateColumns();
|
||||
this.prepareDefaultColumns();
|
||||
this.prepareHeader();
|
||||
}
|
||||
|
||||
prepareDefaultColumns() {
|
||||
if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
|
||||
const val = {
|
||||
const cell = {
|
||||
id: '_checkbox',
|
||||
content: this.getCheckboxHTML(),
|
||||
editable: false,
|
||||
resizable: false,
|
||||
sortable: false,
|
||||
focusable: false,
|
||||
dropdown: false
|
||||
dropdown: false,
|
||||
width: 25
|
||||
};
|
||||
|
||||
columns = [val].concat(columns);
|
||||
this.columns.push(cell);
|
||||
}
|
||||
|
||||
this.columns = prepareColumns(columns);
|
||||
if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
|
||||
let cell = {
|
||||
id: '_rowIndex',
|
||||
content: '',
|
||||
align: 'center',
|
||||
editable: false,
|
||||
resizable: false,
|
||||
focusable: false,
|
||||
dropdown: false,
|
||||
width: 30
|
||||
};
|
||||
|
||||
this.columns.push(cell);
|
||||
}
|
||||
}
|
||||
|
||||
prepareRow(row, i) {
|
||||
const baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
return row
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
}
|
||||
|
||||
prepareHeader() {
|
||||
let columns = this.columns.concat(this.options.columns);
|
||||
const baseCell = {
|
||||
isHeader: 1,
|
||||
editable: true,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: (value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return '';
|
||||
}
|
||||
return value + '';
|
||||
}
|
||||
};
|
||||
|
||||
this.columns = columns
|
||||
.map((cell, i) => this.prepareCell(cell, i))
|
||||
.map(col => Object.assign({}, baseCell, col))
|
||||
.map(col => {
|
||||
col.id = col.id || col.content;
|
||||
return col;
|
||||
});
|
||||
}
|
||||
|
||||
prepareCell(content, i) {
|
||||
const cell = {
|
||||
content: '',
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: i,
|
||||
column: this.columns[i],
|
||||
width: 0
|
||||
};
|
||||
|
||||
if (content !== null && typeof content === 'object') {
|
||||
// passed as column/header
|
||||
Object.assign(cell, content);
|
||||
} else {
|
||||
cell.content = content;
|
||||
}
|
||||
|
||||
return cell;
|
||||
}
|
||||
|
||||
prepareNumericColumns() {
|
||||
@ -114,11 +173,12 @@ export default class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
return prepareRow(row, index);
|
||||
return this.prepareRow(row, index);
|
||||
});
|
||||
}
|
||||
|
||||
validateColumns(columns) {
|
||||
validateColumns() {
|
||||
const columns = this.options.columns;
|
||||
if (!Array.isArray(columns)) {
|
||||
throw new DataError('`columns` must be an array');
|
||||
}
|
||||
@ -131,7 +191,8 @@ export default class DataManager {
|
||||
}
|
||||
|
||||
validateData(data) {
|
||||
if (Array.isArray(data) && (Array.isArray(data[0]) || typeof data[0] === 'object')) {
|
||||
if (Array.isArray(data) &&
|
||||
(data.length === 0 || Array.isArray(data[0]) || typeof data[0] === 'object')) {
|
||||
return true;
|
||||
}
|
||||
throw new DataError('`data` must be an array of arrays or objects');
|
||||
@ -280,7 +341,7 @@ export default class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
const _row = prepareRow(row, rowIndex);
|
||||
const _row = this.prepareRow(row, rowIndex);
|
||||
const index = this.rows.findIndex(row => row[0].rowIndex === rowIndex);
|
||||
this.rows[index] = _row;
|
||||
|
||||
@ -308,12 +369,6 @@ export default class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
// update model
|
||||
if (!Array.isArray(this.data[rowIndex])) {
|
||||
const col = this.getColumn(colIndex);
|
||||
this.data[rowIndex][col.id] = options.content;
|
||||
}
|
||||
|
||||
return cell;
|
||||
}
|
||||
|
||||
@ -419,55 +474,5 @@ export default class DataManager {
|
||||
}
|
||||
}
|
||||
|
||||
function prepareRow(row, i) {
|
||||
const baseRowCell = {
|
||||
rowIndex: i
|
||||
};
|
||||
|
||||
return row
|
||||
.map(prepareCell)
|
||||
.map(cell => Object.assign({}, baseRowCell, cell));
|
||||
}
|
||||
|
||||
function prepareColumns(columns, props = {}) {
|
||||
const baseColumn = {
|
||||
isHeader: 1,
|
||||
editable: true,
|
||||
sortable: true,
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: value => value + ''
|
||||
};
|
||||
|
||||
return columns
|
||||
.map(prepareCell)
|
||||
.map(col => Object.assign({}, baseColumn, col))
|
||||
.map(col => {
|
||||
col.id = col.id || col.content;
|
||||
return col;
|
||||
});
|
||||
}
|
||||
|
||||
function prepareCell(col, i) {
|
||||
const baseCell = {
|
||||
content: '',
|
||||
align: 'left',
|
||||
sortOrder: 'none',
|
||||
colIndex: 0,
|
||||
width: 0
|
||||
};
|
||||
|
||||
if (typeof col === 'string') {
|
||||
col = {
|
||||
content: col
|
||||
};
|
||||
}
|
||||
|
||||
return Object.assign({}, baseCell, col, {
|
||||
colIndex: i
|
||||
});
|
||||
}
|
||||
|
||||
// Custom Errors
|
||||
export class DataError extends TypeError {};
|
||||
|
||||
@ -38,12 +38,12 @@ export default {
|
||||
desc: '↓',
|
||||
none: ''
|
||||
},
|
||||
freezeMessage: 'Loading...',
|
||||
freezeMessage: '',
|
||||
editing: () => {},
|
||||
addSerialNoColumn: true,
|
||||
addCheckboxColumn: false,
|
||||
enableClusterize: true,
|
||||
enableLogs: false,
|
||||
takeAvailableSpace: false,
|
||||
loadingText: 'Loading...'
|
||||
loadingText: ''
|
||||
};
|
||||
|
||||
@ -186,12 +186,12 @@ export default class RowManager {
|
||||
}
|
||||
}
|
||||
|
||||
export function getRowHTML(columns, props) {
|
||||
export function getRowHTML(row, props) {
|
||||
const dataAttr = makeDataAttributeString(props);
|
||||
|
||||
return `
|
||||
<tr class="data-table-row" ${dataAttr}>
|
||||
${columns.map(getCellHTML).join('')}
|
||||
${row.map(getCellHTML).join('')}
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -4,32 +4,34 @@ $border-color: #d1d8dd;
|
||||
$primary-color: rgb(82, 146, 247);
|
||||
$light-bg: #f5f7fa;
|
||||
$light-red: #FD8B8B;
|
||||
$text-color: #000000;
|
||||
|
||||
$spacer-1: 0.25rem;
|
||||
$spacer-2: 0.5rem;
|
||||
$spacer-3: 1rem;
|
||||
|
||||
/* resets */
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.data-table button, .data-table input {
|
||||
overflow: visible;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* styling */
|
||||
|
||||
.data-table * {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
/* resets */
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button, input {
|
||||
overflow: visible;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*, *:focus {
|
||||
outline: none;
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* styling */
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
@ -207,7 +209,7 @@ $spacer-3: 1rem;
|
||||
}
|
||||
|
||||
.edit-cell {
|
||||
border: 2px solid $light-red;
|
||||
border: 2px solid $primary-color;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user