Implemented Horizontal Scrolling

src/components/datatable/ScrollableView.vue

@@ -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) {

src/views/datatable/DataTableScrollDemo.vue

@@ -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">