accept dict as data
This commit is contained in:
Rushabh Mehta
parent
9a88d7c38a
commit
9ae7c3a8e6
@ -878,6 +878,14 @@ var CellManager = function () {
|
||||
}
|
||||
});
|
||||
|
||||
_dom2.default.on(this.bodyScrollable, 'blur', 'input', function (e, input) {
|
||||
var cell = input.closest('.data-table-col');
|
||||
if (_this.$editingCell === cell) {
|
||||
_this.submitEditing();
|
||||
_this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
// $.on(document.body, 'click', e => {
|
||||
// if (e.target.matches('.edit-cell, .edit-cell *')) return;
|
||||
// this.deactivateEditing();
|
||||
@ -1256,7 +1264,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);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
@ -1304,12 +1312,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
|
||||
@ -1512,7 +1522,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() {
|
||||
@ -2308,7 +2318,7 @@ var DataTable = function () {
|
||||
_keyboard2.default.init(this.wrapper);
|
||||
|
||||
if (this.options.data) {
|
||||
this.refresh(this.options.data);
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
@ -2535,17 +2545,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();
|
||||
}
|
||||
@ -2554,7 +2561,8 @@ 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.hasColumnById('_rowIndex')) {
|
||||
@ -2588,7 +2596,7 @@ var DataManager = function () {
|
||||
columns = [_val].concat(columns);
|
||||
}
|
||||
|
||||
return _prepareColumns(columns);
|
||||
this.columns = _prepareColumns(columns);
|
||||
}
|
||||
}, {
|
||||
key: 'prepareNumericColumns',
|
||||
@ -2607,32 +2615,62 @@ var DataManager = function () {
|
||||
}
|
||||
}, {
|
||||
key: 'prepareRows',
|
||||
value: function prepareRows(rows) {
|
||||
value: function prepareRows() {
|
||||
var _this = this;
|
||||
|
||||
this.validateRows(rows);
|
||||
this.validateRows(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.hasColumnById('_rowIndex')) {
|
||||
var val = index + 1 + '';
|
||||
var row = [];
|
||||
|
||||
row = [val].concat(row);
|
||||
if (Array.isArray(d)) {
|
||||
// row is an array
|
||||
if (_this.options.addSerialNoColumn) {
|
||||
row.push(index + 1 + '');
|
||||
}
|
||||
|
||||
if (_this.hasColumnById('_checkbox')) {
|
||||
var _val2 = '<input type="checkbox" />';
|
||||
if (_this.options.addCheckboxColumn) {
|
||||
row.push(_this.getCheckboxHTML());
|
||||
}
|
||||
row = row.concat(d);
|
||||
} else {
|
||||
// row is a dict
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
row = [_val2].concat(row);
|
||||
try {
|
||||
for (var _iterator = _this.columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
var col = _step.value;
|
||||
|
||||
if (col.id === '_rowIndex') {
|
||||
row.push(index + 1 + '');
|
||||
} else if (col.id === '_checkbox') {
|
||||
row.push(_this.getCheckboxHTML());
|
||||
} 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',
|
||||
@ -2650,21 +2688,9 @@ var DataManager = function () {
|
||||
}, {
|
||||
key: 'validateRows',
|
||||
value: function validateRows(rows) {
|
||||
var _this2 = this;
|
||||
|
||||
if (!Array.isArray(rows)) {
|
||||
throw new DataError('`rows` must be an array');
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'appendRows',
|
||||
@ -2809,9 +2835,9 @@ var DataManager = function () {
|
||||
}
|
||||
|
||||
if (this.hasColumnById('_checkbox')) {
|
||||
var _val3 = '<input type="checkbox" />';
|
||||
var _val2 = '<input type="checkbox" />';
|
||||
|
||||
row = [_val3].concat(row);
|
||||
row = [_val2].concat(row);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2825,7 +2851,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,
|
||||
@ -2834,17 +2860,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;
|
||||
}
|
||||
}, {
|
||||
@ -2973,6 +3006,11 @@ var DataManager = function () {
|
||||
return col.id === id;
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'getCheckboxHTML',
|
||||
value: function getCheckboxHTML() {
|
||||
return '<input type="checkbox" />';
|
||||
}
|
||||
}, {
|
||||
key: 'currentSort',
|
||||
get: function get() {
|
||||
@ -3013,7 +3051,7 @@ function _prepareColumns(columns) {
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: function format(value) {
|
||||
return '<span class="column-title">' + value + '</span>';
|
||||
return value + '';
|
||||
}
|
||||
};
|
||||
|
||||
@ -3277,10 +3315,8 @@ Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = {
|
||||
data: {
|
||||
columns: [],
|
||||
rows: []
|
||||
},
|
||||
columns: [],
|
||||
data: [],
|
||||
dropdownButton: '▼',
|
||||
headerDropdown: [{
|
||||
label: 'Sort Ascending',
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -51,6 +51,14 @@ export default class CellManager {
|
||||
}
|
||||
});
|
||||
|
||||
$.on(this.bodyScrollable, 'blur', 'input', (e, input) => {
|
||||
const cell = input.closest('.data-table-col');
|
||||
if (this.$editingCell === cell) {
|
||||
this.submitEditing();
|
||||
this.deactivateEditing();
|
||||
}
|
||||
});
|
||||
|
||||
// $.on(document.body, 'click', e => {
|
||||
// if (e.target.matches('.edit-cell, .edit-cell *')) return;
|
||||
// this.deactivateEditing();
|
||||
@ -360,7 +368,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 +407,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 +582,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}
|
||||
|
||||
@ -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,7 +34,8 @@ export default class DataManager {
|
||||
};
|
||||
}
|
||||
|
||||
prepareColumns(columns) {
|
||||
prepareColumns() {
|
||||
let columns = this.options.columns;
|
||||
this.validateColumns(columns);
|
||||
|
||||
if (this.options.addSerialNoColumn && !this.hasColumnById('_rowIndex')) {
|
||||
@ -66,7 +67,7 @@ export default class DataManager {
|
||||
columns = [val].concat(columns);
|
||||
}
|
||||
|
||||
return prepareColumns(columns);
|
||||
this.columns = prepareColumns(columns);
|
||||
}
|
||||
|
||||
prepareNumericColumns() {
|
||||
@ -83,30 +84,40 @@ export default class DataManager {
|
||||
});
|
||||
}
|
||||
|
||||
prepareRows(rows) {
|
||||
this.validateRows(rows);
|
||||
prepareRows() {
|
||||
this.validateRows(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.hasColumnById('_rowIndex')) {
|
||||
const val = (index + 1) + '';
|
||||
let row = [];
|
||||
|
||||
row = [val].concat(row);
|
||||
if (Array.isArray(d)) {
|
||||
// row is an array
|
||||
if (this.options.addSerialNoColumn) {
|
||||
row.push((index + 1) + '');
|
||||
}
|
||||
|
||||
if (this.hasColumnById('_checkbox')) {
|
||||
const val = '<input type="checkbox" />';
|
||||
if (this.options.addCheckboxColumn) {
|
||||
row.push(this.getCheckboxHTML());
|
||||
}
|
||||
row = row.concat(d);
|
||||
|
||||
row = [val].concat(row);
|
||||
} else {
|
||||
// row is a dict
|
||||
for (let col of this.columns) {
|
||||
if (col.id === '_rowIndex') {
|
||||
row.push((index + 1) + '');
|
||||
} else if (col.id === '_checkbox') {
|
||||
row.push(this.getCheckboxHTML());
|
||||
} else {
|
||||
row.push(col.format(d[col.id]));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return prepareRow(row, index);
|
||||
});
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
validateColumns(columns) {
|
||||
@ -125,16 +136,6 @@ export default class DataManager {
|
||||
if (!Array.isArray(rows)) {
|
||||
throw new DataError('`rows` must be an array');
|
||||
}
|
||||
|
||||
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`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
appendRows(rows) {
|
||||
@ -287,7 +288,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,
|
||||
@ -296,17 +297,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;
|
||||
}
|
||||
|
||||
@ -406,6 +414,10 @@ export default class DataManager {
|
||||
getColumnIndexById(id) {
|
||||
return this.columns.findIndex(col => col.id === id);
|
||||
}
|
||||
|
||||
getCheckboxHTML() {
|
||||
return '<input type="checkbox" />';
|
||||
}
|
||||
}
|
||||
|
||||
function prepareRow(row, i) {
|
||||
@ -426,7 +438,7 @@ function prepareColumns(columns, props = {}) {
|
||||
resizable: true,
|
||||
focusable: true,
|
||||
dropdown: true,
|
||||
format: value => `<span class="column-title">${value}</span>`
|
||||
format: value => value + ''
|
||||
};
|
||||
|
||||
return columns
|
||||
|
||||
@ -44,7 +44,7 @@ class DataTable {
|
||||
keyboard.init(this.wrapper);
|
||||
|
||||
if (this.options.data) {
|
||||
this.refresh(this.options.data);
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
export default {
|
||||
data: {
|
||||
columns: [],
|
||||
rows: []
|
||||
},
|
||||
columns: [],
|
||||
data: [],
|
||||
dropdownButton: '▼',
|
||||
headerDropdown: [
|
||||
{
|
||||
|
||||
@ -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