Is it possible to make the table expandable and collapsible?

Is it possible to make the table expandable and collapsible?

sunny_ssunny_s Posts: 31Questions: 2Answers: 0
edited July 2018 in Free community support

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?

Replies

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @sunny_s ,

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

    Cheers,

    Colin

  • sunny_ssunny_s Posts: 31Questions: 2Answers: 0

    Hi @colin ,

    Thank you for your example, I will work on it

  • Bindrid2Bindrid2 Posts: 79Questions: 4Answers: 12

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

  • sunny_ssunny_s Posts: 31Questions: 2Answers: 0
    edited July 2018

    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">
    
  • Bindrid2Bindrid2 Posts: 79Questions: 4Answers: 12

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

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • Bindrid2Bindrid2 Posts: 79Questions: 4Answers: 12

    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_ssunny_s Posts: 31Questions: 2Answers: 0
    edited July 2018

    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?

  • sunny_ssunny_s Posts: 31Questions: 2Answers: 0

    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_ssunny_s Posts: 31Questions: 2Answers: 0
    edited July 2018

    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

  • iecwebmastiecwebmast Posts: 66Questions: 9Answers: 1

    @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

  • iecwebmastiecwebmast Posts: 66Questions: 9Answers: 1

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

  • Loren MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10
    edited April 2019

    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);
    
This discussion has been closed.