Skip to content

Commit

Permalink
Adding infite scrolling
Browse files Browse the repository at this point in the history
  • Loading branch information
@caguthrie
caguthrie committed May 20, 2015
1 parent e8cd82c commit 76ebb1f
Show file tree
Hide file tree
Showing 11 changed files with 384 additions and 158 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ rowKey |String |specifies the property in the data array th
customMenuItems |Object |specifies custom header menu options. Each key of the given object corresponds to the title of the new menu option and the value is an object e.g. `{infoBox: "columnDataPoint"}`. `infoBox` displays a box whose contents are equal to the columnDef's columnDataPoint on hover of the menu item. As of right now, infoBox is the only supported custom menu object type. This will only appear in columns where columnDataPoint exists in columnDef.
presort |Object |specifies which column to pre-sort a rendered table. Key corresponds to a key in the data object to sort on and whose value is either `asc` or `desc` depending on wheather you would like ascending or descending sorting automatically when the table is rendered. e.g. `{date: 'asc'}`
disableExporting |boolean |if true, disables functionality to export table to XLS or PDF
disableInfiniteScrolling |boolean|If true, disables infinite scrolling and uses pagination
itemsPerScroll |integer |The number of entries to add to each "infinite scroll"

## Table Usage Example
```js
Expand Down Expand Up @@ -96,7 +98,7 @@ clearAllRowSelections() | undefined |Clears all detail and summary row selection
getRowSelectionStates() | Object |Returns an object with two entries: One with each of detail and summary row selections
addColumn(columnDef, data) | undefined | Adds (or updates by checking `colTag`) a column to the table. If `data` is passed in, `data` is replaced as the new data object in table
redoPresort() | undefined | Redos the `preSort` from the table definition.
replaceData(data) | undefined | Sets the passed in `data` to be the data object in the table
replaceData(data, stopPresort) | undefined | Sets the passed in `data` to be the data object in the table. Passing true to the second argument will not resort the selection in accordance to the preSort given when the table was created.
setStyleByKey(key, styleObj) | undefined | For a given rowKey, sets a detail row to have extra styling per the passed in styleObj.
#### Example
Expand Down
100 changes: 75 additions & 25 deletions build/ReactTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,27 +146,41 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
}
}
},
replaceData: function (data) {
replaceData: function (data, stopPresort) {
this.props.data = data;
var rootNode = createTree(this.props);
this.setState({
rootNode: rootNode,
currentPage: 1
});
var table = this;
setTimeout(function () {
table.redoPresort();
});
if( !stopPresort ) {
setTimeout(function () {
table.redoPresort();
});
}
},
setStyleByKey: function (key, style) {
this.state.extraStyle[key] = style;
this.setState({
extraStyle: this.state.extraStyle
});
},
handleScroll: function(e){
var target = $(e.target);
var scrolled = target.scrollTop();
var scrolledHeight = target.height();
var totalHeight = target.find("tbody").height();
if( scrolled / (totalHeight-scrolledHeight) > .8 ){
this.setState({
rowMultiplier: this.state.rowMultiplier + 1
});
}
},
/* ----------------------------------------- */

componentDidMount: function () {
$(this.getDOMNode()).find(".rt-scrollable").get(0).addEventListener('scroll', this.handleScroll);
setTimeout(function () {
adjustHeaders.call(this);
}.bind(this), 0);
Expand All @@ -188,11 +202,33 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
},
componentWillUnmount: function () {
window.removeEventListener('resize', adjustHeaders.bind(this));
$(this.getDOMNode()).find(".rt-scrollable").get(0).removeEventListener('scroll', this.handleScroll);
},
componentDidUpdate: function () {
adjustHeaders.call(this);
bindHeadersToMenu($(this.getDOMNode()));
},
addMoreRows: function(){
var rasterizedData = rasterizeTree({
node: this.state.rootNode,
firstColumn: this.state.columnDefs[0],
selectedDetailRows: this.state.selectedDetailRows
});


var upperBound = (this.state.rowMultiplier + 1) * this.state.itemsPerScroll;
var rowsToDisplay = [];

if( this.state.rows.length < upperBound ) {
var lowerBound = this.state.rowMultiplier * this.state.itemsPerScroll;
rowsToDisplay = rasterizedData.slice(lowerBound, upperBound);
this.state.rows = this.state.rows.concat(rowsToDisplay.map(rowMapper, this));
}
else{
rowsToDisplay = rasterizedData.slice(0, upperBound);
this.state.rows = rowsToDisplay.map(rowMapper, this);
}
},
render: function () {
var rasterizedData = rasterizeTree({
node: this.state.rootNode,
Expand All @@ -201,22 +237,15 @@ var ReactTable = React.createClass({displayName: 'ReactTable',
});

var paginationAttr = _getPageArithmetics(this, rasterizedData);
var rowsToDisplay = rasterizedData.slice(paginationAttr.lowerVisualBound, paginationAttr.upperVisualBound + 1);

var rows = rowsToDisplay.map(function (row) {
var rowKey = this.props.rowKey;
var generatedKey = generateRowKey(row, rowKey);
return (Row({
key: generatedKey,
data: row,
extraStyle: _getExtraStyle(generatedKey, this.state.extraStyle),
isSelected: _isRowSelected(row, this.props.rowKey, this.state.selectedDetailRows, this.state.selectedSummaryRows),
onSelect: this.handleSelect,
onRightClick: this.props.onRightClick,
toggleHide: this.handleToggleHide,
columnDefs: this.state.columnDefs}
));
}, this);

if( this.props.disableInfiniteScrolling ) {
var rowsToDisplay = rasterizedData.slice(paginationAttr.lowerVisualBound, paginationAttr.upperVisualBound + 1);

this.state.rows = rowsToDisplay.map(rowMapper, this);
}
else{
this.addMoreRows();
}

var headers = buildHeaders(this);
var footer = buildFooter(this, paginationAttr);
Expand All @@ -227,18 +256,24 @@ var ReactTable = React.createClass({displayName: 'ReactTable',

if (this.props.disableScrolling)
containerStyle.overflowY = "hidden";


console.log(this.state.rows.length);
return (
React.DOM.div({id: this.state.uniqueId, className: "rt-table-container"},
headers,
React.DOM.div({style: containerStyle, className: "rt-scrollable"},
React.DOM.table({className: "rt-table"},
React.DOM.tbody(null,
rows
InfiniteScroll({
loadMore: this.addMoreRows,
hasMore: this.state.hasMore,
loader: React.DOM.div({className: "loader"}, "Loading ...")},
React.DOM.table({className: "rt-table"},
React.DOM.tbody(null,
this.state.rows
)
)
)
),
footer
this.props.disableInfiniteScrolling ? footer : null
)
);
}
Expand Down Expand Up @@ -393,6 +428,21 @@ function generateRowKey(row, rowKey) {
return key;
}

function rowMapper(row){
var rowKey = this.props.rowKey;
var generatedKey = generateRowKey(row, rowKey);
return (Row({
key: generatedKey,
data: row,
extraStyle: _getExtraStyle(generatedKey, this.state.extraStyle),
isSelected: _isRowSelected(row, this.props.rowKey, this.state.selectedDetailRows, this.state.selectedSummaryRows),
onSelect: this.handleSelect,
onRightClick: this.props.onRightClick,
toggleHide: this.handleToggleHide,
columnDefs: this.state.columnDefs}
));
}

function adjustHeaders(adjustCount) {
var id = this.state.uniqueId;
if (!(adjustCount >= 0))
Expand Down
8 changes: 7 additions & 1 deletion build/ReactTableEventHandlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ function ReactTableGetInitialState() {
selectedDetailRows: selections.selectedDetailRows,
selectedSummaryRows: selections.selectedSummaryRows,
firstColumnLabel: _construct1StColumnLabel(this),
extraStyle: {}
extraStyle: {},
rows: [],
rowMultiplier: 0,
hasMoreRows: false,
itemsPerScroll: this.props.itemsPerScroll ? this.props.itemsPerScroll : 100
};
}

Expand Down Expand Up @@ -88,8 +92,10 @@ function ReactTableHandleToggleHide(summaryRow, event) {

function ReactTableHandlePageClick(page) {
this.setState({
//rowMultiplier: this.state.rowMultiplier + 1
currentPage: page
});

}

/*
Expand Down
Loading

0 comments on commit 76ebb1f

Please sign in to comment.