Master the React Collapsing Table For Better Data Display

In modern web development, displaying complex data in a structured and easily digestible format is critical for enhancing user experience. The React Collapsing Table is an ideal solution to present large datasets while maintaining a clean and intuitive interface. This technique allows you to collapse and expand table rows, making it highly suitable for applications with vast amounts of data that need to be displayed in a structured and user-friendly manner.

In this article, we will go over how to build and optimize a React Collapsing Table, focusing on advanced techniques using React, React Bootstrap, and custom components. We'll delve into the mechanics behind collapsible rows, the use of parent-child row relationships, and how to effectively handle data rendering. By the end of this post, you will have the knowledge needed to create an efficient React Collapsing Table for any project.

Understanding the React Collapsing Table

A React Collapsing Table allows users to view detailed data on-demand by expanding or collapsing table rows. This feature is often used in data-heavy applications like dashboards, admin panels, or reporting tools. In a typical table, rows are displayed in a linear format, but a collapsing table row provides the ability to hide or show additional information dynamically.

The table is designed to display a parent row, which, when clicked, will reveal child rows. These child rows contain further detailed information related to the parent row, making it easy for users to access extra data without overwhelming them with unnecessary content at first glance.

How Does the Collapsing Table Work?

In the context of React, a collapsing table is primarily built using state management to control which rows are expanded or collapsed. Typically, this involves toggling a boolean value that controls the visibility of additional collapsible rows under each parent row.

In this section, we will look at the core components and concepts involved in building a React Collapsing Table.

Key Components of a React Collapsing Table

1. Table Row Structure: A collapsible table row should be structured such that each row can either be expanded or collapsed to show more or less content.

2. React Bootstrap Integration: React Bootstrap offers ready-made components such as tables and collapse elements, which help speed up the development process.

3. Custom Components and Functions: Custom functions are crucial to handle row expansion logic, including toggling the visibility of child rows.

Creating a Basic React Table with Collapsible Rows

Let's walk through how to build a basic collapsing table with React Bootstrap and custom components.

1import React, { useState } from 'react';
2import { Table, Collapse } from 'react-bootstrap';
3
4const CollapsibleTable = ({ data }) => {
5  const [openRows, setOpenRows] = useState([]);
6
7  const handleRowClick = (id) => {
8    setOpenRows(prevState =>
9      prevState.includes(id) ? prevState.filter(rowId => rowId !== id) : [...prevState, id]
10    );
11  };
12
13  return (
14    <Table striped bordered hover>
15      <thead>
16        <tr>
17          <th>Column 1</th>
18          <th>Column 2</th>
19          <th>Column 3</th>
20        </tr>
21      </thead>
22      <tbody>
23        {data.map((row, index) => {
24          const isOpen = openRows.includes(index);
25          return (
26            <>
27              <tr key={index} onClick={() => handleRowClick(index)}>
28                <td>{row.column1}</td>
29                <td>{row.column2}</td>
30                <td>{row.column3}</td>
31              </tr>
32              <Collapse in={isOpen}>
33                <tr>
34                  <td colSpan="3">{row.details}</td>
35                </tr>
36              </Collapse>
37            </>
38          );
39        })}
40      </tbody>
41    </Table>
42  );
43};
44
45export default CollapsibleTable;

In the above example, we use React Bootstrap's Table and Collapse components to display a table. We also create a custom function to handle the toggling of rows based on the user's interaction. The handleRowClick function updates the openRows state, adding or removing row IDs from the list of expanded rows. When a row is clicked, it reveals the child row, which contains additional details.

Advanced Features for Data Display

A React Collapsing Table can be extended in various ways to enhance its features, making it even more useful in data-heavy applications.

Nested Collapsing Rows

In some cases, a parent row can have its own set of child rows, which in turn can have additional collapsible rows. This forms a multi-level collapsible row structure, ideal for more complex datasets.

1const NestedCollapsibleTable = ({ data }) => {
2  const [openRows, setOpenRows] = useState([]);
3
4  const handleRowClick = (id) => {
5    setOpenRows(prevState =>
6      prevState.includes(id) ? prevState.filter(rowId => rowId !== id) : [...prevState, id]
7    );
8  };
9
10  return (
11    <Table striped bordered hover>
12      <thead>
13        <tr>
14          <th>Column 1</th>
15          <th>Column 2</th>
16        </tr>
17      </thead>
18      <tbody>
19        {data.map((parentRow, index) => {
20          const isParentRowOpen = openRows.includes(index);
21          return (
22            <>
23              <tr key={index} onClick={() => handleRowClick(index)}>
24                <td>{parentRow.column1}</td>
25                <td>{parentRow.column2}</td>
26              </tr>
27              <Collapse in={isParentRowOpen}>
28                <tr>
29                  <td colSpan="2">
30                    <Table striped bordered hover>
31                      <thead>
32                        <tr>
33                          <th>Child Column 1</th>
34                          <th>Child Column 2</th>
35                        </tr>
36                      </thead>
37                      <tbody>
38                        {parentRow.childRows.map((childRow, childIndex) => (
39                          <tr key={childIndex}>
40                            <td>{childRow.childColumn1}</td>
41                            <td>{childRow.childColumn2}</td>
42                          </tr>
43                        ))}
44                      </tbody>
45                    </Table>
46                  </td>
47                </tr>
48              </Collapse>
49            </>
50          );
51        })}
52      </tbody>
53    </Table>
54  );
55};

​

In the above code, each parent row can contain child rows, which themselves can also have collapsible rows, forming a multi-tier collapsible table. This functionality can be highly beneficial when working with hierarchical data, such as organizational structures or product categories.

Customizing the Collapsing Table with React Bootstrap

React Bootstrap simplifies the creation of collapsing tables by providing well-structured components like Collapse, Table, and more. For greater control, you can easily style the table with custom CSS or use additional React Bootstrap features like pagination, sorting, and filtering.

Here is how you can integrate custom CSS to improve the visual appeal of the collapsing table:

1.table th, .table td {
2  text-align: center;
3  padding: 10px;
4  border: 1px solid #ddd;
5}
6
7.table .collapse-row {
8  background-color: #f7f7f7;
9}
10
11.table {
12  width: 100%;
13  border-collapse: collapse;
14}
15
16.table th {
17  background-color: #4CAF50;
18  color: white;
19}
20
21.table tr:nth-child(even) {
22  background-color: #f2f2f2;
23}
24
25.table tr:hover {
26  background-color: #ddd;
27}

This CSS snippet centers the text in each cell and adds a background color to the collapsible rows, helping differentiate them visually from the static rows.

The Bottom Line!

Mastering the React Collapsing Table involves understanding how to manage the collapse and expansion of rows effectively while maintaining an intuitive UI for the user. By combining React Bootstrap, custom components, and state management techniques, you can build a highly interactive and user-friendly table for displaying complex data.

React Collapsing Tables are an ideal solution for handling large datasets, and with the proper implementation of parent-child relationships and collapsible rows, you can significantly improve data presentation.

By integrating these custom functions and React components, you can easily modify and extend your table to handle a variety of use cases. Keep experimenting with features such as sorting, filtering, and multi-level collapsibility to further improve your React Collapsing Table implementation and optimize the user experience.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.