How to Create a Collapsible Table Row using React-Bootstrap?

Last Updated : 10 Oct, 2024

React-Bootstrap is a well-liked UI toolkit that integrates Bootstrap's simplicity and elegance into the React environment. Collapsible table rows are a helpful feature for tabular data display, allowing rows to be expanded or collapsed. This article will walk you through using React-Bootstrap to create collapsible table rows.

Steps to Create React Application

Step 1: Create a React application using the following command

npx create-react-app foldername

Step 2: After creating your project folder, i.e., foldername, move to it using the following command.

cd foldername

Step 3: Install Necessary Libraries

you need to install react-bootstrap and bootstrap. You can install them via npm:

npm install react-bootstrap
npm install bootstrap

After installing these libraries, you must import the Bootstrap CSS in your main app component (e.g., App.js):

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

Project Structure:

Screenshot-2024-10-06-111216 — Project Structure

Step 4: Table with Collapsible Rows

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

JavaScript

//App.js
import React, { Component } from "react";
import { Table } from "react-bootstrap"; 
// Importing the Table component from react-bootstrap
import "bootstrap/dist/css/bootstrap.min.css"; 
// Bootstrap CSS for styling
import "bootstrap/js/src/collapse.js"; 
// Bootstrap JS for enabling collapse functionality

export class Example1 extends Component {
    render() {
        return (
            <>
                {/* Bootstrap Table with striped,
                    bordered, and hover effect */}
                <Table striped bordered hover>
                    <thead>
                        <tr>
                            {/* Table header with columns for ID, Name, and Email */}
                            <th>#</th>
                            <th>Name</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* First row (Parent) - Collapsible when clicked */}
                        <tr
                            data-toggle="collapse"
                            data-target=".multi-collapse1" 
                            // Target the first collapsible row
                            aria-controls="multiCollapseExample1">
                            <td>1</td>
                            <td>John Doe</td>
                            <td>john.doe@example.com</td>
                        </tr>
                        {/* First child row - Collapsed by default, expands 
                            when the first parent row is clicked */}
                        <tr className="collapse multi-collapse1" id="multiCollapseExample1">
                            <td>Detail A1</td>
                            <td>Detail A2</td>
                            <td>Detail A3</td>
                        </tr>

                        {/* Second row (Parent) - Collapsible when clicked */}
                        <tr
                            data-toggle="collapse"
                            data-target=".multi-collapse2" 
                            // Target the second collapsible row
                            aria-controls="multiCollapseExample2">
                            <td>2</td>
                            <td>Jane Smith</td>
                            <td>jane.smith@example.com</td>
                        </tr>
                        {/* Second child row - Collapsed by default, expands
                            when the second parent row is clicked */}
                        <tr className="collapse multi-collapse2" id="multiCollapseExample2">
                            <td>Detail B1</td>
                            <td>Detail B2</td>
                            <td>Detail B3</td>
                        </tr>

                        {/* Third row (Parent) - Collapsible when clicked */}
                        <tr
                            data-toggle="collapse"
                            data-target=".multi-collapse3"
                             // Target the third collapsible row
                            aria-controls="multiCollapseExample3">
                            <td>3</td>
                            <td>Emily Johnson</td>
                            <td>emily.johnson@example.com</td>
                        </tr>
                        {/* Third child row - Collapsed by default, 
                            expands when the third parent row is clicked */}
                        <tr className="collapse multi-collapse3" id="multiCollapseExample3">
                            <td>Detail C1</td>
                            <td>Detail C2</td>
                            <td>Detail C3</td>
                        </tr>

                        {/* Fourth row (Parent) - Collapsible when clicked */}
                        <tr
                            data-toggle="collapse"
                            data-target=".multi-collapse4" 
                            // Target the fourth collapsible row
                            aria-controls="multiCollapseExample4">
                            <td>4</td>
                            <td>Michael Brown</td>
                            <td>michael.brown@example.com</td>
                        </tr>
                        {/* Fourth child row - Collapsed by default,
                            expands when the fourth parent row is clicked */}
                        <tr className="collapse multi-collapse4"
                            id="multiCollapseExample4">
                            <td>Detail D1</td>
                            <td>Detail D2</td>
                            <td>Detail D3</td>
                        </tr>
                    </tbody>
                </Table>
            </>
        );
    }
}

export default Example1;

Output:

Conclusion

This article showed how to use React and React-Bootstrap to develop a collapsible table that would improve user interaction by enabling users to expand and display more details without overcrowding the interface. We developed a tidy and well-organized layout that enhances the user experience by using Bootstrap's collapse capability and arranging the table with parent-child relationships. By incorporating comparable features into your projects, you can showcase the adaptability of React and the strength of Bootstrap in web development by producing dynamic and responsive interfaces.

Create Navbars UI using React and Tailwind CSS

heysaiyad

Improve

Article Tags :

How to Create a Collapsible Table Row using React-Bootstrap?

Steps to Create React Application

Project Structure:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?