jQuery DataTables plug-in has native support for child rows with row().child API methods. Child rows can be used to show extra details that do not fit into the main table. These rows are initially hidden and can be shown by clicking on expand/collapse control 
.
Child rows are also used by Responsive extension to display columns that do not fit the screen.
Solution depends on whether you use Responsive extension for your table powered by jQuery DataTables.
- Expand/collapse all child rows in a regular table
- Expand/collapse all child rows in a table with Responsive extension
Expand/collapse child rows in a regular table
There is an example on DataTables website demonstrating how to use child rows. I used it to show how to open all child rows in a regular table.
Expand/collapse child rows in a table with Responsive extension
Solution
Opening all child rows in a table with Responsive extension requires a different approach.
We need isolate rows that have child rows closed. These rows will not have parent class. Then we need to trigger a click event on the first cell of such row to force Responsive extension to expand a child row.
table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
Hello Is there any way to expand collapse all rows for nested table like:
https://stackoverflow.com/questions/62575674/expand-collapse-all-with-nested-table-jquery-datatables
thanks a lot for help
Answered your question on StackOverflow.
Hello, can I get the full code in one html file as I cannot get it to run well
You can right click on any jsFiddle example and select This Frame – View Frame Source (Firefox) or View frame source (Chrome) from the context menu.
Hi, i need all row default open in mobile. is it possible
From the Stackoverflow answer you provided, that is exactly what I’m looking for! No clue why I couldn’t ever find a table inside a table approach. thank you for that. Also, I have to apologize as I’m a beginner JavaScript/jQuery dev, but do you have an example of doing that same way but the data is coming from a SharePoint REST API call to a list?
Is it possible to make column values clickable to see more details.
Lets say, if i click Chief Executive Officer (CEO) i see details related to CEO and if i click on London i see details related to London.
So basically i want to replace collapse and expand functionality of button with columns values.
It’s possible but you would need to do it without row().child API methods. See this example for some inspiration.
Booom, that’s what i was looking for. Thanks Michael.
I want when I expand one column than other expand column should automatically collapse. Is it possible
Please see this example.
with responsive extension
Hi,
I went through your article and also i have implemented it in my code.its working fine.but the thing is that now i got new requirement like expanding single row at a time i.e. if i click on first row it will expand now if click on second row then first row should get collapse and second should get expand. how can i do that? could you please help me out with that?
Hi,
thank you for your article. Is it possible to expand all columns in all pages? At the moment this works only in the first page.
I thank you in advance,
Alessia
Can you please help me implement this in spring boot
How to add multiple child rows not just one?
You can control what you display in the
formatfunction. There is a way to display nested tables and even use jQuery DataTables plugin for nested tables, please see this post as an example.In my opinion, it’s better to use row grouping or RowGroup extension when you need to group rows by certain criteria.
thanks i implemented it ,working fine thanks