How to Sort React-Bootstrap Table Component ?

React-Bootstrap Table component is used to represent the data in a structured and tabular form. In many cases, the data represented in the table is on a large scale, so we need to sort them in some order. Sorting in Bootstrap Table consists of the functionality to allow the users to reorder the actual rows and their values in one or more columns. We can sort individual columns and also multiple columns. In this article, we will see how we can sort react-bootstrap Table Components in Ascending and Descending order.

Prerequisite

• React JS
• React-Bootstrap

Creating React Application and installing React-Bootstrap

• Create a React application using the following command:

npx create-react-app sort-table

• After creating your project folder(i.e. sort-table), move to it by using the following command:

cd sort-table

• Now install react-bootstrap, react-icons in your working directory i.e. sort-table by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap react-icons

• Now we need to Add Bootstrap CSS to the index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Project Structure

Approach

• We will sorting the single Age Table column in Ascending and Decendig order.
• We have defined the data in the tabData variable. We have used the useState hook to manage the table data, sorting column, order and message.
• There is sortFunction which allows us to mainly sort the age column in the ascending and desceing order.
• When we sort the column the message is been dynamically updated. The message shown is nothing but the order of sorting.

Example:

Javascript

import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState } from "react";
import { Table } from "react-bootstrap";
import { FaArrowUp, FaArrowDown } from "react-icons/fa";
const tabData = [
    { id: 1, name: "Geek1", age: 30 },
    { id: 2, name: "Geek2", age: 25 },
    { id: 3, name: "Geek3", age: 35 },
    { id: 4, name: "Geek4", age: 28 },
    { id: 5, name: "Geek5", age: 22 },
    { id: 6, name: "Geek6", age: 40 }
];
function App() {
    const [data, setData] = useState(tabData);
    const [sort_Age, set_Sort_Age] = useState("age");
    const [sort_Order, set_Sort_Order] = useState("asc");
    const [sort_Msg, set_Sort_Msg] = useState("");
    const sortFunction = (f) => {
        if (f === "age") {
            if (sort_Age === "age") {
                set_Sort_Order(sort_Order === "asc" ? "desc" : "asc");
                set_Sort_Msg(
                    `Table is Sorted in ${sort_Order ===
                        "asc" ? "Ascending" : "Descending"
                    } Order`
                );
            } else {
                set_Sort_Age("age");
                set_Sort_Order("asc");
                set_Sort_Msg(`Table is Sorted in Descending Order`);
            }
        } else {
            set_Sort_Msg("Sorting is disabled for this column");
        }
        const sorted = [...data].sort((a, b) => {
            const multi = sort_Order === "asc" ? 1 : -1;
            return multi * (a["age"] - b["age"]);
        });
        setData(sorted);
    };
    return (
        <div className="App">
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h3>Ascending and Descending Example 1</h3>
            <p>{sort_Msg}</p>
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th onClick={() => sortFunction("age")}>
                            Age{" "}
                            {sort_Age === "age" &&
                                (sort_Order === "asc" ?
                                    <FaArrowUp /> : <FaArrowDown />)}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {data.map((item) => (
                        <tr key={item.id}>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                            <td>{item.age}</td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </div>
    );
}
export default App;

Steps to Run the Application

• Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output