Is it possible to make the table expandable and collapsible?

sunny_s

My table right now is a Row Grouping table.

  $('#items-table').DataTable({
    'lengthMenu': [[10, 45, 80, -1], [10, 45, 80, "All"]],
    'columnDefs': [
      {//hide the index 1 column, which is company name
        'targets': [ 1 ],
        'visible': false,
      }
    ],
    orderFixed: [[1, 'asc']],
    rowGroup: {
      dataSrc: 1
    }
  });

As you can see, there're too many entries, I wonder how can I make the table expandable and collapsible? I want to only show the group name by default, and when click on the group name, the rows will expand.

Is this possible?

colin

Hi @sunny_s ,

Not by default, but this SO thread has a solution, which I created an example with here.

Cheers,

Colin

sunny_s

Hi @colin ,

Thank you for your example, I will work on it

Bindrid2

@colin Nice. I think I have a place where I am going to use that.

sunny_s

Hi @colin ,

I have some questions:
I use bootstrap 4 for styling, in your example you have

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

but when I change these to bootstrap 4 cdn, the feature is gone.

I also see that you use

<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.css" <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>

Are these all required?

Everything I'm using now for dataTable is

<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.0.3/js/dataTables.rowGroup.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.0.3/css/rowGroup.bootstrap4.min.css">

Bindrid2

@sunny_s , here is a version of @colin 's work set up to run in Bootstrap.

http://live.datatables.net/beyapupu/1/edit

colin

Thanks @bindrid , and nope, those other files aren't required - my examples tend to be mutilations of other examples, so often have unnecessary files in (I should really tidy them up)...

Bindrid2

I minimized then number of includes in my example.
But yes, Like Colin said, when tend to just copy and paste our set of includes from on example to the next to save time and looking them all up.

sunny_s

Good morning @colin and @Bindrid2 , thanks a lot for the example, very helpful!!
I have another question.

I am able to implement this feature to my table.

  //group items by department name
  let itemCollapsedGroups = {};
  let itemTable = $('#items-table').DataTable({
    'columnDefs': [
      {//hide the index 1 column, which is company name
        'targets': [ 1 ],
        'visible': false,
      }
    ],
    'paging':   false,
    'pageLength': 1,
    //use department name as the default order
    orderFixed: [[1, 'asc']],
    rowGroup: {
      dataSrc: 1,
      startRender: function (rows, group) {
          let collapsed = !!itemCollapsedGroups[group];
          rows.nodes().each(function (r) {
              r.style.display = collapsed ? 'none' : '';
          });
          // Add category name to the <tr>. NOTE: Hardcoded colspan
          return $('<tr/>').append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>').attr('data-name', group).toggleClass('collapsed', collapsed);
      }
    }
  });
  $('#items-table tbody').on('click', 'tr.group-start', function () {
        let name = $(this).data('name');
        itemCollapsedGroups[name] = !itemCollapsedGroups[name];
        itemTable.draw(false);
    });

I disable paging and hide the index 1st column, this is what it looks like:

I wonder is it possible to make all the rows collapsed by default? And then when click on group-start expand the respective rows?

Bindrid2

Take a look at https://datatables.net/examples/api/row_details.html and https://datatables.net/extensions/buttons/examples/column_visibility/columns.html as possibilities

sunny_s

hmm the documents are not very helpful...tried many methods but nothing works yet.
So after many tries, my thinking is when the table renders, make the row collapsed.

I changed

r.style.display = collapsed ? 'none' : '';

to

r.style.display = 'none';

which make the rows not visible however the click on tr.group-start they won't expand

sunny_s

UPDATE:

I made the following changes and it works!!
To avoid confusion, I change variable name "collapsed" to "expanded"

Inside the startRender function, I use

rows.nodes().each(function (r) {
          r.style.display = 'none';
          if (expanded) {
            r.style.display = '';
          }

the able now is collapsed by default, on click will expand

iecwebmast

@sunny_s
Could you please provide a complete working example of the collapsed by default code? I am not able to get it to work following the snippedt you posted above.
Thank you in advance for your help!
Laila

iecwebmast

I was finally able to get it to work. Here is a jsfiddle for anyone interested.
https://jsfiddle.net/lbriquet/k2zr5Lws/1/

Loren Maxwell

Just a quick note that hard coding the colspan can be eliminated by referencing rows.columns()[0].length:

        // Add category name to the <tr>
        return $('<tr/>')
          .append('<td colspan="'+rows.columns()[0].length+'">' + group + ' (' + rows.count() + ')</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);