cssreactjstwitter-bootstraphtml-tablebootstrap-accordion
How to make an html table with many nested accordion elements with bootstrap in react?
I need to make a table with several accordions that will be nested within each other.
The final result I would like to have would be like this:
I would like to create this table dynamically as I fill it with data from APIs but I already can't get it to work exactly as I want it by hard coding it with hard data.
My actual code is the following (it's a React component but I've simplify it so all the html is in the return method of the component):
import React, { useEffect, useState } from 'react';
import { FaMinus, FaPlus } from 'react-icons/fa';
const TableComponent: React.FC = () => {
return (
<>
<div className="container test">
<div>
<table className="table table-sm table-bordered table-fixed accordion" id="firstTable">
<thead>
<tr>
<th className="bg-primary">Open first accordion</th>
<th className="bg-primary">First Group of th element</th>
<th className="bg-primary">First Group of th element</th>
<th className="bg-primary">First Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#main-accordion1" data-bs-parent="#firstTable">
<th className="bg-primary">accordion button 1 <FaPlus size={20} /></th>
<td className="bg-primary">First Group of td element</td>
<td className="bg-primary">First Group of td element</td>
<td className="bg-primary">First Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="main-accordion1" data-bs-parent="#firstTable">
<td colSpan={12}>
<div>
<table className="table" id="secondTable">
<thead>
<tr>
<th className="bg-success">Open second accordion</th>
<th className="bg-success">Second Group of th element</th>
<th className="bg-success">Second Group of th element</th>
<th className="bg-success">Second Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion1" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Group of td element</td>
<td className="bg-success">Second Group of td element</td>
<td className="bg-success">Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion1" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion3" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Line of Second Group of td element</td>
<td className="bg-success">Second Line of Second Group of td element</td>
<td className="bg-success">Second Line of Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion3" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
<th className="bg-info">Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
<td className="bg-info">Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr data-bs-toggle="collapse" data-bs-target="#main-accordion2" data-bs-parent="#firstTable">
<th className="bg-primary">accordion button 1 <FaPlus size={20} /></th>
<td className="bg-primary">Second Line of First Group of td element</td>
<td className="bg-primary">Second Line of First Group of td element</td>
<td className="bg-primary">Second Line of First Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="main-accordion2" data-bs-parent="#firstTable">
<td colSpan={12}>
<div>
<table className="table" id="secondTable">
<thead>
<tr>
<th className="bg-success">Open second accordion</th>
<th className="bg-success">Second Second Group of th element</th>
<th className="bg-success">Second Second Group of th element</th>
<th className="bg-success">Second Second Group of th element</th>
</tr>
</thead>
<tbody>
<tr data-bs-toggle="collapse" data-bs-target="#sub-accordion2" data-bs-parent="#secondTable">
<th className="bg-success">accordion button 2 <FaPlus size={20} /></th>
<td className="bg-success">Second Second Group of td element</td>
<td className="bg-success">Second Second Group of td element</td>
<td className="bg-success">Second Second Group of td element</td>
</tr>
<tr className="collapse accordion-collapse" id="sub-accordion2" data-bs-parent="#secondTable">
<td colSpan={12}>
<div>
<table className="table" id="thirdTable">
<thead>
<tr>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
<th className="bg-info">Third Third Group of th element</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
<td className="bg-info">Third Third Group of td element</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</>
)
}
export default TableComponent;
This code gives me the following result:
But I still have two problems:
There is no border in my table between the cells even though in my html I have specified the
table-borderedclass, do you know what this is due to?When I open an accordion while another accordion is already open, the accordion that was already open closes automatically, does anyone know how to prevent this behavior?
The stackbitz example that was requested by StepUp:
stackbitz example with only the application
stackbitz example with react file
I've put the two link because I'm not sure which one you want, I guess it's the second one but I've put both in doubt.
Solution
Nesting so many tables inside each other makes the HTML quite unreadable. Maybe you can try to make only the <tr> elements collapse instead of using a new <table> every time.
You can make accordions stay open by omitting data-bs-parent
- CSS transitions for layout changes (as other elements are revealed in the DOM)?
- PWA specific CSS
- Display element outside of iframe
- White space coming on last of animation of feed
- Need to give a color to a menu link in html css
- Extending an underline in CSS
- Markdown and image alignment
- Offline map for a web application
- single div position using flexbox
- How to implement dark/light mode in vue3?
- Stop word-wrap dividing words
- AntDesign TabPane min-height 100%
- Is there a pure-CSS way to highlight a html table column on hover?
- How do I style a form select field, depending on selection with css or jquery?
- Disable Pinch Zoom on Mobile Web
- Placing an icon inside an input HTML
- How can I quote strings in SASS?
- SVG rect not showing up in firefox but works on chrome
- How to I make the social media icons move from the center to the right while having the logo and pages stay in the center?
- How do I repeat an image on both sides vertically?
- Add a revision number to images in symfony to avoid browser cache
- Scrollbar without fixed height/Dynamic height with scrollbar
- Block inside elements BEM-methodology
- What do curly braces in expression position mean in JavaScript?
- Css jittery text translate
- Element changes size even though width and height are set
- Why does `placeholder-shown:no-underline` work but `placeholder:no-underline` doesn't?
- how can i change the gap of only one element in a flexbox?
- Adding vertical space between html elements (divs) within the same container
- Background not visible behind the "whitespace" of a Unicode Character