fix issue13

docs/index.md

@@ -182,3 +182,25 @@ Example:
 
 type: `array`  
 
+
+### `header`
+
+Wether show header infomation. Defaults true. you can set it to false or object as argument
+
+if `header` is true, header will show. **Default**
+if `header` is false, header won't show.
+if `header` is blank object, header won't show too.
+if `header` is equal to above like-code, header will show.
+
+Example:
+```javascript
+{
+  "first": "Category",
+  "second": "Operator",
+  "third": "Value"
+}
+
+```
+type: `object` or `bool`
+defaultValue: `true`
+

example/src/ExampleTable.jsx

@@ -22,6 +22,11 @@ var ExampleTable = React.createClass({
               value: 'Dec 8, 1980 10:50 PM',
             },
           ],
+      header: {
+        first: "Category1",
+        second: "Operator1",
+        third: "Value1"
+      },
     }
   },
 
@@ -81,6 +86,7 @@ var ExampleTable = React.createClass({
           }}
           onChange={this.updateFilter}
           value={this.state.filter}
+          header={this.state.header}
         />
         <GriddleWithCallback
           getExternalResults={this.getJsonData} filter={JSON.stringify(this.state.filter)}

src/tokenizer/index.js

@@ -167,6 +167,21 @@ export default class Tokenizer extends Component {
      * ```
      */
     operators: PropTypes.object,
+    /**
+     * A mapping of headers to show
+     * Example:
+     * ```javascript
+     * {
+     *    "first": "Category",
+     *    "second": "Operator",
+     *    "third": "Value"
+     * }
+     * ```
+     */
+    header: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.bool,
+    ]),
   }
 
   static defaultProps = {
@@ -182,6 +197,7 @@ export default class Tokenizer extends Component {
       number: [ `==`, `!=`, `<`, `<=`, `>`, `>=` ],
       date: [ `==`, `!=`, `<`, `<=`, `>`, `>=` ],
     },
+    header: true,
   }
 
   constructor( ...args ) {
@@ -190,12 +206,25 @@ export default class Tokenizer extends Component {
     this._onKeyDown = this._onKeyDown.bind( this );
     this._getOptionsForTypeahead = this._getOptionsForTypeahead.bind( this );
     this._removeTokenForValue = this._removeTokenForValue.bind( this );
-  }
 
-  state = {
-    selected: this.getStateFromProps( this.props ),
-    category: '',
-    operator: '',
+    let header = {
+      first: 'Category',
+      second: 'Operator',
+      third: 'Value',
+    };
+
+    if ( typeof this.props.header === 'boolean' ) {
+      header = this.props.header ? header : {};
+    } else if ( Object.prototype.toString.call( this.props.header ) === '[object Object]' ) {
+      header = this.props.header;
+    }
+
+    this.state = {
+      selected: this.getStateFromProps( this.props ),
+      category: '',
+      operator: '',
+      header,
+    };
   }
 
   componentDidMount() {
@@ -268,12 +297,12 @@ export default class Tokenizer extends Component {
 
   _getHeader() {
     if ( this.state.category === '' ) {
-      return 'Category';
+      return this.state.header.first;
     } else if ( this.state.operator === '' ) {
-      return 'Operator';
+      return this.state.header.second;
     }
 
-    return 'Value';
+    return this.state.header.third;
   }
 
   _getCategoryType( category ) {

src/typeahead/index.js

@@ -39,7 +39,7 @@ class Typeahead extends Component {
 
   static defaultProps = {
     options: [],
-    header: 'Category',
+    header: '',
     datatype: 'text',
     customClasses: {},
     defaultValue: '',

src/typeahead/selector.js

@@ -118,9 +118,11 @@ export default class TypeaheadSelector extends Component {
       )
     , this );
 
+    const first = this.props.header ? ( <li className="header">{ this.props.header }</li> ) : null;
+
     return (
       <ul className={ classList }>
-        <li className="header">{ this.props.header }</li>
+        { first }
         { results }
       </ul>
     );