title: How to make a table in ReactJS sortable?
body: <p>I am building a simple app in ReactJS that works with a JSON array by calling a certain API. I am then populating the results of the array in a table. I now wanted to make the columns of the table sortable. Can someone help me with that. Here is my code.</p>
  
  <pre><code>class ParentComponent extends Component {
    constructor(props) {
      super(props);
      this.state = { data: [] };
    }
  
    componentDidMount() {
      fetch("http://hostname:xxxx/yyyy/zzzz")
        .then(function(response) {
          return response.json();
        })
        .then(items =&gt; this.setState({ data: items }));
    }
  
    render() {
      var newdata = this.state.data;
  
      return (
        &lt;table className="m-table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;AccountName&lt;/th&gt;
              &lt;th&gt;ContractValue&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {newdata.map(function(account, index) {
              return (
                &lt;tr key={index} data-item={account}&gt;
                  &lt;td data-title="Account"&gt;{account.accountname}&lt;/td&gt;
                  &lt;td data-title="Value"&gt;{account.negotiatedcontractvalue}&lt;/td&gt;
                &lt;/tr&gt;
              );
            })}
          &lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  }
  
  export default ParentComponent;
  </code></pre>