Skip to content

Commit

Permalink
add debounce-search-table example
Browse files Browse the repository at this point in the history
  • Loading branch information
madeinfree committed Mar 25, 2016
1 parent 8dc6436 commit b54f84a
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 0 deletions.
38 changes: 38 additions & 0 deletions examples/js/manipulation/debounce-search-table.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/* eslint max-len: 0 */
import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';


const products = [];

function addProducts(quantity) {
const startId = products.length;
const fruits = [ 'banana', 'apple', 'orange', 'tomato', 'strawberries', 'cherries' ];
for (let i = 0; i < quantity; i++) {
const id = startId + i;
products.push({
id: id,
name: 'Fruits: ' + fruits[i] + ' and ' + fruits[i + 1],
price: 2100 + i
});
}
}

addProducts(5);


export default class DebounceSearchTable extends React.Component {
render() {
const options = {
searchDelayTime: 500
};

return (
<BootstrapTable data={ products } search={ true } multiColumnSearch={ true } options={ options } searchPlaceholder='Search delay 500ms'>
<TableHeaderColumn dataField='id' isKey={ true } searchable={ false }>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Fruits</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Price</TableHeaderColumn>
</BootstrapTable>
);
}
}
11 changes: 11 additions & 0 deletions examples/js/manipulation/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import MultiSearchTable from './multi-search-table';
import ExportCSVTable from './export-csv-table';
import DeleteRowCustomComfirmTable from './del-row-custom-confirm';
import SearchClearTable from './search-clear-table';
import DebounceSearchTable from './debounce-search-table';

class Demo extends React.Component {
render() {
Expand Down Expand Up @@ -62,6 +63,16 @@ 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'>Debounce Search Table Example(Use searchDelayTime props to set your search delay time)</div>
<div className='panel-body'>
<h5>Source in /examples/js/manipulation/debounce-search-table.js</h5>
<h5>use <code>searchDelayTime</code> for <code>options</code> object to set delay time in search input and default is 0.</h5>
<DebounceSearchTable />
</div>
</div>
</div>
<div className='col-md-offset-1 col-md-8'>
<div className='panel panel-default'>
<div className='panel-heading'>Column Filter Example</div>
Expand Down

0 comments on commit b54f84a

Please sign in to comment.