sort table based on a certain column - reactjs

Question

I'm new to both react and Tailwind CSS. I've created a table. Table columns are related (each name in the 1st column has a related mobile number in the 2nd column). I want to add an option on each column of this table, so that when I click on the header of a column, the table rows become sorted (alphabetically or numerically) according to that column. Here is the code:
import React, { useState, useEffect } from 'react'
import { getUsers } from '../../services/userService'
const Table = () => {
const [users, setUsers] = useState([]);
const [currentUsers, setCurrentUsers] = useState([]);
const [search, setSearch] = useState('');
const [isSorted, setIsSorted] = useState(false);
const [sortedUsers, setSortedUsers] = useState([]);
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]);
const handleChange = (event, value) => {
changePage(value);
}
const sortFn = (userA, userB) => {
// sort logic here, it can be whatever is needed
// sorting alphabetically by `first_name` in this case
return userA.first_name.localeCompare(userB.first_name)
}
const toggleSort = () => {
setIsSorted(!isSorted)
}
// when `currentUsers` changes we want to reset our table
// in order to keep it in sync with actual values
// we're also sorting if we were already sorting
useEffect(() => {
if (isSorted) {
setSortedUsers(currentUsers.slice().sort(sortFn))
} else {
setSortedUsers(currentUsers)
}
}, [isSorted, currentUsers])
return (
<div dir='rtl' className='bg-background mt-10 px-5 rd1200:px-30 overflow-auto'>
<table className='w-full border-separate rounded-md'>
<thead>
<tr className='bg-text-secondary text-white shadow-sm text-center'>
<th className='p-2' onClick={(e) => toggleSort()}>name</th>
<th className='p-2' onClick={(e) => toggleSort()}>mobile</th>
</tr>
</thead>
<tbody>
{sortedUsers.map((item, index) =>
<tr key={item.id} className={index % 2 === 0 ? 'bg-white shadow-sm text-center' : 'bg-text bg-opacity-5 shadow-sm text-center'}>
<td className='text-text text-sm p-2'>{item.first_name}</td>
<td className='text-text text-sm p-2'>{item.mobile}</td>
</tr>
)}
</tbody>
</table>
</div>
)
}
export default Table
The code is working fine. The only problem is that the table is only sorted based on the first name regardless of which column header I click on (So when I click on the mobile column header, the table is still sorted based on the first_name). How can I change it, so that the table content become sorted according to the clicked column header?

Answer 1

You should have some state which holds the key which the data is currently sorted by. Whenever a header is clicked update that state to whatever column was clicked.
On every re-render you can then use the key to access the values to sort by.
Please note: This sort() function will just compare strings and numbers and will only compare if the datatype matches.
const users = [
{ fname: "Thomas", lname: "Fox", age: 51 },
{ fname: "John", lname: "Mayor", age: 18 },
{ fname: "Ronny", lname: "Bush", age: 32 },
{ fname: "Aaron", lname: "Schulz", age: 73 },
];
const cols = [
{ key: "fname", text: "First name" },
{ key: "lname", text: "Last name" },
{ key: "age", text: "Age" },
];
const Table = () => {
const [data, setData] = React.useState(users);
const [columns, setColumns] = React.useState(cols);
const [sortedBy, setSortedBy] = React.useState(columns[0].key);
console.log(`Sorting by column ${sortedBy}`);
const sorted = data.sort((a, b) => {
const aVal = a[sortedBy];
const bVal = b[sortedBy];
if (typeof aVal === "number" && typeof bVal === "number") return aVal - bVal;
else if (typeof aVal === "string" && typeof bVal === "string") return aVal.localeCompare(bVal);
return 1;
});
return (
<table>
<thead>
<tr className="">
{columns.map((col) => (
<th onClick={() => setSortedBy(col.key)}>{col.text}</th>
))}
</tr>
</thead>
<tbody>
{sorted.map((item) => (
<tr>
<td>{item.fname}</td>
<td>{item.lname}</td>
<td>{item.age}</td>
</tr>
))}
</tbody>
</table>
);
};
ReactDOM.render(<Table />, document.getElementById("root"));
th {
border: solid thin;
padding: 0.5rem;
}
table {
border-collapse: collapse;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Instead of just the key you could additionally store whether to store in ascending or descending order for example when we click on a column again we toggle the descending order.
This is just a basic example which should give you some idea on how to implement such functionality.