Topic: How to nest a table in an accordion that is within a datatable?

caymanlandinfo priority asked 1 year ago


*_Expected behavior_*The aim is to create a datatable (since I want the searching and filtering etc.). This datatable should have a listing of accordion items. Each accordion item should have a simple table as its body.

*_Actual behavior_*The rows of the table within the accordion's body are being added to the rows of datatable. In other words, the inner table's rows are being added to the outer table's rows. This behaviour is directly attributed to the datatable as it does not do this with a regular table. If I remove the "datatable" class from the div the problem is gone, but then I will lose all the functionalities of the datatable.

*_Resources (screenshots, code snippets etc.)_*I have also used the examples on your site and regenerated the error in your coding playground:

Here is the link to the snippet:

https://mdbootstrap.com/snippets/standard/caymanlandinfo/5434973

Notice that Mark, Jacob, and Larry are all rows from the table inside the accordion; however, they are all listed in the datatable as well.


Kamila Pieńkowska staff answered 1 year ago


Theoretically, you can place accordion within datatable if you pass your data via JS. In practice, I cannot guarantee how well this will work. https://mdbootstrap.com/snippets/standard/kpienkowska/5440524#js-tab-view

Rendering from HTML looks for rows and cells and it cannot determine if some parts are nested in accordion, modal, or something else. That's why you get doubled rows.


caymanlandinfo priority answered 1 year ago


Here is the link to the snippet:

https://mdbootstrap.com/snippets/standard/caymanlandinfo/5434973

Notice that Mark, Jacob, and Larry are all rows from the table inside the accordion; however, they are all listed in the datatable as well.


Kamila Pieńkowska staff answered 1 year ago


Please link here a published example of your snippet from Playground.


caymanlandinfo priority commented 1 year ago

Here is the link to the snippet:

https://mdbootstrap.com/snippets/standard/caymanlandinfo/5434973

Notice that Mark, Jacob, and Larry are all rows from the table inside the accordion; however, they are all listed in the datatable as well.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.0
  • Device: Computer
  • Browser: Google Chome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes