How do I reorder row groups to be at the bottom of the table?

How do I reorder row groups to be at the bottom of the table?

wafskwafsk Posts: 7Questions: 1Answers: 0
edited January 2022 in Free community support

Hello, the included example @ https://datatables.net/extensions/rowgroup/examples/initialisation/endRender.html that is shown on the documentation for row grouping / sums of columns is perfect. However, the row is displayed at the bottom of each group rather than all at the bottom of the table. If I have multiple groups, I'd like for all the rows to be displayed at the bottom of the table at once. Is this possible? Thank you. If this can be shown by just using the example on the site, that would be nice.

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    There isn't an option for RowGroup to display the groups at the bottom of the table. You could use footerCallback for this. You could perform a sum for each unique column data by using an object with the key being the column data. Loop through the rows and keep a running total of each column data, for example each office would look like this:

    {
      London: 132,
      New York: 489,
    ....
    }
    

    Then display the object in the returned HTMl at the end of the `-option footerCallback. See this example.

    Kevin

  • wafskwafsk Posts: 7Questions: 1Answers: 0

    Hello @kthorngren, thank you for the swift reply.

    To my understanding, first I need to create an empty dict to hold the unique key (i.e. London, New York). Then I loop through each row doing the following:

    1) Check if that unique key exists, if so add to the key's sum value.
    2) If it does not exist, add the key and value.

    Also, I'm not sure how to display each value on a separate "row".

    Again, thank you for your help as I am a beginner coder. It is very much appreciated.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    Sounds like you got the idea. Here is a simple example:
    http://live.datatables.net/jidapica/1/edit

    Its based on the footerCallback example. It uses rows().every() to loop all the rows. Builds an office object with running totals from the Age column. It then generates HTML output with </br> for the line break and updates one th in the footer. The output can be formatted in any way you choose.

    Kevin

  • wafskwafsk Posts: 7Questions: 1Answers: 0

    Thank you for the reply @kthorngren.

    It seems the example is broken as I get a 404 Not Found error. If you could try to show me the example again, I appreciate your help on this matter!

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    The links I posted work for me. Maybe its a browser issue.

    Kevin

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    Here is the code in case you still can't open the link:

      $('#example').DataTable( {
        "footerCallback": function ( row, data, start, end, display ) {
          var api = this.api();
    
          var office = {};
    
          // Remove the formatting to get integer data for summation
          var intVal = function ( i ) {
            return typeof i === 'string' ?
              i.replace(/[\$,]/g, '')*1 :
            typeof i === 'number' ?
              i : 0;
          };
    
          // Loop through the rows to sum the ages of each office
          api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();
    
            var key = data[2];
    
            if ( ! office.hasOwnProperty( key ) ) {
              office[key] = 0;
            }
    
            office[key] += intVal(data[3]);
          } );
          
          
          var html = '';  // Output
          var keys = Object.keys(office);
    
          // Build HTML output
          keys.forEach((key, index) => {
            html += key + ': ' + office[key] + '</br>';
          });
    
          // Update footer
          $( api.column( 1 ).footer() ).html(
            html
          );
        }
      } );
    

    Kevin

  • wafskwafsk Posts: 7Questions: 1Answers: 0

    @kthorngren Thank you for your help. It was indeed my browser forcing https on the link.

  • wafskwafsk Posts: 7Questions: 1Answers: 0

    @kthorngren Hello, I tried to implement additional rows as such:

                keys.forEach((key, index) => {
                    html += '<tr><th>'+ key + ': ' + office[key] + '</br></th></tr>';
                });
    

    But it is appending rows inside of one row. Is there a way to make multiple rows? Thank you.

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

    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

  • wafskwafsk Posts: 7Questions: 1Answers: 0
    edited January 2022

    Hello @colin .
    http://live.datatables.net/wavepuke/1/edit?html,css,js,output

    I have attached a test case to this reply. This uses @kthorngren 's example he provided above. I am trying to get each unique key on a new row.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    You can built your on footer. This example creates a footer if it doesn't exist then empties the footer the appends the rows you want. You can use CSS to style the footer how you want. See the CSS tab.
    http://live.datatables.net/mulehevu/1/edit

    Kevin

  • wafskwafsk Posts: 7Questions: 1Answers: 0

    Thank you so much!

Sign In or Register to comment.