How to do Ascending and Descending Sorting of Table in React

In this article,we are going to make a program which does sorting of ascending and descending nature ,we choose multiple columns of table to done sorting.

App.js file is displayed below:

1import "./styles.css";
2import React from "react"
3const title = "React Sorting articles";
4import Articles from './Articles'
5
6export default class App extends React.Component {
7 constructor(props)
8 {
9   super(props)
10   this.state={
11    articlesList:[{
12      title:"hi",
13      upvotes:1,
14      date:"2014-09-12"
15    },{ title:"Moiz",
16    upvotes:2,
17    date:"2018-09-12"},{ title:"hasan",
18    upvotes:3,
19    date:"2017-09-12"}]
20   }
21 };
22  sortByUpvotes = () => {
23  var newArticles = [];
24  Object.assign(newArticles, this.state.articlesList);
25  newArticles.sort((a, b) => {
26    if (a.upvotes > b.upvotes) {
27      return -1;
28    }
29    if (a.upvotes < b.upvotes) {
30      return 1;
31    }
32    return 0;
33  });
34
35  this.setState({
36    articlesList:newArticles
37  })
38}
39sortByUpvotesleast = () => {
40  var newArticles = [];
41  Object.assign(newArticles, this.state.articlesList);
42  newArticles.sort((a, b) => {
43    if (a.upvotes < b.upvotes) {
44      return -1;
45    }
46    if (a.upvotes > b.upvotes) {
47      return 1;
48    }
49    return 0;
50  });
51
52  this.setState({
53    articlesList:newArticles
54  })
55}
56 sortByDates = () => {
57  var newArticles = [];
58  Object.assign(newArticles, this.state.articlesList);
59  newArticles.sort((a, b) => {
60    const aDate = new Date(a.date);
61    const bDate = new Date(b.date);
62    if (aDate > bDate) {
63      return -1;
64    }
65    if (aDate < bDate) {
66      return 1;
67    }
68    return 0;
69  });
70
71 this.setState({
72   articlesList:newArticles
73 })
74};
75sortByDatesleast = () => {
76  var newArticles = [];
77  Object.assign(newArticles, this.state.articlesList);
78  newArticles.sort((a, b) => {
79    const aDate = new Date(a.date);
80    const bDate = new Date(b.date);
81    if (aDate < bDate) {
82      return -1;
83    }
84    if (aDate > bDate) {
85      return 1;
86    }
87    return 0;
88  });
89
90 this.setState({
91   articlesList:newArticles
92 })
93};
94  render() {
95    return  <div className="App">
96    <h1> {title} </h1>
97    <div className="layout-row align-items-center justify-content-center my-20 navigation">
98      <label className="form-hint mb-0 text-uppercase font-weight-light">
99        Sort By
100      </label>
101      <button
102        data-testid="most-upvoted-link"
103        className="small"
104        onClick={() => this.sortByUpvotes()}
105      >
106        Most Upvoted
107      </button>
108      <button
109        data-testid="most-recent-link"
110        className="small"
111        onClick={() => this.sortByDates()}
112      >
113        Most Recent
114      </button>
115      <button
116        data-testid="most-recent-link"
117        className="small"
118        onClick={() => this.sortByUpvotesleast()}
119      >
120        Least Upvoted
121      </button>
122      <button
123        data-testid="most-recent-link"
124        className="small"
125        onClick={() => this.sortByDatesleast()}
126      >
127        Least Recent
128      </button>
129    </div>
130    <Articles articles={this.state.articlesList} />
131  </div>;
132  }
133}

Articles.js file is all about the mapping of array of objects in table

1import React from "react"
2export default class Articles extends React.Component {
3  render() {
4    return  <div className="card w-50 mx-auto">
5    <table style={{ border: "1px solid black",borderCollapse: "collapse"}}>
6      <thead style={{ border: "1px solid black",borderCollapse: "collapse"}}>
7        <tr style={{ border: "1px solid black",borderCollapse: "collapse"}}>
8          <th>Title</th>
9          <th>Upvotes</th>
10          <th>Date</th>
11        </tr>
12      </thead>
13      <tbody>
14        {this.props.articles.map((article, index) => {
15          return (
16            <tr style={{ border: "1px solid black",borderCollapse: "collapse",}}data-testid="article" key={index}>
17              <td data-testid="article-title">{article.title}</td>
18              <td data-testid="article-upvotes">{article.upvotes}</td>
19              <td data-testid="article-date">{article.date}</td>
20            </tr>
21          );
22        })}
23      </tbody>
24    </table>
25  </div>;
26  }
27}

Here is the link of live example which we done so far:
Click here