Custom Child Rows with Responsive plugin

sharf

I have a datatable that I'm only using a few columns of, and have set up a child row as per this page. I have made some slight adjustments to it (such as making the entire row clickable instead of a control column, and rather than nesting another table, I'm using the bootstrap grid)

This works great, until you shrink the page. Columns are hidden as expected, and the expand button appears (which appears next to my custom one from above, so I have 2), and the new expand button doesn't work (doesn't show anything when clicked). However, clicking the row does expand my custom child row still.

I need to have the dynamic column removal functionality and somehow pipe those into the custom child row. I also need to hide the responsive +/- show hide button. I haven't been able to find options for these in the API.

Alternatively I could make due with the responsive plugin and having specific columns always hidden, as long as I can customize the show/hide button and make it work on row click rather than column click.

Any ideas?

colin

Hi @sharf ,

Alternatively I could make due with the responsive plugin

If you're using the Responsive extension, you don't need to implement child rows like the example you posted. Responsive uses child rows to get the shrinking/expanding effect, so they'll clash.

having specific columns always hidden

If you want them always hidden, you can use columns.visible.

as long as I can customize the show/hide button and make it work on row click rather than column click

Yep, that's possible, see here.

Cheers,

Colin

sharf

Hi @colin,

Thanks for the help, it's much appreciated!

My problems aren't quite solved yet though.

I switched to just doing the responsive plugin and removing my custom child rows bit, and that seems to be working.

by always hidden, I meant hidden from the table - but would show in the child row. This is easily accomplished by using columns.className.

I was also able to get the row select working, and I made a custom control column. However I will have some more advanced used cases I'm still not sure of.

Can I customize the child row when using responsive? For instance, there is a scenario where it will have some extra fields that will never be in the table, but I will also want the table to be responsive AND I will want an extra embedded table below it all in the child row. It seems this could be accomplished with responsive.details.renderer but I haven't checked yet.

The last little question, I didn't see an answer in your link; can I customize the responsive show/hide button (without clobbering css)? For instance I want to use font awesome icons that change when clicked. For now I've accomplished this by having an empty column that I'm manipulating with jquery when the row is clicked and what the child row's isShown() is. However I only want that column to be visible if there is a child row to show.

Thanks again!

colin

Hi @sharf ,

Can I customize the child row when using responsive?

Yep, you're right, you can create your own renderer as shown in this example here using responsive.details.renderer.

For instance I want to use font awesome icons that change when clicked

Yep, see this thread here. There are also a few others in the forum discussing similar if that's not quite what you're after,

Cheers,

Colin

sharf

Awesome, thank you!