jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

fix: 🐛 Adapt container height when there are less rows

Browse Source
This commit is contained in:
Faris Ansari 2018-11-01 15:26:11 +05:30
parent cc27d66138
commit cfbb891737
4 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -19,6 +19,7 @@
<body> <body>
<h1>Frappé DataTable</h1> <h1>Frappé DataTable</h1>
<button onclick="datatable.render()">Refresh</button> <button onclick="datatable.render()">Refresh</button>
<button onclick="switchToTreeView()" data-action="treeview">TreeView</button>
<label> <label>
<input type="checkbox" id="input-large-data" /> <input type="checkbox" id="input-large-data" />
<span>Large Data</span> <span>Large Data</span>
@ -150,7 +151,7 @@
} }
} }
function makeDatatable() { function makeDatatable(treeView = false) {
console.log('No of Rows:', data.length) console.log('No of Rows:', data.length)
const start = performance.now(); const start = performance.now();
@ -162,7 +163,7 @@
data, data,
inlineFilters: true, inlineFilters: true,
dynamicRowHeight: true, dynamicRowHeight: true,
// treeView: true, treeView: treeView,
// filterRows(keyword, cells, colIndex) { // filterRows(keyword, cells, colIndex) {
// return cells // return cells
// .filter(cell => cell.content.includes(keyword)) // .filter(cell => cell.content.includes(keyword))
@ -198,8 +199,13 @@
window.datatable = datatable; window.datatable = datatable;
} }
window.switchToTreeView = function() {
datatable.destroy();
buildTreeData();
makeDatatable(true);
}
buildData(); buildData();
// buildTreeData();
makeDatatable(); makeDatatable();
}) })
</script> </script>

28
src/body-renderer.js
View File

@ -24,31 +24,19 @@ export default class BodyRenderer {
return el.children[0]; return el.children[0];
} }
}; };
this.hyperlist.refresh(this.bodyDiv, config);
if (!this.hyperlist) {
this.hyperlist = new HyperList(this.bodyDiv, config);
} else {
this.hyperlist.refresh(this.bodyDiv, config);
}
this.visibleRows = rows.map(row => row.meta.rowIndex); this.visibleRows = rows.map(row => row.meta.rowIndex);
} }
render() { render() {
const rows = this.datamanager.getRowsForView(); const rows = this.datamanager.getRowsForView();
this.renderRows(rows);
let config = {
itemHeight: this.options.cellHeight,
total: rows.length,
generate: (index) => {
const el = document.createElement('div');
const rowHTML = this.rowmanager.getRowHTML(rows[index], rows[index].meta);
el.innerHTML = rowHTML;
return el.children[0];
}
};
if (!this.hyperlist) {
this.hyperlist = new HyperList(this.bodyDiv, config);
this.visibleRows = rows.map(row => row.meta.rowIndex);
} else {
this.renderRows(rows);
}
// setDimensions requires atleast 1 row to exist in dom // setDimensions requires atleast 1 row to exist in dom
this.instance.setDimensions(); this.instance.setDimensions();
} }

9
src/style.css
View File

@ -46,7 +46,6 @@
height: 40vw; height: 40vw;
overflow: auto; overflow: auto;
border-bottom: 1px solid var(--dt-border-color); border-bottom: 1px solid var(--dt-border-color);
border-right: 1px solid var(--dt-border-color);
&--highlight-all { &--highlight-all {
background-color: var(--dt-selection-highlight-color); background-color: var(--dt-selection-highlight-color);
@ -74,6 +73,10 @@
&--hide { &--hide {
display: none; display: none;
} }
&:last-child {
border-bottom: 1px solid var(--dt-border-color);
}
} }
.dt-cell { .dt-cell {
@ -168,6 +171,10 @@
display: flex; display: flex;
} }
} }
&:last-child {
border-right: 1px solid var(--dt-border-color);
}
} }
.icon-open, .icon-close { .icon-open, .icon-close {

12
src/style.js
View File

@ -12,7 +12,7 @@ export default class Style {
linkProperties(this, this.instance, [ linkProperties(this, this.instance, [
'options', 'datamanager', 'columnmanager', 'options', 'datamanager', 'columnmanager',
'header', 'bodyScrollable', 'datatableWrapper', 'header', 'bodyScrollable', 'datatableWrapper',
'getColumn' 'getColumn', 'bodyRenderer'
]); ]);
this.scopeClass = 'dt-instance-' + instance.constructor.instances; this.scopeClass = 'dt-instance-' + instance.constructor.instances;
@ -311,6 +311,16 @@ export default class Style {
width: width + 'px' width: width + 'px'
}); });
// when there are less rows than the container
// adapt the container height
const height = $.getStyle(this.bodyScrollable, 'height');
const scrollHeight = (this.bodyRenderer.hyperlist || {})._scrollHeight || Infinity;
if (scrollHeight < height) {
$.style(this.bodyScrollable, {
height: (scrollHeight + 1) + 'px'
});
}
$.style(this.bodyScrollable, { $.style(this.bodyScrollable, {
marginTop: $.style(this.header, 'height') + 'px' marginTop: $.style(this.header, 'height') + 'px'
}); });