I want to do a table with accordion rows

Was wondering why a table with accordion function wouldn’t work?


I copied the html + CSS from here which says it’s bootstrap 5: Bootstrap Table collapse/expand rows - free examples & tutorial.

Tables are a bit hindering on their own when it comes to Responsive design so I wouldn’t really recommend it. If you do feel you need to though, can you tell us what it does when you do it? Maybe share the project file so people here can see what is wrong better (providing it will be something that is supposed to work of course).

Edit: I just tried it and it works fine for me here’s what I did.

  1. Create a Row, put a column inside.

  2. Add the Table component from the Table section of the Components list of Studio tab.

  3. Select a “Table Cell” in either the visual or Overview panes.

  4. Drag an Accordion component from the Components list in the Containers section of Studio Tab

  5. directly into (visually) or onto (Overview pane) the Table Cell.

  6. Turn on the Preview (it’s not going to work within BSS itself) and it should be good to go.

If it still doesn’t work then you have something conflicting with it. Check the Issues of your site using the Issues selection of the File section of the BSS Menu and see if something shows up there. Hope that helps :slight_smile:

1 Like

The example from mdbootstap will have additional CSS and js that you will need to copy over as well

1 Like

Change all the data attributes data-mdb- to data-bs- and it will work
data-bs-toggle data-bs-target data-bs-parent

1 Like

Thanks! that worked and I’ll look into whether tables will work or if some other component can do a better job for me. I’m considering maybe an accordion group, it’s for a pretty complicated pricing thing I’m doing for our association so tables were my first instinct- I have had responsiveness issues in the past with tables but the office insists on them

Thank you! I did try this out and got it to work as well, I appreciate this community.

1 Like