Topic: How could I go about implementing accordion-style child components in datatables?
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?
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.
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: (
<>
<MDBAccordion>
<MDBAccordionItem collapseId={1} headerTitle='Tiger'>
Nixon
</MDBAccordionItem>
</MDBAccordion>
</>
),
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. https://media.geeksforgeeks.org/wp-content/uploads/20200603222758/expand1Output.gif This would be a good example of what I need.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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