Expand/collapse row grouping by main row?

datatables row grouping expand/collapse example
html table expand/collapse rows example
jquery datatable expand/collapse rows jsfiddle
expand/collapse child rows in a regular table
expand and collapse rows in datatable
how to group rows in excel with expand/collapse
bootstrap collapse multiple table rows
jquery datatable row grouping server side

I use datatables plugin to grouping row and want to collapse/expand sub-rows when clicking to the main row. Example on Jsfiddle and picture: Jsfiddle example

How it looks like and when click on main row then all rows between this and next main row should collapse.

When I was searching some informantion about this, I found good example, but it's not work properly with datatables js plugin CodepenExemple

$(document).ready(function() {
  var groupColumn = 2;
  var table = $('#example').DataTable({
    "columnDefs": [{
      "visible": false,
      "targets": groupColumn
    }],
    "order": [
      [groupColumn, 'asc']
    ],
    "displayLength": 25,
    "drawCallback": function(settings) {
      var api = this.api();
      var rows = api.rows({
        page: 'current'
      }).nodes();

      console.log(typeof rows);

      debugger;

      /*      rows.forEach(function(node) {
                 console.log("rows =" + node);
           }); */



      var last = null;

      api.column(groupColumn, {
        page: 'current'
      }).data().each(function(group, i) {

        if (last !== group) {
          $(rows).eq(i).before(
            '<tr class="group"><td colspan="5">' + group + '</td></tr>'
          );

          last = group;
        }
      });
    }
  });

  // Order by the grouping
  $('#example tbody').on('click', function({
    target
  }) {
    if (target.parentNode.className !== 'group') return;
    //console.log($(this).find('[role=row]'))
    $(this).find('[role=row]').slideToggle()

  });

});
tr.group,
tr.group:hover {
  background-color: #ddd !important;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2013/03/03</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>2008/10/16</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>2012/12/18</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>2010/03/17</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>2012/11/27</td>
      <td>$198,500</td>
    </tr>
  </tbody>
</table>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

A simple way for achieving that is:

let $next = $(target).parent().next();

while ($next.length && $next.is('[role=row]')) {
    $next.slideToggle();
    $next = $next.next();
};

Demo

Datatables row grouping, It would also be very useful to add expand/collapse all buttons. Can anyone help to find away to add these features? I've set up a jsfiddle to show what I'm trying to​  One of the most useful features of Excel grouping is the ability to hide and show the detail rows for a particular group as well as to collapse or expand the entire outline to a certain level in a mouse click. Collapse rows within a group. To collapse the rows in a particular group, just click the minus button at the bottom of that group's bar.

A simplified solution can be based on .nextUntil():

$(target.parentNode).nextUntil(':not([role=row])').slideToggle()

var groupColumn = 2;
var table = $('#example').DataTable({
    "columnDefs": [{
        "visible": false,
        "targets": groupColumn
    }],
    "order": [
        [groupColumn, 'asc']
    ],
    "displayLength": 25,
    "drawCallback": function(settings) {
        var api = this.api();
        var rows = api.rows({
            page: 'current'
        }).nodes();

        console.log(typeof rows);

        //debugger;

        /*      rows.forEach(function(node) {
         console.log("rows =" + node);
         }); */



        var last = null;

        api.column(groupColumn, {
            page: 'current'
        }).data().each(function(group, i) {

            if (last !== group) {
                $(rows).eq(i).before(
                        '<tr class="group"><td colspan="5">' + group + '</td></tr>'
                );

                last = group;
            }
        });
    }
});

// Order by the grouping
$('#example tbody').on('click', function({target}) {
    if (target.parentNode.className !== 'group') return;
    //console.log($(this).find('[role=row]'))
    $(target.parentNode).nextUntil(':not([role=row])').slideToggle()

});
tr.group,
tr.group:hover {
    background-color: #ddd !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<table id="example" class="display" style="width:100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
    <tr>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
    </tr>
    <tr>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>$205,500</td>
    </tr>
    <tr>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
    </tr>
    <tr>
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>$90,560</td>
    </tr>
    <tr>
        <td>Quinn Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>$342,000</td>
    </tr>
    <tr>
        <td>Charde Marshall</td>
        <td>Regional Director</td>
        <td>San Francisco</td>
        <td>36</td>
        <td>2008/10/16</td>
        <td>$470,600</td>
    </tr>
    <tr>
        <td>Haley Kennedy</td>
        <td>Senior Marketing Designer</td>
        <td>London</td>
        <td>43</td>
        <td>2012/12/18</td>
        <td>$313,500</td>
    </tr>
    <tr>
        <td>Tatyana Fitzpatrick</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>19</td>
        <td>2010/03/17</td>
        <td>$385,750</td>
    </tr>
    <tr>
        <td>Michael Silva</td>
        <td>Marketing Designer</td>
        <td>London</td>
        <td>66</td>
        <td>2012/11/27</td>
        <td>$198,500</td>
    </tr>
    </tbody>
</table>

jQuery DataTables: How to expand/collapse all child rows , 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  Group Rows in Excel with Expand/Collapse? Group Rows in Excel When the number of items in line is not important then we can choose group rows that are not important but see the subtotal of those rows only.

the same but with more agility (pure javavascript)

$('#tableEquipos tbody').on('click', function({target}) {
    if (target.parentNode.className !== 'group') return;
    var startElement = target.parentNode.nextSibling 
    while(startElement && startElement.getAttribute('role') === 'row'){
        startElement.style.display = !startElement.style.display ? 'none' : ''
        startElement = startElement.nextSibling
    }
});

Excel: Group rows automatically or manually, collapse and expand , Learn a quick way to group rows in Excel, to hide rows within a certain group, to collapse or expand the entire outline to a particular level. How to Collapse Rows within a Group. When we have a group in a Pivot table we wish to collapse, we will click on the (-) minus button at the side of the group’s bar to collapse the row. Figure 2 – Collapsing cells. If we do not have a Pivot table, we can also collapse rows in Excel by selecting any cell in the group.

How to group rows and columns in Excel, How to group rows and columns in Excel. In your Excel spreadsheet, select the cells that you want to collapse. With your cells selected, go to Data on the Ribbon toolbar. Choose “Rows” (to collapse vertically) or “Columns” (to collapse horizontally). Click OK. A collapse/expand icon will appear in the left margin for On the far right side, in the Outline group, click the Group button. Choose “Rows” (to collapse vertically) or “Columns” (to collapse horizontally). Click OK. A collapse/expand icon will appear in the left margin for rows and in the top margin for columns. You can use this to “toggle” between the open and closed states.

Expand / collapse a group · Issue #2 · DataTables/RowGroup · GitHub, tableConfig.startRender = function(rows, group) { var elem = $(' '); // Simple group header row element elem.on('click', Expand / collapse a group #2. Closed. To add expand and collapse action to a group In report design view, click the table or matrix to select it. The Grouping pane displays the row and column groups. If the Grouping pane does not appear, click the View menu and then click Grouping.

Excel, Simply select all of the rows that you want to be able to hide (collapse) but not the row Duration: 3:27 Posted: Jun 23, 2016 There is no built in option to do that. You would need to modify your code above to implement filtering as well as grouping. I'm not sure how easy that would be to be honest since your grouping code is based on the data visible in the table - you'd need to update it to take account of any rows that have been removed by filtering.

Comments
  • Thanks, you helped me! But I have one more issue, if I sorting some of the columns, main rows are duplicated, pls if you can - check.
  • or, maybe, you can advise me some good/best practice how could to achieve this.
  • @PaulChechegov if it is a new problem, you should post a new question.
  • ok, I'll try to do by myself, if it'll be difficult, I create the question.
  • Good to know about that method!