-
Notifications
You must be signed in to change notification settings - Fork 782
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New filtering behavior + default filter definition
- Loading branch information
Showing
27 changed files
with
1,223 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| 'use strict'; | ||
| import React from 'react'; | ||
| import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; | ||
|
|
||
| var products = []; | ||
|
|
||
| var qualityType = { | ||
| 0: "good", | ||
| 1: "bad", | ||
| 2: "unknown" | ||
| }; | ||
|
|
||
| function addProducts(quantity) { | ||
| var startId = products.length; | ||
| const startDate = new Date(2015, 0, 1); | ||
| const endDate = new Date(); | ||
| for (var i = 0; i < quantity; i++) { | ||
| const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())); | ||
| var id = startId + i; | ||
| products.push({ | ||
| id: id, | ||
| name: "Item name " + id, | ||
| quality: i%3, | ||
| price: Math.floor((Math.random() * 100) + 1), | ||
| satisfaction: Math.floor(Math.random() * 6), | ||
| inStockDate: date | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| addProducts(5); | ||
|
|
||
| function enumFormatter(cell, row, enumObject){ | ||
| return enumObject[cell]; | ||
| } | ||
|
|
||
| function dateFormatter(cell, row) { | ||
| return `${("0" + cell.getDate()).slice(-2)}/${("0" + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; | ||
| } | ||
|
|
||
| var satisfaction = [0, 1, 2, 3, 4, 5]; | ||
|
|
||
| export default class AllFilters extends React.Component{ | ||
| render(){ | ||
| return ( | ||
| <BootstrapTable data={products}> | ||
| <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="name" filter={{type: "TextFilter", placeholder: "Please enter a value"}}>Product Name</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="quality" filter={{type: "SelectFilter", options: qualityType}} dataFormat={enumFormatter} formatExtraData={qualityType}>Product Quality</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="price" filter={{type: "NumberFilter", delay: 1000}}>Product Price</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="satisfaction" filter={{type: "NumberFilter", options: satisfaction}}>Buyer Satisfaction</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="inStockDate" filter={{type: "DateFilter"}} dataFormat={dateFormatter}>In Stock From</TableHeaderColumn> | ||
| </BootstrapTable> | ||
| ); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| 'use strict'; | ||
| import React from 'react'; | ||
| import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; | ||
|
|
||
| var products = []; | ||
|
|
||
| function addProducts(quantity) { | ||
| var startId = products.length; | ||
| for (var i = 0; i < quantity; i++) { | ||
| var id = startId + i; | ||
| products.push({ | ||
| id: id, | ||
| name: "Item name " + id, | ||
| isInStock: (i%3 == 0) ? "yes" : "no" | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| addProducts(5); | ||
|
|
||
| class CheckboxFilter extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.filter = this.filter.bind(this); | ||
| this.isFiltered = this.isFiltered.bind(this); | ||
| } | ||
|
|
||
| filter(event) { | ||
| if (this.refs.nokCheckbox.checked && this.refs.okCheckbox.checked) { | ||
| // all checkboxes are checked means we want to remove the filter for this column | ||
| this.props.filterHandler(); | ||
| } else { | ||
| this.props.filterHandler({callback: this.isFiltered}); | ||
| } | ||
| } | ||
|
|
||
| isFiltered(targetValue) { | ||
| if (targetValue === "no") { | ||
| return (this.refs.nokCheckbox.checked); | ||
| } else { | ||
| return (this.refs.okCheckbox.checked); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <input ref="okCheckbox" type="checkbox" className="filter" onChange={this.filter} defaultChecked={true} /><label>{this.props.textOK}</label> | ||
| <input ref="nokCheckbox" type="checkbox" className="filter" onChange={this.filter} defaultChecked={true} style={{marginLeft: 30 + "px"}} /><label>{this.props.textNOK}</label> | ||
| </div> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| CheckboxFilter.propTypes = { | ||
| filterHandler: React.PropTypes.func.isRequired, | ||
| textOK: React.PropTypes.string, | ||
| textNOK: React.PropTypes.string | ||
| }; | ||
|
|
||
| CheckboxFilter.defaultProps = { | ||
| textOK: "OK", | ||
| textNOK: "Not OK" | ||
| } | ||
|
|
||
| function getCustomFilter(filterHandler, customFilterParameters){ | ||
| return ( | ||
| <CheckboxFilter filterHandler={filterHandler} textOK={customFilterParameters.textOK} textNOK={customFilterParameters.textNOK} /> | ||
| ); | ||
| } | ||
|
|
||
| export default class CustomFilter extends React.Component{ | ||
| render(){ | ||
| return ( | ||
| <BootstrapTable data={products}> | ||
| <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="isInStock" filter={{type: "CustomFilter", getElement: getCustomFilter, customFilterParameters: {textOK: 'yes', textNOK: 'no'} }}>Product Is In Stock</TableHeaderColumn> | ||
| </BootstrapTable> | ||
| ); | ||
| } | ||
| }; |
38 changes: 38 additions & 0 deletions
38
examples/js/column-filter/date-filter-with-default-value.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| 'use strict'; | ||
| import React from 'react'; | ||
| import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; | ||
|
|
||
| var products = []; | ||
|
|
||
| function addProducts(quantity) { | ||
| var startId = products.length; | ||
| const startDate = new Date(2015, 0, 1); | ||
| const endDate = new Date(); | ||
| for (var i = 0; i < quantity; i++) { | ||
| const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())); | ||
| var id = startId + i; | ||
| products.push({ | ||
| id: id, | ||
| name: "Item name " + id, | ||
| inStockDate: date | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| addProducts(5); | ||
|
|
||
| function dateFormatter(cell, row) { | ||
| return `${("0" + cell.getDate()).slice(-2)}/${("0" + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; | ||
| } | ||
|
|
||
| export default class DateFilterWithDefaultValue extends React.Component{ | ||
| render(){ | ||
| return ( | ||
| <BootstrapTable data={products}> | ||
| <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="inStockDate" dataFormat={dateFormatter} filter={{type: "DateFilter", defaultValue: new Date(2015,7,22)}}>In Stock From</TableHeaderColumn> | ||
| </BootstrapTable> | ||
| ); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| 'use strict'; | ||
| import React from 'react'; | ||
| import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; | ||
|
|
||
| var products = []; | ||
|
|
||
| function addProducts(quantity) { | ||
| var startId = products.length; | ||
| const startDate = new Date(2015, 0, 1); | ||
| const endDate = new Date(); | ||
| for (var i = 0; i < quantity; i++) { | ||
| const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())); | ||
| var id = startId + i; | ||
| products.push({ | ||
| id: id, | ||
| name: "Item name " + id, | ||
| inStockDate: date | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| addProducts(5); | ||
|
|
||
| function dateFormatter(cell, row) { | ||
| return `${("0" + cell.getDate()).slice(-2)}/${("0" + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`; | ||
| } | ||
|
|
||
| export default class DateFilter extends React.Component{ | ||
| render(){ | ||
| return ( | ||
| <BootstrapTable data={products}> | ||
| <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn> | ||
| <TableHeaderColumn dataField="inStockDate" dataFormat={dateFormatter} filter={{type: "DateFilter"}}>In Stock From</TableHeaderColumn> | ||
| </BootstrapTable> | ||
| ); | ||
| } | ||
| }; |
Oops, something went wrong.