diff --git a/examples/js/selection/big-row-select-table.js b/examples/js/selection/big-row-select-table.js
new file mode 100644
index 000000000..f758c05f2
--- /dev/null
+++ b/examples/js/selection/big-row-select-table.js
@@ -0,0 +1,36 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+
+const products = [];
+
+function addProducts(quantity) {
+ const startId = products.length;
+ for (let i = 0; i < quantity; i++) {
+ const id = startId + i;
+ products.push({
+ id: id,
+ name: 'Item name ' + id,
+ price: 2100 + i
+ });
+ }
+}
+
+addProducts(1000);
+
+const selectRowProp = {
+ mode: 'checkbox'
+};
+
+export default class BigRowSelectTable extends React.Component {
+ render() {
+ return (
+
+ Product ID
+ Product Name
+ Product Price
+
+ );
+ }
+}
diff --git a/examples/js/selection/demo.js b/examples/js/selection/demo.js
index d15733453..4d5567edd 100644
--- a/examples/js/selection/demo.js
+++ b/examples/js/selection/demo.js
@@ -12,6 +12,7 @@ import SelectValidationTable from './select-validation-table';
import RowClickTable from './row-click-table';
import OnlySelectedTable from './only-show-selected-table';
import ExternallyManagedSelection from './externally-managed-selection';
+import BigRowSelectTable from './big-row-select-table';
class Demo extends React.Component {
render() {
@@ -126,6 +127,15 @@ class Demo extends React.Component {
+
+
+
Handle big data row select (Maybe > 1000)
+
+
Source in big-row-select-table.js
+
+
+
+
);
}
diff --git a/src/TableBody.js b/src/TableBody.js
index dd1dfe38e..77816110f 100644
--- a/src/TableBody.js
+++ b/src/TableBody.js
@@ -9,16 +9,38 @@ const isFun = function(obj) {
return obj && (typeof obj === 'function');
};
+const emptyTableRowHeight = {
+ height: 37,
+ visibility: 'hidden'
+};
+
class TableBody extends Component {
constructor(props) {
super(props);
this.state = {
- currEditCell: null
+ currEditCell: null,
+ scrollTop: 0,
+ availableHeight: 0
};
this.editing = false;
}
+ _handleTableScroll = (e) => {
+ this.setState({
+ scrollTop: e.target.scrollTop,
+ availableHeight: e.target.clientHeight
+ });
+ }
+
+ componentDidMount() {
+ this.refs.container.addEventListener('scroll', this._handleTableScroll);
+ }
+
+ componentWillUnmount() {
+ this.refs.container.removeEventListener('scroll', this._handleTableScroll);
+ }
+
render() {
const tableClasses = classSet('table', {
'table-striped': this.props.striped,
@@ -32,7 +54,17 @@ class TableBody extends Component {
const tableHeader = this.renderTableHeader(isSelectRowDefined);
const inputType = this.props.selectRow.mode === Const.ROW_SELECT_SINGLE ? 'radio' : 'checkbox';
+ const rowHeight = 37;
+ const numRows = this.props.data.length;
+ const scrollBottom = this.state.scrollTop + this.state.availableHeight;
+ const startIndex = Math.max(0, Math.floor(this.state.scrollTop / rowHeight));
+ const RowEndIndex = Math.min(numRows, Math.ceil(scrollBottom / rowHeight) + 10);
+ const RowIndex = startIndex;
+
const tableRows = this.props.data.map(function(data, r) {
+ if (r < RowIndex || r > RowEndIndex) {
+ return |
;
+ }
const tableColumns = this.props.columns.map(function(column, i) {
const fieldValue = data[column.name];
if (this.editing &&