Responsive with Child Rows

Isaac Araujo

Guys, I implemented the child line function in my datatables, that is, with the normal screen, a + button appears to show more information.

However, I also use the Responsive option, so when the screen is reduced to the mobile version, the two buttons are displayed and there is a conflict.

How can I reconcile the use of the two?

Isaac Araujo

This is the normal mode display

And this is the ebixition with the responsive mode

zgoforth

Can you please implement a test case

Isaac Araujo

As well?

I also thought that the columns that go from the table layout, could go to a child rows.

However, I don't know how to do it

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

The Compatibility Matrix shows this for Responsive and Child Rows:

Responsive's modal display option should be enabled if used with child rows, as the default display method is to use child rows, which would override 'user space' use of child rows.

Looks like you are using Bootstrap. Here is the Bootstrap 4 modal example.

Kevin

Isaac Araujo

@kthorngren
The modal works, but I think I was not very clear.

I wish that the two buttons do not appear, that only remain either the green (child) or the blue of the responsive, and when clicking on the button, show both the child rows as well as the columns that have been shrunk due to the responsiveness

kthorngren

Ok. I would look at using the responsive-display and leaving the Responsive button. Remove the details-control class (child details button) from the column. In the responsive-display you can toggle the child using row().child().show() or row().child().hide() based on the showHide flag.

Kevin