AllenFang’s gists

AllenFang / number-options-filter-with-default-value.jsx

Created October 31, 2016 14:59

	satisfaction = [ 0, 1, 2, 3, 4, 5 ];

	class NumberOptionsFilterWithDefaultValue extends React.Component {
	render() {
	return (
	<BootstrapTable data={ products }>
	<TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
	<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
	<TableHeaderColumn dataField='satisfaction'
	filter={ { type: 'NumberFilter', options: satisfaction, defaultValue: { number: 3, comparator: '>=' } } }>Buyer Satisfaction</TableHeaderColumn>

AllenFang / gist:c0468129ae79f01c6b3f3e1e0eefcfbe

Created October 31, 2016 15:02

	// const startDate = new Date(2015, 0, 1);
	// const endDate = new Date();
	// new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));

	function dateFormatter(cell, row) {
	return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
	}

	class DateFilter extends React.Component {
	render() {

AllenFang / date-filter-with-default-value.jsx

Created November 3, 2016 13:39

	// const startDate = new Date(2015, 0, 1);
	// const endDate = new Date();
	// new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));

	function dateFormatter(cell, row) {
	return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
	}

	class DateFilter extends React.Component {
	render() {

AllenFang / programmatically-date-filter.jsx

Created November 3, 2016 13:45

	// const startDate = new Date(2015, 0, 1);
	// const endDate = new Date();
	// new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));

	function dateFormatter(cell, row) {
	return `${('0' + cell.getDate()).slice(-2)}/${('0' + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
	}

	class ProgrammaticallyDateFilter extends React.Component {

AllenFang / custom-filter.jsx

Created November 3, 2016 14:43


	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) {

AllenFang / float-filter.jsx

Created November 3, 2016 14:46


	function formatFloat(cell, row) {
	return parseFloat(cell);
	}

	class FloatFilter extends React.Component {
	render() {
	return (
	<BootstrapTable data={ products }>
	<TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>

AllenFang / all-filter.jsx

Created November 3, 2016 14:58

	const qualityType = {
	0: 'good',
	1: 'bad',
	2: 'unknown'
	};

	function enumFormatter(cell, row, enumObject) {
	return enumObject[cell];
	}

AllenFang / single-select.jsx

Created November 3, 2016 15:32

	const selectRowProp = {
	mode: 'radio'
	};

	class SingleSelectTable extends React.Component {
	render() {
	return (
	<BootstrapTable data={ products } selectRow={ selectRowProp }>
	<TableHeaderColumn dataField='id'>Product ID</TableHeaderColumn>
	<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

AllenFang / multi-select.jsx

Created November 3, 2016 15:33

	const selectRowProp = {
	mode: 'checkbox'
	};

	class MultiSelectTable extends React.Component {
	render() {
	return (
	<BootstrapTable data={ products } selectRow={ selectRowProp }>
	<TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
	<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>

AllenFang / unselectable.jsx

Created November 3, 2016 15:35

	const selectRowProp = {
	mode: 'checkbox',
	clickToSelect: true,
	unselectable: [ 1, 3 ] // give rowkeys for unselectable row
	};

	class UnSelectableTable extends React.Component {
	render() {
	return (
	<BootstrapTable data={ products } selectRow={ selectRowProp }>

allen AllenFang