Enabling grouping in ng-table removes the pagination

Question

I'm working with ng-table and I've run into an issue with grouping. I have it so that grouping can be enabled or disabled by selecting options in a dropdown menu but enabling grouping always breaks pagination while it works fine when grouping is disabled.

Here's an example of what one of the objects in my columns array looks like:

{
  field: "payeeName",
  title: "Charity",
  sortable: "payeeName",
  filter: {
    payeeName: 'select'
  },
  classes: "td-width-150",
  show: true,
  hideOnExport: true,
  groupable: "payeeName",
  buildTemplate: function(donation, idx) {
    var str = donation.payeeName + '<br/>';
    str += '<small class="text-muted">';
    str += $filter('buildAddressLine')(donation) + '<br/>';
    str += $filter('buildRegistrationId')(donation) + '<br/>';
    if (donation.designation) {
      str += donation.designation;
    }
    str += '</small>';
    return str;
  }
}

Here are the rows that appear when grouping is either turned on or off:

<tr class="ng-table-group" ng-show="grouping" ng-repeat-start="group in $groups">
 <td>
    <a href="" ng-click="group.$hideRows = !group.$hideRows">
      <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
      <strong>{{ group.value }}</strong>
    </a>
  </td>
</tr>
<tr ng-show="grouping" ng-hide="group.$hideRows" ng-repeat="user in group.data" ng-repeat-end>
  <td ng-repeat="col in $columns track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td>
</tr>
<tr ng-show="!grouping" ng-repeat="user in $data">
  <td ng-repeat="col in cols track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td>
</tr>

Lastly, here is the function that preps the data for the table. It should be known that below this code is an API call that sets $scope.donations equal to what the endpoint returns:

var prepData = function(checkFilter) {
  var orderFilter = params.filter();
  // add grid filters to the data we loaded in get data
  var filteredData = params.filter() ? $filter('filter')($scope.donations, params.filter()) : $scope.donations;
  // apply the global filter

  filteredData = $filter('filter')(filteredData, $scope.globalTableFilter);


  var orderedData = params.sorting() ?
    $filter('orderBy')(filteredData, params.orderBy()) :
    filteredData;

  orderedData = $filter('filter')(orderedData, $scope.filterDonation);

  // Prep data for export
  $scope.exportData = angular.copy(orderedData);
  $scope.exportData.forEach(function(e) {
    e.donationDate = $filter('date')(e.donationDate, 'dd/MM/yyyy');
    e.receiptAmount = $filter('currency')(e.receiptAmount);
  });
  // recalc the pagination - MUST PRECEED THE PAGE SLICE

  params.total(orderedData.length);
  $scope.$emit('gotDonations', $scope.orderedData);

  $scope.filterDonations = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
  return $scope.filterDonations;

};

When grouping is enabled via the select input, it fires a function that looks like: $scope.tableDonationParams.group({payeeName: 'asc'})
When grouping is disabled via the select input, it fires this:
$scope.tableDonationParams.group({})

Like I said, pagination works fine whenever grouping is set to a blank object, but completely breaks when enabled.

Here is an image of my table just for clarity: https://i.sstatic.net/J3HiB.jpg

I integrated a plugin called angular-dragdrop to allow me to drag items from the sidebar into the table to be added to the columns object and also drag columns over each other to change their positioning on the table so don't let that confuse you.

Thank you for any and all help.

Answer 1

I've same problem, when paging on group data. So, i add these lines at the end on getGroups function [ng-table.js].

if (!settings.dataOptions.applyPaging) {
    return ngTableDefaultGetData(result, params);
}
return ngTableDefaultGetData.applyPaging(result, params);

The pagination working on either used default or custom.