ng-table grouping - initialize with rows minimised


I am using the grouping example of ng-table from

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?

Problem courtesy of: dopplesoldner


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

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

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 ($ != 'Administrator')
    $$hideRows = true;

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>
    <tr ng-hide="group.invokeInvisbility" ng-repeat="user in">

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

Solution courtesy of: j.wittwer


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 } });
Discussion courtesy of: adiii4

This recipe can be found in it's original form on Stack Over Flow.