title: Sorting on a column in a table isn't working
body: <p>I have a table displaying search results and I need to sort one of the columns alphabetically. When I click on a column I want the entries in that column to be sorted, but the method I implemented did not work. I also tried using Lodash's <code>sortBy</code> method but that still did not sort the column properly.</p>
  
  <pre><code>import React, { PropTypes, Component } from 'react';
  import {
    Panel,
    Button,
    Col,
    PageHeader,
    ControlLabel,
    FormControl,
    HelpBlock,
    FormGroup,
    Checkbox,
    Form,
    Radio,
    InputGroup,
    Glyphicon
  } from 'react-bootstrap';
  
  import FormControlFeedback from 'react-bootstrap/lib/FormControlFeedback';
  import FormControlStatic from 'react-bootstrap/lib/FormControlStatic';
  import InputGroupAddon from 'react-bootstrap/lib/InputGroupAddon';
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        respData: []
      };
  
      this.handleSubmit = this.handleSubmit.bind(this
      this.myFunction = this.myFunction.bind(this);
      this.setArrow = this.setArrow.bind(this);
      this.onSort = this.onSort.bind(this);
    }
  
    handleSubmit(event) {
      event.preventDefault();
      const form = event.target;
      const data = new FormData(form);
      const arrayValue = [];
      var i = 0;
      console.log('Data from Form:', data);
      for (let name of data.keys()) {
        const input = form.elements[name];
        const parserName = input.dataset.parse;
        const parsedValue = data.get(name);
        console.log('name', name);
        console.log('parsedValue', parsedValue);
        if (typeof parsedValue == 'undefined' || parsedValue == null) {
          console.log('Not Undefined or Not Null');
          arrayValue[i] = '';
          data.set(name, arrayValue[i]);
        } else {
          data.set(name, parsedValue);
          arrayValue[i] = parsedValue;
        }
  
        i = i + 1;
      }
  
      var response_data = '';
      var response_jsonObj;
      var txt = '';
      var req = {
        RequestString: [
          {
            field1: arrayValue[0],
            field2: arrayValue[1],
            field3: arrayValue[2],
            field4: arrayValue[3],
            field5: arrayValue[4],
            field6: arrayValue[5],
            field7: arrayValue[6],
            field8: arrayValue[7],
            field9: arrayValue[8],
            field10: arrayValue[9],
            field11: arrayValue[10],
            field12: arrayValue[11],
            field13: arrayValue[12]
          }
        ]
      };
  
      console.log('req string :' + req);
  
      fetch('API_URL', {
        headers: {
          Accept: 'application/json, text/plain, application/xml,  */*',
          'Content-Type': 'application/json',
          'Access-Control-Allow-Headers': 'Content-Type'
        },
        method: 'POST',
        body: JSON.stringify(req)
      })
        .then(response =&gt; {
          if (response.status !== 200) {
            console.log('Problem in fetching');
            return;
          }
          //  this.setState({respData: response.data});
  
          response.text().then(data =&gt; {
            console.log('Data in Console', data);
            response_data = data;
            console.log('Response Data', response_data);
            response_jsonObj = JSON.parse(response_data);
            console.log('Response JSON Object', response_jsonObj);
          });
        })
        .catch(error =&gt; this.setState({ error }));
    }
  
    myFunction() {
      var input, filter, table, tr, td, i;
      input = document.getElementById('search');
      filter = input.value.toUpperCase();
      console.log('input in searchFunction:', input);
      console.log('filter in searchFunction:', filter);
      table = document.getElementById('Search-Table');
      console.log('table in searchFunction:', table);
      tr = table.getElementsByTagName('tr');
      console.log('tr in searchFunction:', tr);
      for (i = 0; i &lt; tr.length; i++) {
        td = tr[i].getElementsByTagName('td')[0];
        console.log('td in for before if:', tr);
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
            tr[i].style.display = '';
          } else {
            tr[i].style.display = 'none';
          }
        }
      }
    }
  
    onSort = (column) =&gt; (e) =&gt; {
          const direction = this.state.sort.column ? (this.state.sort.direction === 'asc' ? 'desc' : 'asc') : 'desc';
          const sortedData = this.state.respData.sort((a, b) =&gt; {
            if (column === 'Field1') {
              const nameA = a.Field1.toUpperCase(); // ignore upper and lowercase
              const nameB = b.Field1.toUpperCase(); // ignore upper and lowercase
              if (nameA &lt; nameB) {
                return -1;
              }
              if (nameA &gt; nameB) {
                return 1;
              }
  
              // names must be equal
              return 0;
            }
          });
  
  
  
  
          if (direction === 'desc') {
            sortedData.reverse();
          }
  
          this.setState({
            respData: sortedData,
            sort: {
                direction,
                  column,
      }
          });
        };
  
        setArrow = (column,className) =&gt; {
          let current_className = className;
  
          if (this.state.sort.column === column) {
            current_className += this.state.sort.direction === 'asc' ? ' asc' : ' desc';
          }
  
          console.log(current_className);
  
          return current_className;
        };
    render() {
      return (
        &lt;div id="SampleDiv"&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;table cellspacing="30"&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 1&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field1"
                      name="field1"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 2&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field2"
                      name="field2"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 3&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field3"
                      name="field3"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 4&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field4"
                      name="field4"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 5&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field5"
                      name="field5"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 6&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field6"
                      name="field6"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 7&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field7"
                      name="field7"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 8&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field8"
                      name="field8"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 9&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field9"
                      name="field9"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 10&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field10"
                      name="field10"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 11&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field11"
                      name="field11"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 12&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field12"
                      name="field12"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;ControlLabel&gt;Field 13&lt;/ControlLabel&gt;
                    &lt;FormControl
                      id="field13"
                      name="field13"
                      type="text"
                      placeholder="Enter Text"
                    /&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
                &lt;td /&gt;
                &lt;td&gt;
                  &lt;FormGroup&gt;
                    &lt;Button bsStyle="primary" type="submit"&gt;
                      Search{' '}
                    &lt;/Button&gt;
                    {'  '}
                    &lt;Button bsStyle="primary" type="reset"&gt;
                      Clear{' '}
                    &lt;/Button&gt;
                  &lt;/FormGroup&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
  
            &lt;div className="row ng-scope"&gt;
              &lt;div className="col-lg-15"&gt;
                &lt;Panel header={&lt;span&gt;Search Results&lt;/span&gt;}&gt;
                  &lt;div
                    id="dataTables-example_filter"
                    className="dataTables_filter"
                  &gt;
                    &lt;label htmlFor={'search'}&gt;
                      Search:
                      &lt;input
                        type="search"
                        className="form-control input-sm"
                        placeholder=""
                        aria-controls="dataTables-example"
                        id="search"
                        onKeyUp={this.searchFunction}
                      /&gt;
                    &lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;div className="table-responsive"&gt;
                    &lt;table
                      id="Search-Table"
                      className="table table-striped table-bordered table-hover"
                    &gt;
                      &lt;thead&gt;
                        &lt;tr&gt;
                          &lt;th className="sorting_asc" onClick={this.onSort('Field 1','asc')} aria-sort="ascending"
                       aria-label="Field1 :activate to sort column descending"
                       aria-controls="dataTables-example" 
                       rowSpan="1"
                       colSpan="1"
                       tabIndex="0"&gt;Field 1
                       &lt;span className={this.setArrow('Field 1')}&gt;&lt;/span&gt;
                       &lt;/th&gt;
                          &lt;th&gt;Field 2&lt;/th&gt;
                          &lt;th&gt;Field 3&lt;/th&gt;
                          &lt;th&gt;Field 4&lt;/th&gt;
                          &lt;th&gt;Field 5&lt;/th&gt;
                          &lt;th&gt;Field 6&lt;/th&gt;
                          &lt;th&gt;Field 7&lt;/th&gt;
                          &lt;th&gt;Field 8&lt;/th&gt;
                          &lt;th&gt;Field 9&lt;/th&gt;
                          &lt;th&gt;Field 10&lt;/th&gt;
                        &lt;/tr&gt;
                      &lt;/thead&gt;
  
                      &lt;tbody&gt;
                        {this.state.respData.map((item, i) =&gt; {
                          return (
                            &lt;tr key={i}&gt;
                              &lt;td&gt; {item.Field1}&lt;/td&gt;
                              &lt;td&gt; {item.Field2}&lt;/td&gt;
                              &lt;td&gt; {item.Field3}&lt;/td&gt;
                              &lt;td&gt; {item.Field4}&lt;/td&gt;
                              &lt;td&gt; {item.Field5}&lt;/td&gt;
                              &lt;td&gt; {item.Field6}&lt;/td&gt;
                              &lt;td&gt; {item.Field7}&lt;/td&gt;
                              &lt;td&gt; {item.Field8}&lt;/td&gt;
                              &lt;td&gt; {item.Field9}&lt;/td&gt;
                              &lt;td&gt; {item.Field10}&lt;/td&gt;
                            &lt;/tr&gt;
                          );
                        })}
                      &lt;/tbody&gt;
                    &lt;/table&gt;
                  &lt;/div&gt;
                &lt;/Panel&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>