Improvement table body row render calculator

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 (
+      <BootstrapTable data={ products } selectRow={ selectRowProp } height='400'>
+          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}

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 {
             </div>
           </div>
         </div>
+        <div className='col-md-offset-1 col-md-8'>
+          <div className='panel panel-default'>
+            <div className='panel-heading'>Handle big data row select (Maybe > 1000)</div>
+            <div className='panel-body'>
+              <h5>Source in big-row-select-table.js</h5>
+              <BigRowSelectTable />
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

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 <tr style={ emptyTableRowHeight } key={ r }><td></td></tr>;
+      }
       const tableColumns = this.props.columns.map(function(column, i) {
         const fieldValue = data[column.name];
         if (this.editing &&