Sort Table Data with ReactJS | Hacker Rank ReactJS (Basic) Certification Question

Hello React Developer. In this article, we will see how you can sort a table with ReactJS. This question is also asked in the HackerRank ReactJS (Basic) Certification as Sorting Article and obviously if you are developing any E-commerce application then for sure you will have to implement such functionality in your product list for a better user interface.

Installation requirements are not that much for the application. You just need to make sure that you have NodeJS installed in your system to sort table data with ReactJS. So I m not going to take you that much time. Let's head over to the Coding part of the sort data table with ReactJS.

Create a minimal ReactJS application using the below command in your terminal.

npx create-react-app sort_table

Now you just need to do some cleaning stuff in your directory so that your directory looks clean, let's open the App.js file and add the following code in the App.js file.

Here we have created an ARTICLES array for the dataset which we will show on the table and then pass the ARTICLES array to the component of the article as props.

import React from 'react';
import './App.css';
// importing Articles component
import Articles from './components/Articles';

// defining the title of project
const title = "Sorting Table";

const App = () => {
      // articles data which will be passed to article component for rendering
      const ARTICLES = [
        {
          title: "A message to our customers",
          upvotes: 12,
          date: "2020-01-24",
        },
        {
          title: "Alphabet earnings",
          upvotes: 22,
          date: "2019-11-23",
        },
        {
          title: "Artificial Mountains",
          upvotes: 2,
          date: "2019-11-22",
        },
        {
          title: "Scaling to 100k Users",
          upvotes: 72,
          date: "2019-01-21",
        },
        {
          title: "the Emu War",
          upvotes: 24,
          date: "2019-10-21",
        },
        {
          title: "What's SAP",
          upvotes: 1,
          date: "2019-11-21",
        },
        {
          title: "Simple text editor has 15k monthly users",
          upvotes: 7,
          date: "2010-12-31",
        },
      ];

    // return jsx
    return (
        <div className="App">
            <h1>{title}</h1>
            {/* article component and passing ARTICLES as Props */}
            <Articles articles={ARTICLES}/>
        </div>
    );
}
export default App;

So I hope that you will be understood that what we did in the App.js file although each section of code is well commented for better understanding.

Now let's move towards that second part of the application. You need to create a folder named as components in the src directory and inside the components, the folder creates a file named Articles.js ( src/components/Articles.js ) and adds the following code in the Article.js file.

import React,{useState} from 'react';

function Articles({articles}) {
    // state for maintaining modification of article
    const [sortedArticle, setSortedArticle] = useState(articles);

    // sort by upVote function
    // slice function without any argument create a copy of array, it means we are not sorting the actual articles array but the copy of articles array.
    const modifyArticleByVote = ()=>{
      setSortedArticle(articles.slice().sort((current,next) => next.upvotes - current.upvotes));
    }

    // sort by bate function
    // here we are cheking that if there comes any positive difference in date of next row and current row then we will sort them (internally swap those value)
    const modifyArticleByDate = ()=>{
      setSortedArticle(articles.slice().sort((current,next) => new Date(next.date) - new Date(current.date)))
    }

    // JSX return statement
    return (
        <div className="card">
            <table id="article">
                <thead>
                <tr>
                    <th>Title</th>
                    {/* modifyArticleByVote function will invoke on click of upvotes */}
                    <th onClick={modifyArticleByVote}>Upvotes</th>
                    {/* modifyArticleByDate function will invoke on click of Date */}
                    <th onClick={modifyArticleByDate} >Date</th>
                </tr>
                </thead>
                <tbody>
                  {/* map over sorted array */}
                  {sortedArticle.map((article, index) => {
                    return(
                      <tr data-testid="article" key={index}>
                        <td data-testid="article-title">{article.title}</td>
                        <td data-testid="article-upvotes">{article.upvotes}</td>
                        <td data-testid="article-date">{article.date}</td>
                    </tr>
                  )})}
                  {/* end map */}
                </tbody>
            </table>
        </div>
    );
}

export default Articles;

So till here, we are done with the logical part of sorting table data with ReactJS but we need to provide some beauty to this table so that it looks user-friendly for that open your App.css file and add the following CSS code in your stylesheet.

.App{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width:70%;
    margin:auto;
}

.App h1{
    margin:10px 0px;
    font-size:30px;
    font-weight: 600;
}
  
#article{
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
}

td,th {
  border: 1px solid #ddd;
  padding: 12px;
  cursor: pointer;
}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #E03B8B;
  color: white;
}
@media(max-width:768px){
  #article{
    width:90vw;
  }
}

That's it we are done with our project sort table data with ReactJS | HackerRank ReactJS(Basic) Certification Question. Now run your application and you will have this nice-looking table with sort functionality in your browser.

If you want to read more articles relate to ReactJS explore these articles.

• OTP Verification using ReactJS
• How to Build a Responsive Filterable gallery using ReactJS
• Responsive Navbar Using ReactJS and CSS modules

 

If you face any error during the development of this functionality you can comment down below or contact me via email.

Best of luck with your next Hacker Rank Certification.

Thanks for reading the complete Article.