Topic: How could I go about implementing accordion-style child components in datatables?

Herzmann priority asked 1 year ago

As title says, I am trying to implement accordion-style collapsible child components that will appear when clicking a dropdown button on each row. A use case for example would be if the Datatable contained people with Name and LastName properties, and I would be able to click the dropdown button to either see more information regarding the person that wouldn't normally fit on the row, or see a form to change the name and last name of the person. Any ideas?

Herzmann priority answered 1 year ago

Bump, answer is not what I'm looking for.

Grzegorz Bujański staff commented 1 year ago

unfortunately datatable does not provide such an option. We are working on a more advanced version where this option will probably appear, but I can't say when it will be released.

Grzegorz Bujański staff answered 1 year ago

As a table row, you can pass custom HTML that will contain what you need. Look at this example:

const data = {
    columns: [
      { label: 'Name', field: 'name', sort: true },
      { label: 'Position', field: 'position', sort: false },
      { label: 'Office', field: 'office', sort: false },
      { label: 'Age', field: 'age', sort: false },
      { label: 'Start date', field: 'date', sort: true },
      { label: 'Salary', field: 'salary', sort: false },
    rows: [
        name: (
              <MDBAccordionItem collapseId={1} headerTitle='Tiger'>
        position: 'System Architect',
        office: 'Edinburgh',
        age: 61,
        date: '2011/04/25',
        salary: '$320,800',

Herzmann priority commented 1 year ago

Hi, apologies for the late response - this isn't quite what I'm looking for. This would be a good example of what I need.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 5.1.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: No