ng-table grouping - initialize with rows minimised

Question

I am using the grouping example of ng-table from http://plnkr.co/edit/CBcbkc

Right now the table is initialised with rows expanded, but I would like them to be minimised as I have over 100 records. How can I do this?

Brubeck

Answer 1

You can set group.$hideRows to true using ngInit:

<tbody ng-repeat="group in $groups" ng-init="group.$hideRows = true">

Update
I wanted to find a better solution, because the angular docs discourage using ngInit to access scope variables.

You can create a controller for each group created in the ng-repeat:

<tbody ng-repeat="group in $groups" ng-controller="groupCtrl">

Then, you can access the group object directly. One advantage of this would be the ability to conditionally expand a group:

.controller('groupCtrl', function($scope) {
  if ($scope.group.value != 'Administrator')
    $scope.group.$hideRows = true;
});

http://plnkr.co/gXfsBq

FYI
I wondered why I couldn't find any references to $hideRows in the source. It turns out that the group object doesn't have a $hideRows property until after it is clicked. To prove this, I replaced $hideRows with a made up name and it worked just the same.

  <tbody ng-repeat="group in $groups">
    <tr class="ng-table-group">
      <td colspan="{{$columns.length}}">
        <a href="" ng-click="group.invokeInvisbility = !group.invokeInvisbility">
          <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.invokeInvisbility, 'glyphicon-chevron-down': !group.invokeInvisbility }"></span>
          <strong>{{ group.value }}</strong>
        </a>
      </td>
    </tr>
    <tr ng-hide="group.invokeInvisbility" ng-repeat="user in group.data">

No wonder you couldn't find a way to initialize it.

Emendate

this is a great answer -- thx for that. quick follow-up question: the pager + grouping don't play all that nice together in ng-table. say you have a table with 2 groups, 50 rows each, and you init with groups contracted, and a pager size of 10 -- the table will only show you one row: the first group, it isn't until you up the pager limit to a number that reaches the next group that you'd see the other groups. this is problematic, and i was wondering if you had a workaround? – Quesnay

my workaround is to disable paging - but it isn't a real solution for large sets of data. counts: [], // hide page counts control total: 1, // value less than count hide pagination – Emendate

Yea, I had to do something similar. Well, with the grouping contracted on initial load, it isn't quite as bad, but if the group numbers get to be large, it becomes problematic. There's an issue filed in github for the whole pager/grouping thing -- but it looks like active dev has fallen off. I may have to take a stab at fixing the pager myself. – Quesnay

Answer 2

You can tell ngTable to not expand it via the property 'groupOptions' see below:

var table = new NgTableParams({ group: 'name' }, { dataset: users, groupOptions: { isExpanded: false } });

Bridewell

Doesn't work if you use grouping with a ngTable version < 1.0.0... :-( – Rank

Answer 3

Just add groupOptions: {isExpanded:false} in the params section.

Below is a copy of your code with the proper add-on.

$scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        groupOptions: {isExpanded:false}
    }, {
        groupBy: 'role',
        total: data.length,
        getData: function($defer, params) {
            var orderedData = params.sorting() ?
                    $filter('orderBy')(data, $scope.tableParams.orderBy()) :
                    data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

Ahlers