How to make only text of react bootstrap table header clickable?

The React bootstrap provides us with the bootstrap components out of the box compared to normal React, It comes with the pre-applied CSS and the themes and properties of the bootstrap component can be modified by changing the properties. The Table component in the header cell by default on click it selects the whole cell or events triggers on clicking the whole cell at any region. In this article let us see how can we make the text of the table header cell clickable on the cell apart from the other regions.

The way to achieve this is to disable the pointer events on the cell except for the text, to do so the text in the column header cell can be declared in the other element inside the <th>. If the text is declared in another element like <span> then we can give the property pointer-events as none for the <th> and the pointer-events as auto for the text inside the span element.

CSS property :

 pointer-events : none or auto 

This is used to manipulate the pointer activity when the selected element becomes the target of the pointer.

Steps to create a React Application:

Step 1: Create a react application using the following command

npx create-react-app AppName

Step 2: Once it is done change your directory to the newly created application using the following command

cd AppName

Step 3: Install React Bootstrap dependency

npm install react-bootstrap bootstrap

Step 4: Add these cdn links in the index.html

<script src=”https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js” crossorigin></script>

<script src=”https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js” crossorigin></script>

<script src=”https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js” crossorigin></script>

Step 5: Start the application

npm start

Example 1: In this example it contains a table where on clicking the text of the header cell only the color change on clicking anywhere else there will be no effect.

Javascript

import Table from "react-bootstrap/Table";
import React, { useState } from "react";

const studentsData = [
    { studentName: "geek1", courseTaken: "Data Structures and Algorithms" },
    { studentName: "geek2", courseTaken: "Frontend Web Dev" },
    { studentName: "geek3", courseTaken: "Backend Web Dev" },
    { studentName: "geek4", courseTaken: "Java Development" },
];

const App = () => {
    const [showColor, setShowColor] = useState("white");
    const [showCourseColor, setShowCourseColor] = useState("white");
    const columnClickHandler = (column) => {
        if (column === "studentName")
            showColor === "white"
                ? setShowColor("green")
                : setShowColor("white");
        if (column === "courseTaken")
            showCourseColor === "white"
                ? setShowCourseColor("blue")
                : setShowCourseColor("white");
    };

    return (
        <div className="App">
            <h1 style={{ color: "green", textAlign: "center" }}>
                {" "}
                GeeksforGeeks
            </h1>
            <h5 style={{ textAlign: "center" }}>
                {" "}
                How to make only text of react bootstrap
                table header clickable?{" "}
            </h5>
            <p></p>

            <Table striped bordered hover variant="dark">
                <thead>
                    <tr>
                        <th
                            style={{
                                cursor: "pointer",
                                pointerEvents: "none",
                                color: showColor,
                            }}
                            onClick={() => columnClickHandler("studentName")}
                        >
                            <span
                                style={{
                                    cursor: "pointer",
                                    pointerEvents: "auto",
                                }}
                            >
                                {" "}
                                studentName
                            </span>
                        </th>
                        <th
                            style={{
                                cursor: "pointer",
                                pointerEvents: "none",
                                color: showCourseColor,
                            }}
                            onClick={() => columnClickHandler("courseTaken")}
                        >
                            <span
                                style={{
                                    cursor: "pointer",
                                    pointerEvents: "auto",
                                }}
                            >
                                {" "}
                                courseTaken
                            </span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {studentsData.map((record) => (
                        <tr key={record.studentName}>
                            <td>{record.studentName}</td>
                            <td>{record.courseTaken}</td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </div>
    );
};

export default App;

Output:

Example 2: In this example it contains the student records with their roll number and marks obtained, on clicking the text of the column header the rows get sorted based on the column header.

Javascript

import React, { useState } from "react";
import Table from "react-bootstrap/Table";

const studentsData = [
    { rollNumber: 191201, studentName: "geek1", marksObtained: 10 },
    { rollNumber: 191202, studentName: "geek2", marksObtained: 20 },
    { rollNumber: 191203, studentName: "geek3", marksObtained: 30 },
    { rollNumber: 191204, studentName: "geek4", marksObtained: 25 },
    { rollNumber: 191205, studentName: "geek5", marksObtained: 46 },
    { rollNumber: 191206, studentName: "geek6", marksObtained: 50 },
];

const App = () => {
    const [columnHeader, setColumnHeader] = useState(null);
    const [orderOfSort, setOrderOfSort] = useState("ascending");

    const columnClickHandler = (column) => {
        if (columnHeader === column) {
            setOrderOfSort(
                orderOfSort === "ascending" ? "descending" : "ascending"
            );
        } else {
            setColumnHeader(column);
            setOrderOfSort("ascending");
        }
    };

    const studentDataSorted = [...studentsData].sort((a, b) => {
        if (columnHeader) {
            if (a[columnHeader] < b[columnHeader])
                return orderOfSort === "ascending" ? -1 : 1;
            if (a[columnHeader] > b[columnHeader])
                return orderOfSort === "ascending" ? 1 : -1;
        }
        return 0;
    });

    return (
        <div className="App">
            <h1 style={{ color: "green", textAlign: "center" }}>
                {" "}
                GeeksforGeeks
            </h1>
            <h5 style={{ textAlign: "center" }}>
                {" "}
                How to make only text of react bootstrap
                table header clickable?{" "}
            </h5>
            <p></p>

            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th
                            style={{ cursor: "pointer", pointerEvents: "none" }}
                            onClick={() => columnClickHandler("rollNumber")}
                        >
                            <span
                                style={{
                                    cursor: "pointer",
                                    pointerEvents: "auto",
                                }}
                            >
                                {" "}
                                rollNumber
                            </span>
                        </th>
                        <th
                            style={{ cursor: "pointer", pointerEvents: "none" }}
                            onClick={() => columnClickHandler("studentName")}
                        >
                            <span
                                style={{
                                    cursor: "pointer",
                                    pointerEvents: "auto",
                                }}
                            >
                                {" "}
                                studentName
                            </span>
                        </th>
                        <th
                            style={{ cursor: "pointer", pointerEvents: "none" }}
                            onClick={() => columnClickHandler("marksObtained")}
                        >
                            <span
                                style={{
                                    cursor: "pointer",
                                    pointerEvents: "auto",
                                }}
                            >
                                {" "}
                                marksObtained
                            </span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {studentDataSorted.map((record) => (
                        <tr key={record.rollNumber}>
                            <td>{record.rollNumber}</td>
                            <td>{record.studentName}</td>
                            <td>{record.marksObtained}</td>
                        </tr>
                    ))}
                </tbody>
            </Table>
        </div>
    );
};

export default App;

Output: