Nested Tables

hnhegde

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

rf1234

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

datahandler

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

allan

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 format function to return the HTML for the DataTable you want and then after the row.child( format(row.data()) ).show(); line just add:

$( row.child() ).DataTable();

Allan

hnhegde

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

Sarge

I was required to develop something like this. You can check my project here https://andrejgajdos.github.io/nested-datatables/

hnhegde

@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

allan

Assuming that the inner table has an identical number of columns, don't return a table tag, just return the tr elements you want to add. DataTables will insert them into the host table as if they were normal rows, thus giving alignment.

Allan

hnhegde

Thanks Alan!

Shashidhar.nk

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), tr tags included in child td colspan="10" element. Please provide an example, it will be helpful.

thanks and regards,
-Shashidhar

allan

Can you show me your code please? It might be that you need to return tr nodes rather than a jQuery instance - add .toArray() at the end of your return line to have jQuery return a plain array of nodes.

Allan

yakov116

@allan Are you able to post an example that i can follow what you mean?

allan

return $('<tr>...</tr><tr>...</tr>').toArray();

where that is returning two tr nodes.

If that isn't working for you, please link to a page showing the issue so I can help to debug it.

Allan

sarijit

$( 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.

colin

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

sarijit

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.

colin

Yep, Allan was saying to add two rows in an array -

return $('<tr>...</tr><tr>...</tr>').toArray();

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

sarijit

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.

colin

Test cases make it easier for us, so if you could abstract out the problem, that will significantly help...

mj0seph

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!

colin

Hi @mj0seph ,

As Allan said above, you need to return a node - see your modified example here.

Cheers,

Colin

mj0seph

Thanks, @colin, that worked!

Akolyte01

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?

kthorngren

$( myRow.child() ).DataTable();

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

Akolyte01

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.

kthorngren

You can create anything you want. In the examples the format function is used to generate the desired HTML.

Kevin

Akolyte01

.... 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.

colin

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

kthorngren

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 in Non-table node initialization error. 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 table along with the thead and 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

Akolyte01

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.

Akolyte01

Didn't see your message before I replied kthorngren. That's exactly what I need! Thank you