vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Implemented Horizontal Scrolling

pull/104/head
cagataycivici 2019-11-18 17:03:07 +03:00
parent f756d0a3df
commit eda8b0ccf6
2 changed files with 57 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/datatable/ScrollableView.vue
View File

@ -68,10 +68,54 @@ export default {
},
methods: {
onHeaderScroll() {
this.$refs.scrollHeader.scrollLeft = 0;
},
onBodyScroll() {
let frozenView = this.$refs.previousElementSibling;
let frozenScrollBody;
if (frozenView) {
frozenScrollBody = DomHandler.findSingle(frozenView, '.p-datatable-scrollable-body');
}
this.$refs.scrollHeaderBox.style.marginLeft = -1 * this.$refs.scrollBody.scrollLeft + 'px';
if( this.$refs.scrollFooterBox) {
this.$refs.scrollFooterBox.style.marginLeft = -1 * this.$refs.scrollBody.scrollLeft + 'px';
}
if(frozenScrollBody) {
frozenScrollBody.scrollTop = this.$refs.scrollBody.scrollTop;
}
/*
if (this.props.virtualScroll) {
let viewport = DomHandler.getClientHeight(this.scrollBody);
let tableHeight = DomHandler.getOuterHeight(this.scrollTable);
let pageHeight = this.props.virtualRowHeight * this.props.rows;
let virtualTableHeight = DomHandler.getOuterHeight(this.virtualScroller);
let pageCount = (virtualTableHeight / pageHeight)||1;
let scrollBodyTop = this.scrollTable.style.top||'0';
if(this.scrollBody.scrollTop + viewport > parseFloat(scrollBodyTop) + tableHeight || this.scrollBody.scrollTop < parseFloat(scrollBodyTop)) {
if (this.loadingTable) {
this.loadingTable.style.display = 'table';
this.loadingTable.style.top = this.scrollBody.scrollTop + 'px';
}
let page = Math.floor((this.scrollBody.scrollTop * pageCount) / (this.scrollBody.scrollHeight)) + 1;
if(this.props.onVirtualScroll) {
this.props.onVirtualScroll({
page: page
});
this.virtualScrollCallback = () => {
if (this.loadingTable) {
this.loadingTable.style.display = 'none';
}
this.scrollTable.style.top = ((page - 1) * pageHeight) + 'px';
}
}
}
}*/
},
setScrollHeight() {
if (this.scrollHeight) {

12
src/views/datatable/DataTableScrollDemo.vue
View File

@ -17,6 +17,18 @@
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
<h3>Horizontal and Vertical</h3>
<DataTable :value="cars" :scrollable="true" scrollHeight="200px" style="width: 600px">
<Column field="vin" header="Vin" headerStyle="width: 250px"></Column>
<Column field="year" header="Year" headerStyle="width: 250px"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px"></Column>
<Column field="color" header="Color" headerStyle="width: 250px"></Column>
<Column field="vin" header="Vin" headerStyle="width: 250px"></Column>
<Column field="year" header="Year" headerStyle="width: 250px"></Column>
<Column field="brand" header="Brand" headerStyle="width: 250px"></Column>
<Column field="color" header="Color" headerStyle="width: 250px"></Column>
</DataTable>
</div>
<div class="content-section documentation">