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

28
src/body-renderer.js
View File

@ -24,31 +24,19 @@ export default class BodyRenderer {
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);
}
render() {
const rows = this.datamanager.getRowsForView();
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);
}
this.renderRows(rows);
// setDimensions requires atleast 1 row to exist in dom
this.instance.setDimensions();
}

9
src/style.css
View File

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

12
src/style.js
View File

@ -12,7 +12,7 @@ export default class Style {
linkProperties(this, this.instance, [
'options', 'datamanager', 'columnmanager',
'header', 'bodyScrollable', 'datatableWrapper',
'getColumn'
'getColumn', 'bodyRenderer'
]);
this.scopeClass = 'dt-instance-' + instance.constructor.instances;
@ -311,6 +311,16 @@ export default class Style {
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, {
marginTop: $.style(this.header, 'height') + 'px'
});