Skip to content

Commit

Permalink
Fixed #173
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Nov 1, 2017
1 parent 19616f4 commit fc71f28
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 45 deletions.
2 changes: 1 addition & 1 deletion src/components/datatable/DataTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -632,7 +632,7 @@ export class DataTable extends Component {
if(this.virtualScrollTimer) {
clearTimeout(this.virtualScrollTimer);
}

this.virtualScrollTimer = setTimeout(() => {
let first = (event.page - 1) * this.props.rows;
this.setState({
Expand Down
10 changes: 9 additions & 1 deletion src/components/datatable/ScrollableView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ export class ScrollableView extends Component {
this.scrollTableWrapper.style.height = this.props.totalRecords * this.rowHeight + 'px';
}
}

if(this.virtualScrollCallback) {
this.virtualScrollCallback();
this.virtualScrollCallback = null;
}
}

setScrollHeight() {
Expand Down Expand Up @@ -129,8 +134,11 @@ export class ScrollableView extends Component {
this.props.onVirtualScroll({
page: page
});

this.virtualScrollCallback = () => {
this.scrollTable.style.top = ((page - 1) * pageHeight) + 'px';
}
}
this.scrollTable.style.top = ((page - 1) * pageHeight) + 'px';
}
}
}
Expand Down
153 changes: 110 additions & 43 deletions src/showcase/datatable/DataTableScrollDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,46 +41,46 @@ export class DataTableScrollDemo extends Component {
setTimeout(() => {
this.setState({
lazyCars: [
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first||'0'},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 1},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 2},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 3},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 4},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 5},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 6},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 7},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 9},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 11},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 12},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 13},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 14},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 15},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 16},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 17},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 18},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 19},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 20},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 21},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 22},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 23},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 24},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 25},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 26},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 27},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 28},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 29},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 30},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 31},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 32},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 33},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 34},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 35},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 36},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 37},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 38},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 39}
]
})
}, 250);
Expand Down Expand Up @@ -175,6 +175,7 @@ import React, { Component } from 'react';
import {DataTable} from 'primereact/components/datatable/DataTable';
import {Column} from 'primereact/components/column/Column';
import {CarService} from '../service/CarService';
import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
export class DataTableScrollDemo extends Component {
Expand All @@ -183,15 +184,20 @@ export class DataTableScrollDemo extends Component {
this.state = {
cars: null,
lazyCars: null,
lazyTotalRecords: 0,
frozenCars: null
};
this.carservice = new CarService();
this.loadCarsLazy = this.loadCarsLazy.bind(this);
}
componentDidMount() {
this.carservice.getCarsLarge().then(data => {
this.setState({
cars: data,
lazyCars: null,
lazyTotalRecords: 250000,
frozenCars: [
{"brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23"},
{"brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23"}
Expand All @@ -200,24 +206,85 @@ export class DataTableScrollDemo extends Component {
});
}
loadCarsLazy(event) {
//for demo purposes keep loading the same dataset
//in a real production application, this data should come from server by building the query with LazyLoadEvent options
setTimeout(() => {
this.setState({
lazyCars: [
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first||'0'},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 1},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 2},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 3},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 4},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 5},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 6},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 7},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 8},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 9},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 10},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 11},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 12},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 13},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 14},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 15},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 16},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 17},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 18},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 19},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 20},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 21},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 22},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 23},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 24},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 25},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 26},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 27},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 28},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 29},
{"brand": "VW", "year": 2012, "color": "Orange", "vin": event.first + 30},
{"brand": "Audi", "year": 2011, "color": "Black", "vin": event.first + 31},
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": event.first + 32},
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": event.first + 33},
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": event.first + 34},
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": event.first + 35},
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": event.first + 36},
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": event.first + 37},
{"brand": "Ford", "year": 2000, "color": "Black", "vin": event.first + 38},
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": event.first + 39}
]
})
}, 250);
}
render() {
return (
<div>
<div className="content-section">
<DataTableSubmenu />
<div className="content-section introduction">
<div className="feature-intro">
<h1>DataTable - Scroll</h1>
<p>Data scrolling with fixed header is available horizontally, vertically or both. ScrollHeight and ScrollWidth values can either be fixed pixels or percentages. Certain columns can be fixed as well.
Virtual Scrolling mode is available to deal with large datasets by loading data on demand during scrolling..</p>
Virtual Scrolling mode is available to deal with large datasets by loading data on demand during scrolling.</p>
</div>
</div>
<div className="content-section implementation">
<div className="content-section implementation">
<DataTable header="Vertical" value={this.state.cars} scrollable={true} scrollHeight="200px">
<Column field="vin" header="Vin" />
<Column field="year" header="Year" />
<Column field="brand" header="Brand" />
<Column field="color" header="Color" />
</DataTable>
<DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true}
rows={10} totalRecords={this.state.lazyTotalRecords} lazy={true} onLazyLoad={this.loadCarsLazy} style={{marginTop:'30px'}}>
<Column field="vin" header="Vin" />
<Column field="year" header="Year" />
<Column field="brand" header="Brand" />
<Column field="color" header="Color" />
</DataTable>
<DataTable header="Horizontal and Vertical" value={this.state.cars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '600px'}}>
<Column field="vin" header="Vin" style={{width:'250px'}} />
Expand Down

0 comments on commit fc71f28

Please sign in to comment.