Nested Tables
Nested Tables
hnhegde
Posts: 68Questions: 17Answers: 0
I searched and found many questions regarding this topic. But not a solution I am looking for. My question is same as this: https://www.datatables.net/forums/discussion/30379 .
I have a dataTable with some rows. If user clicks on a row, that row should expand out and display a table within. Something like the "Accordion" effect in bootstrap. Any ideas from experts here how to achieve this functionality? Appreciate your inputs,
Regards,
Harsha
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Allan might have a better idea but let me provide some ideas:
One way could be to use an Editor instance to display that nested table using an Editor template designed as a table: https://editor.datatables.net/examples/simple/template.html
In addtion you could use an in table form control in your parent table. Clicking on it would open the Editor instance that shows the child table:
https://editor.datatables.net/examples/simple/inTableControls.html
You could try this feature, recently added
https://github.com/DataTables/Plugins/blob/master/features/slidingChild/js/sliding-child.js
There is an example here
Http://datahandler.uk
You just need to tell the child row to render an HTML table and then initialise a DataTable in it as normal.
If we use this example as the basis for this, change the
formatfunction to return the HTML for the DataTable you want and then after therow.child( format(row.data()) ).show();line just add:Allan
Thanks a lot for your valuable inputs - rf1234, datahandler & allan. I tried out datahandler's solution and allan's. I am sure rf1234's solution may work as well.
Regards,
Harsha
I was required to develop something like this. You can check my project here https://andrejgajdos.github.io/nested-datatables/
@Sarge, Thanks for responding. I looked at your example. What I am trying to achieve is a bit different. I am trying to align the inner table rows with the parent table header. See screenshot attached for reference. Any ideas?
Thanks,
Harsha
Assuming that the inner table has an identical number of columns, don't return a table tag, just return the
trelements you want to add. DataTables will insert them into the host table as if they were normal rows, thus giving alignment.Allan
Thanks Alan!
Hi Allan,
I tried returning
tr, But problem am facing is,DataTables will insert them into the host table as if they were normal rows, this is not happening. Instead i got(have a look at images attached),trtags included in childtd colspan="10"element. Please provide an example, it will be helpful.thanks and regards,
-Shashidhar
Can you show me your code please? It might be that you need to return
trnodes rather than a jQuery instance - add.toArray()at the end of yourreturnline to have jQuery return a plain array of nodes.Allan
@allan Are you able to post an example that i can follow what you mean?
where that is returning two
trnodes.If that isn't working for you, please link to a page showing the issue so I can help to debug it.
Allan
$( row.child() ).DataTable();
This line thows error when I return <tr> tag instead of
<
table> tag in my format function.
DataTables warning: Non-table node initialisation ({tag}).
Please let me know how can i add child rows to parent rows which follows the settings of the existing dataTable.
Hi @sarjijit ,
That sounds like a different issue to this thread, so would be worth raising as a new issue. The problem though by the sounds of it is that you're trying to initialise something that isn't a valid HTML table...
Cheers,
Colin
Thanks @colin for the response.
If you can see the above image, the nested Table columns are not in sync with the Parent table columns indentation. I have followed the steps mentioned by @allan in the above comments but was not able to achieve the sync between parent columns and child columns.
Yep, Allan was saying to add two rows in an array -
It looks like you're trying to initialise the table - not add a couple of rows. It would be worth creating a test case so we can see what's what. 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
Dear @collin
It will be very tough to provide the test case in the link provided as I am using various other data source.
But I can attach my code here, if it helps and also can provide some additional info.
Test cases make it easier for us, so if you could abstract out the problem, that will significantly help...
Hi All. I've run into a similar issue. For a 6-column table, I'd like the rightmost three columns to align for both parent and child. I'm passing an HTML string containing just the <tr> elements, but they do not seem to inherit the parent's style.
Here's the test case: http://live.datatables.net/mixejopa/1/edit
Any advice on this is appreciated!
Hi @mj0seph ,
As Allan said above, you need to return a node - see your modified example here.
Cheers,
Colin
Thanks, @colin, that worked!
I am getting a "Non-table node initilisation" error even when I am inserting a table as a child to a row.
Here are the steps I am performing to test out the functionality
myRow = stagingTable.row(0);
myRow.child('<tr><td>it works!</td></tr>').show();
$( myRow.child() ).DataTable();
Lines 1 and 2 work as expected, but line 3 throws the error! Anyone have ideas?
What are you trying to do with this statement?
Are you wanting the child to be a Datatable?
Even though Allan suggested it above it doesn't appear that
$( myRow.child() ).DataTable();is going to work and results in the message you noted.Maybe what you are looking for is in the example of Colin's last post?
Kevin
Close, but not really. I need the children to be their own tables, as I wish for them to have a different set of columns/data than the parents.
You can create anything you want. In the examples the format function is used to generate the desired HTML.
Kevin
.... I can't create anything that I want. That is the problem. In order to declare my own columns I need to create a seperate datatable. When I attempt to do that it returns the "Non-table node initilisation" error message.
Hi @Akolyte01 ,
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
Do you want the child to be a Datatable? Or do you want it to be a simple HTML table?
Both you and Sarijit mentioned that using
$( myRow.child() ).DataTable();results inNon-table node initializationerror. And I confirmed that it doesn't appear to work. Don't try using$( myRow.child() ).DataTable();, its not going to work.If you want a simple HTML table then use the format function to create the
tablealong with thetheadand rows. If you ware wanting the child to be a Datatable then maybe this example will help you get started.http://live.datatables.net/gohefoki/1/edit
As Colin mentioned in order to help debug your code please post a link to your page or a test case. Feel free to update mine or Colin's.
Kevin
Hey colin, thanks
I have replicated my issue in this test case here: http://live.datatables.net/raqeliko/1/edit?html,output
As you can see, simply adding a child to a row works fine. However, initializing this child as a DataTable does not work. This means I am unable to use datatable features like columnDefs, selectors etc for the child.
What I am ultimately trying to accomplish is dividing the data that currently exists in my outer table (the one with the node, device, filename, etc. columns) by their parent node. Each parent node would be a row, which would expand to show the data relevant to that node. However I want to maintain the functionality I currently have that leverages row selection and other datatable features.
Didn't see your message before I replied kthorngren. That's exactly what I need! Thank you