How to sort HTML Table in ReactJS

Question

I have array of Objects and I add my data to HTML Table. Now I need to sort my data by version. How can I do something like that in React?

  render() {
    return (
      <div>
        <div>
          <Label> We got {this.state.count} elements in our database. </Label>
        </div>
        <div>
          <Table hover striped bordered responsive size="sm" >
            <thead>
              <tr>
                <th>VERSION</th>
                <th>DATE</th>
                <th>UUID</th>
              </tr>
            </thead>
            <tbody>
              {this.state.results.map(result =>
                <tr key={result.fileId}>
                  <td>{result.VERSION}</td>
                  <td>{result.ORIGIN}</td>
                  <td>{result.UUID}</td>
                </tr>
              )}
            </tbody>
          </Table>
        </div>
      </div>
    );
  }
}

Maybe I can use some js script, but tell me how to use it, I'm new with ReactJS. My version for is 0.26.8 for example.

Max Millington · Accepted Answer · 2017-07-25 17:19:10Z

3

I would use lodash's sortBy() function here:

https://lodash.com/docs/4.17.4#sortBy

const sorted = _.sortBy(this.state.results, 'VERSION')

Then map over sorted instead of the this.state.results

answered Jul 25, 2017 at 17:19

Max Millington

4,4935 gold badges32 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TimoStaudinger · Accepted Answer · 2017-07-25 17:29:28Z

2

Simply make sure this.state.results is sorted correctly before rendering.

The simplest approach would likely be similar to the following:

  {this.state.results.sort((a, b) => a.VERSION - b.VERSION).map(result =>
    <tr key={result.fileId}>
      <td>{result.VERSION}</td>
      <td>{result.ORIGIN}</td>
      <td>{result.UUID}</td>
    </tr>
  )}

Edit: Since you stated that the version is not a numeric value, but rather a semantic versioning string, your sort function needs to be a bit more complex. I suggest you have a look at this SO question, or use one of the many available libraries covering that use case.

edited Jul 25, 2017 at 17:29

answered Jul 25, 2017 at 17:21

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

1 Comment

Alex Over a year ago

My version looks like: 0.22.6, not only one number. I forgot to add it to description. Already updated, sorry.

Anthony · Accepted Answer · 2017-07-25 17:21:44Z

1

const sorted = results.sort((x,y) => {
    return parseInt(x.VERSION) - parseInt(y.VERSION);
});

sorts in Ascending order

answered Jul 25, 2017 at 17:21

Anthony

6,5122 gold badges20 silver badges36 bronze badges

1 Comment

Alex Over a year ago

My version looks like: 0.22.6, not only one number. I forgot to add it to description. Already updated, sorry.

Collectives™ on Stack Overflow

How to sort HTML Table in ReactJS

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related