Allow for custom text to clear a dimension

README.md

@@ -8,6 +8,7 @@ This version fixes a couple things, and adds a couple other things. These change
 
 * Updates the standalone library to be compatible with React 15.3.2
 * Hidden column list can be sorted by providing sortHiddenColumns=true property
+* Text to clear dimension can be customized
 
 
 ---

example/demo.jsx

@@ -79,7 +79,8 @@ var Demo = React.createClass({
         </p>
 
         <div className={this.state.showInput ? 'hide' : ''}>
-          <ReactPivot rows={data}
+          <ReactPivot clearText="- Clear Dimension -"
+                      rows={data}
                       dimensions={dimensions}
                       calculations={calculations}
                       reduce={reduce}

index.jsx

@@ -27,6 +27,7 @@ module.exports = React.createClass({
       csvTemplateFormat: false,
       defaultStyles: true,
       nPaginateRows: 25,
+      clearText: '- Clear -',
       solo: null,
       hiddenColumns: [],
       hiddenColumnsSorted: false,
@@ -117,7 +118,8 @@ module.exports = React.createClass({
         <Dimensions
           dimensions={this.props.dimensions}
           selectedDimensions={this.state.dimensions}
-          onChange={this.setDimensions} />
+          onChange={this.setDimensions}
+          clearText={this.props.clearText} />
       }
 
         <ColumnControl

lib/column-control.jsx

@@ -19,7 +19,7 @@ module.exports = React.createClass({
       <div className='reactPivot-columnControl'>
         { !sorted.length ? '' :
           <select value={''} onChange={this.showColumn}>
-            <option value={''}>Hidden Columns</option>
+            <option value={''}>- Hidden Columns -</option>
             { sorted.map(function(column) {
               return <option key={column}>{column}</option>
             })}

lib/dimensions.jsx

@@ -7,6 +7,7 @@ module.exports = React.createClass({
     return {
       dimensions: [],
       selectedDimensions: [],
+      clearText: '',
       onChange: function () {}
     }
   },
@@ -21,7 +22,7 @@ module.exports = React.createClass({
         {selectedDimensions.map(this.renderDimension)}
 
         <select value={''} onChange={partial(self.toggleDimension, nSelected)}>
-          <option value={''}>Sub Dimension...</option>
+          <option value={''}>- Sub Dimension -</option>
           {self.props.dimensions.map(function(dimension) {
             return <option key={dimension.title}>{dimension.title}</option>
           })}
@@ -36,7 +37,7 @@ module.exports = React.createClass({
         value={selectedDimension}
         onChange={partial(this.toggleDimension, i)}
         key={selectedDimension} >
-        <option></option>
+        <option>{this.props.clearText}</option>
         {this.props.dimensions.map(function(dimension) {
           return (
             <option
@@ -54,6 +55,10 @@ module.exports = React.createClass({
     var dimension = evt.target.value
     var dimensions = this.props.selectedDimensions
 
+    if (dimension === this.props.clearText) {
+      dimension = '';
+    }
+
     var curIdx = dimensions.indexOf(dimension)
     if (curIdx >= 0) dimensions[curIdx] = null
     dimensions[iDimension] = dimension

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-pivot",
   "description": "React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration. (Based on David Guttman's original component)",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "author": "David Guttman <[email protected]> (http://davidguttman.com/), Joe Tennant",
   "browser": "index.jsx",
   "browserify": {