Sort table by clicking on the column header

Question

I'm new to ReactJS. I have created a table with 2 columns. Here is my code:

import React, { useState, useEffect } from 'react'
import { getUsers } from '../../services/userService'
import { useNavigate } from 'react-router-dom'
import Pagination from '@mui/material/Pagination'

const Table = () => {

    const navigate = useNavigate()

    const [users, setUsers] = useState([]);
    const [currentUsers, setCurrentUsers] = useState([]);
    const [search, setSearch] = useState('');
    const [sorting, setSorting] = useState({ key: "name", ascending: true });

    const pageItemCount = 15
    const [pageCount, setPageCount] = useState(0)
    const [currentPage, setCurrentPage] = useState(1)

    useEffect(async () => {
        try {
            const response = await getUsers(search);
            setUsers(response.data.users);
            setPageCount(Math.ceil(response.data.users.length / pageItemCount))
            setCurrentUsers(response.data.users.slice(0, pageItemCount))
        } catch (error) { }
    }, [search]);


    /**************************************** */
    useEffect(() => {
        const currentUsersCopy = [...currentUsers];
    
        const sortedCurrentUsers = currentUsersCopy.sort((a, b) => {
          return a[sorting.key].localeCompare(b[sorting.key]);
        });
    
        setCurrentUsers(
          sorting.ascending ? sortedCurrentUsers : sortedCurrentUsers.reverse()
        );
    }, [currentUsers, sorting]);
    /*************************************** */

    function applySorting(key, ascending) {
        setSorting({ key: key, ascending: ascending });
    }

    /************************************** */

    const changePage = (i) => {
        setCurrentPage(i)
        const startItem = ((i - 1) * pageItemCount) + 1
        setCurrentUsers(users.slice(startItem - 1, (pageItemCount * i)))
    }

    const handleChange = (event, value) => {
        changePage(value);
    }

    return (
        
            
                
                    
                     setSearch(e.target.value)} value={search} />
                
                
                
                    
                
            



            
                    {currentUsers.map((item, index) =>
                        
                    )}
                
                
                    
                         applySorting('name', !sorting.ascending)}>name
                         applySorting('name', !sorting.ascending)}>phone
                    
                
                
                            {item.name}
                            {item.phone} 
                        
            
            
        
    )
}

export default Table

I'm trying to sort this table by clicking on each column header. I tried to apply the solutions suggested in link1 and link2, but I have not been successful yet. How can I do this?

Edited: I edited my code and added the full code of my table.

user_7291317 · Answer

I'm trying to sort this table by clicking on each column header.

One of the possible solution to achieve this type of functionality is to store current state of the sorting. To do this we can use useState hook

const [sorting, setSorting] = useState({ field: 'name', ascending: false })

As you can see, useState function accepts default value. In our case the default value will be the sorting default state. The field property tells which column to sort by, and ascending prop says in which order it should be sorted.

Next, we need to set event handlers to each header of the column.

 
    applySorting('name', !sorting.ascending)}>name
    applySorting('phone', !sorting.ascending)}>phone

By clicking the column header we call the function applySorting which says what column should be sorted.

 function applySorting(key, ascending) {
   setSorting({ key: key, ascending: ascending });
 }

The last thing thing we need to do is to sort your data stored in currentUsers variable.

This part of the code is tricky a bit, because it uses useEffect hook. You can read the React documentation to understand how it works.

Let's say this function will be called by React everytime you change the current state of your sorting variable.

  useEffect(() => {
    // Copy array to prevent data mutation
    const currentUsersCopy = [...currentUsers];

    // Apply sorting
    const sortedCurrentUsers = currentUsersCopy.sort((a, b) => {
      return a[sorting.key].localeCompare(b[sorting.key]);
    });

    // Replace currentUsers with sorted currentUsers
    setCurrentUsers(
      // Decide either currentUsers sorted by ascending or descending order
      sorting.ascending ? sortedCurrentUsers : sortedCurrentUsers.reverse()
    );
  }, [currentUsers, sorting]);

I created this example on codesandbox where you can play around with this approach. Link to working example

I hope you enjoy learning React!

Sort table by clicking on the column header

1 Answers