Nested Tables

Nested Tables

hnhegdehnhegde Posts: 54Questions: 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

Answers

  • rf1234rf1234 Posts: 895Questions: 44Answers: 127

    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

  • datahandlerdatahandler Posts: 26Questions: 2Answers: 1
    Answer ✓
  • allanallan Posts: 50,303Questions: 1Answers: 7,478 Site admin
    Answer ✓

    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

  • hnhegdehnhegde Posts: 54Questions: 17Answers: 0

    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

  • SargeSarge Posts: 3Questions: 1Answers: 0

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

  • hnhegdehnhegde Posts: 54Questions: 17Answers: 0

    @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

  • allanallan Posts: 50,303Questions: 1Answers: 7,478 Site admin
    Answer ✓

    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

  • hnhegdehnhegde Posts: 54Questions: 17Answers: 0

    Thanks Alan!

  • Shashidhar.nkShashidhar.nk Posts: 21Questions: 5Answers: 0

    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

  • allanallan Posts: 50,303Questions: 1Answers: 7,478 Site admin

    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

  • yakov116yakov116 Posts: 5Questions: 1Answers: 0
    edited August 2018

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

  • allanallan Posts: 50,303Questions: 1Answers: 7,478 Site admin
    Answer ✓
    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

  • sarijitsarijit Posts: 4Questions: 1Answers: 0
    edited August 2018

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

  • colincolin Posts: 5,893Questions: 0Answers: 1,020

    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

  • sarijitsarijit Posts: 4Questions: 1Answers: 0

    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.

  • colincolin Posts: 5,893Questions: 0Answers: 1,020

    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

  • sarijitsarijit Posts: 4Questions: 1Answers: 0

    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.

  • colincolin Posts: 5,893Questions: 0Answers: 1,020

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

  • mj0sephmj0seph Posts: 5Questions: 1Answers: 0
    edited April 1

    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!

  • colincolin Posts: 5,893Questions: 0Answers: 1,020

    Hi @mj0seph ,

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

    Cheers,

    Colin

  • mj0sephmj0seph Posts: 5Questions: 1Answers: 0

    Thanks, @colin, that worked!

  • Akolyte01Akolyte01 Posts: 5Questions: 0Answers: 0

    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?

  • kthorngrenkthorngren Posts: 6,311Questions: 21Answers: 1,383

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

  • Akolyte01Akolyte01 Posts: 5Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 6,311Questions: 21Answers: 1,383

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

    Kevin

  • Akolyte01Akolyte01 Posts: 5Questions: 0Answers: 0

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

  • colincolin Posts: 5,893Questions: 0Answers: 1,020

    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

  • kthorngrenkthorngren Posts: 6,311Questions: 21Answers: 1,383

    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

  • Akolyte01Akolyte01 Posts: 5Questions: 0Answers: 0

    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.

  • Akolyte01Akolyte01 Posts: 5Questions: 0Answers: 0

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

Sign In or Register to comment.