example on how to use floats in grid

it was initially unclear to me how to get
floats to behave properly with sort + filter,
so hopefully this helps someone

examples/js/column-filter/demo.js

@@ -11,6 +11,7 @@ import DateFilter from './date-filter';
 import DateFilterWithDefaultValue from './date-filter-with-default-value';
 import CustomFilter from './custom-filter';
 import AllFilter from './all-filters';
+import FloatFilter from './float-filter';
 
 class Demo extends React.Component {
     render() {
@@ -61,6 +62,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">Floating point number Filter Example</div>
+                        <div className="panel-body">
+                            <h5>Source in /examples/js/column-filter/float-filter.js</h5>
+                            <FloatFilter />
+                        </div>
+                    </div>
+                </div>
                 <div className="col-md-offset-1 col-md-8">
                     <div className="panel panel-default">
                         <div className="panel-heading">Number Filter With Default Value Example</div>

examples/js/column-filter/float-filter.js

@@ -0,0 +1,54 @@
+'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,
+            price: (i*2 + Math.random()).toFixed(2),
+        });
+    }
+}
+
+function formatFloat(cell, row) {
+    console.log('formatFloat:', cell);
+    return parseFloat(cell);
+}
+
+var sortFloat = function(l, r, order) {
+    var left = parseFloat(l.price);
+    var right = parseFloat(r.price);
+    if (order === 'desc') {
+        return right - left;
+    }
+    else {
+        return left - right;
+    }
+};
+
+addProducts(5);
+
+export default class FloatFilter extends React.Component{
+    render(){
+        return (
+            <BootstrapTable data={products}>
+                <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
+                <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
+                <TableHeaderColumn dataField="price"
+                    filter={{type: "NumberFilter", delay: 1000, numberComparators: ["=", ">", "<"]}}
+                    dataSort={true}
+                    dataFormat={formatFloat}
+                    filterFormatted={true}
+                    sortFunc={sortFloat}>
+                    Product Price
+                </TableHeaderColumn>
+            </BootstrapTable>
+        );
+    }
+};