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 &&