jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

fixes for height

Browse Source
This commit is contained in:
Rushabh Mehta 2018-02-05 11:36:19 +05:30
parent d9d663d541
commit 9a88d7c38a
7 changed files with 64 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
lib/frappe-datatable.js
View File

@ -1056,7 +1056,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 + '"]';
@ -2052,6 +2052,9 @@ var ColumnManager = function () {
this.style.setStyle('.data-table-col .content', {
height: height + 'px'
});
this.style.setStyle('.data-table-col .edit-cell', {
height: height + 'px'
});
}
}, {
key: 'setColumnStyle',
@ -2071,6 +2074,7 @@ var ColumnManager = function () {
_this12.setColumnWidth(column.colIndex);
});
this.instance.setBodyWidth();
this.setDefaultCellHeight(_dom2.default.style(this.instance.datatableWrapper.querySelector('.data-table-col'), 'height'));
}
}, {
key: 'sortRows',
@ -2329,6 +2333,7 @@ var DataTable = function () {
value: function refresh(data) {
this.datamanager.init(data);
this.render();
this.setDimensions();
}
}, {
key: 'destroy',
@ -2552,12 +2557,13 @@ var DataManager = function () {
value: function prepareColumns(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,
resizable: true,
focusable: false,
dropdown: false
};
@ -2565,8 +2571,9 @@ var DataManager = function () {
columns = [val].concat(columns);
}
if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
var _val = {
id: '_checkbox',
content: 'Checkbox',
editable: false,
resizable: false,
@ -2609,13 +2616,13 @@ var DataManager = function () {
var index = _this._getNextRowCount();
if (row.length < _this.columns.length) {
if (_this.hasColumn('Sr. No')) {
if (_this.hasColumnById('_rowIndex')) {
var val = index + 1 + '';
row = [val].concat(row);
}
if (_this.hasColumn('Checkbox')) {
if (_this.hasColumnById('_checkbox')) {
var _val2 = '<input type="checkbox" />';
row = [_val2].concat(row);
@ -2717,9 +2724,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) {
@ -2795,13 +2802,13 @@ 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')) {
if (this.hasColumnById('_checkbox')) {
var _val3 = '<input type="checkbox" />';
row = [_val3].concat(row);
@ -2945,6 +2952,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) {
@ -2952,6 +2966,13 @@ var DataManager = function () {
return col.content === name;
});
}
}, {
key: 'getColumnIndexById',
value: function getColumnIndexById(id) {
return this.columns.findIndex(function (col) {
return col.id === id;
});
}
}, {
key: 'currentSort',
get: function get() {
@ -3343,7 +3364,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\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: 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 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 #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

2
lib/frappe-datatable.js.map
View File

File diff suppressed because one or more lines are too long

2
src/cellmanager.js
View File

@ -197,7 +197,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}"]`;

4
src/columnmanager.js
View File

@ -357,6 +357,9 @@ export default class ColumnManager {
this.style.setStyle('.data-table-col .content', {
height: height + 'px'
});
this.style.setStyle('.data-table-col .edit-cell', {
height: height + 'px'
});
}
setColumnStyle() {
@ -374,6 +377,7 @@ export default class ColumnManager {
this.setColumnWidth(column.colIndex);
});
this.instance.setBodyWidth();
this.setDefaultCellHeight($.style(this.instance.datatableWrapper.querySelector('.data-table-col'), 'height'));
}
sortRows(colIndex, sortOrder) {

32
src/datamanager.js
View File

@ -37,12 +37,13 @@ export default class DataManager {
prepareColumns(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,
resizable: true,
focusable: false,
dropdown: false
};
@ -50,8 +51,9 @@ export default class DataManager {
columns = [val].concat(columns);
}
if (this.options.addCheckboxColumn && !this.hasColumn('Checkbox')) {
if (this.options.addCheckboxColumn && !this.hasColumnById('_checkbox')) {
const val = {
id: '_checkbox',
content: 'Checkbox',
editable: false,
resizable: false,
@ -88,13 +90,13 @@ export default class DataManager {
const index = this._getNextRowCount();
if (row.length < this.columns.length) {
if (this.hasColumn('Sr. No')) {
if (this.hasColumnById('_rowIndex')) {
const val = (index + 1) + '';
row = [val].concat(row);
}
if (this.hasColumn('Checkbox')) {
if (this.hasColumnById('_checkbox')) {
const val = '<input type="checkbox" />';
row = [val].concat(row);
@ -191,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) {
@ -265,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);
@ -393,9 +395,17 @@ 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);
}
}
function prepareRow(row, i) {

1
src/datatable.js
View File

@ -77,6 +77,7 @@ class DataTable {
refresh(data) {
this.datamanager.init(data);
this.render();
this.setDimensions();
}
destroy() {

4
src/style.scss
View File

@ -14,12 +14,13 @@ $spacer-3: 1rem;
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 */
@ -193,7 +194,6 @@ button, input {
outline: none;
width: 100%;
border: none;
height: 1em;
}
}