Answers

• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  September 2023

  Its hard to say what the problem is without seeing what you are doing. Please post a link to your page or a test case replicating the issue so we can see your solution to help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• Abisha Posts: 5Questions: 1Answers: 0

  September 2023 edited September 2023

  This is my code, As I'm not able to add any child row into the group row. While clicking 'A' cell I want to add my child row
  https://codepen.io/abisha__25/pen/vYvrbEq
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  September 2023

  Sounds like you are wanting to use this example, correct?

  I don't have a codepen account so can't save anything. I copied your code into this example:
  https://live.datatables.net/vifuguka/1/edit

  Not sure why you have style= "display:none" on the tr tag so I removed that. I added the code from the example. I modified the format function to access your array based data. I changed the order to "order": [[1, 'asc']] so it sorts the table by the grouped rows.

  Is this what you are looking for?

  Kevin
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  September 2023

  Maybe you are looking for something like this example from this thread. It uses the RowGroup Extension which replaces the code you are using from this example.

  This uses the rowGroup.startRender option to hide or display the rows under a group. It uses the variable collapsedGroups to keep track of the collapsed state of the rows. It is not a built in option however you can find other variants of the solution on the forum by searching for collapsedGroups. I believe there are options for initially collapsing the rows and adding buttons.

  Kevin
• Abisha Posts: 5Questions: 1Answers: 0

  September 2023 edited September 2023

  I'm Using "display: none" to hide the repeated value. I grouped row and Sum the row values. I'm Not having any issues on collapsedGroups.
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  September 2023

  I don't understand the issue you are trying to solve. Please provide details of how to replicate the issue you are trying to solve in your test case.

  Kevin
• Abisha Posts: 5Questions: 1Answers: 0

  September 2023 edited September 2023

  https://codepen.io/abisha__25/pen/vYvrbEq?editors=1010

  Here is my updated code. + icon is added on the GroupRow While clicking + button, I want to add new table under it.

  Inside the click function
  table.row(this).data(); return empty array .

  table.data() does not have GroupRow data
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  September 2023 edited September 2023

  Your test case is missing the code to add the classname dt-control to the column so the event handler never executes, for example:

          "columnDefs": [
              { "visible": true, "targets": 0,
              className: 'dt-control',
              orderable: false,
              data: null,
              defaultContent: ''
              } 
  

  ** I'm guessing you don't want this to show in each row but I added it for tasting.

  I added that and changed the selector from td-control to dt-control to match:

  $('#myDataTable tbody').on('click', '.dt-control', function(e){ 
  

  Now clicking the plus results in this error:

  Uncaught ReferenceError: table is not defined

  This is due to having the event handler outside the scope of where the var table variable is defined, in document.ready().

  The event handler has this code:

       $('#myDataTable tbody').on('click', '.dt-control', function(e){        
              var tr = $(this).closest('tr');
              var tabdata = tr.find('td:nth-child(2)').text();
              var row = table.row(this);
              console.log(row)
  

  The first row in the table is the row group row. This is not a Datatables row so var row = table.row(row); won't work. You can click on the second row and see that table.row(row) works:

  

  With the row group row you will need to use standard jQuery or Javascript methods to get the data in the row. You have this:

  var tabdata = tr.find('td:nth-child(2)').text();
  

  This gets the data in the category column of the row group.

  Also note the none of the Datatable's APIs will not work with the row group rows. Using row.child(dtable).show(); to show the row won't work. These APIs will only work with the table rows. The row group rows are being inserted in the the page but Datatables doesn't know anything about them. Instead of row.child(dtable).show(); you will need to use jQuery or Javascript methods to append and remove the child table elements.

  Sorry I can't save my changes as I don't have a codepen login. If you use jsfiddle or live.datatables.net then I can save the changes so you can see them.

  Kevin
• Abisha Posts: 5Questions: 1Answers: 0

  September 2023 edited September 2023

  Is there any possible way to add sub table under first row (Group Row ). My Actual need is that only
• kthorngren Posts: 21,324Questions: 26Answers: 4,949

  September 2023 edited September 2023

  There is nothing built into Datatables to do this. As I said you will need to use jQuery or Javascript methods to insert and remove the child elements. I copied your code from the last test case into the live.datatables.net environment - which I requested you do so I can make changes and save them. I made this simple example, which works similarly to the child detail rows example.
  https://live.datatables.net/rehowuji/1/edit

  It uses the class shown to keep track of whether the child is shown or not. It inserts or removes based on the .shown existence. You will need to test this solution to make sure it works for all conditions even paging.

  If you still have questions then please continue with this test case or move your work from codepen into a new live.datatables.net or jsfiddle environment so I can save changes.

  Kevin