Enable grouping programmatically

enable-grouping-programmatically.markdown

Enable grouping programmatically

Example of programmatically enabling/disabling a column for grouping within an ngTable

A Pen by Henrique on CodePen.

License.

index.html

<div ng-app="myApp" class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <h2 class="page-header">Enable grouping programmatically</h2>
      <div class="bs-callout bs-callout-info">
        <h4>Overview</h4>
        <p>A column can be enabled/disabled for grouping programmatically at runtime.</p>
        <p>In addition, the visibility of the group header row can also be toggled programmatically.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6" ng-controller="demoController as demo">
      <h3>ngTable directive</h3>
      <div style="margin-bottom: 15px">
        <label class="checkbox-inline" ng-repeat="$column in demo.boundCols|filter:demo.isGroupable">
          <input type="checkbox" ng-checked="$column.groupable()" 
                 ng-click="demo.toggleGroupability($column)" /> {{$column.title()}}
        </label>
        <span class="pipe"></span>
        <button class="btn btn-default"
                ng-click="demo.isGroupHeaderRowVisible = !demo.isGroupHeaderRowVisible">
          {{ demo.isGroupHeaderRowVisible ? 'Hide' : 'Show' }} Group Row
        </button>
      </div>
      <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-hover"
             ng-table-columns-binding="demo.boundCols" show-group="demo.isGroupHeaderRowVisible">
        <colgroup>
          <col width="60%" />
          <col width="20%" />
          <col width="20%" />
        </colgroup>
        <tr class="ng-table-group" ng-repeat-start="group in $groups">
          <td colspan="{{$groups.visibleColumnCount}}">
            <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-hide="group.$hideRows" ng-repeat="user in group.data" ng-repeat-end>
          <td sortable="'country'" data-title="'Country'" groupable="'country'" ng-if="false">
            {{user.country}}
          </td>
          <td sortable="'name'" data-title="'Name'" groupable="'name'">
            {{user.name}}
          </td>
          <td sortable="'age'" data-title="'Age'" groupable="'age'">
            {{user.age}}
          </td>
          <td sortable="'money'" data-title="'Money'">
            {{user.money}}
          </td>
        </tr>
      </table>
    </div>

   
  </div>
</div>
</div>

script.js

angular.module("myApp", ["ngTable", "ngTableDemos"]);

(function() {
  "use strict";

  angular.module("myApp").controller("demoController", demoController);
  
  demoController.$inject = ["NgTableParams", "ngTableGroupedList"];

  function demoController(NgTableParams, simpleList) {
    var self = this;
    
    self.tableParams = new NgTableParams({
      // initial grouping
      group: { country: "asc" } 
    }, {
      dataset: simpleList
    });
    self.isGroupHeaderRowVisible = true;
    
    self.isGroupable = isGroupable;
    self.toggleGroupability = toggleGroupability;
    
    ////////
    
    function isGroupable($column){
      return !!$column.groupable() || $column.groupField;
    }
    function toggleGroupability($column){
      if ($column.groupable()) {
        $column.groupField = $column.groupable();
        $column.groupable.assign(self, false);
      } else {
        $column.groupable.assign(self, $column.groupField);
      }
    }
  }
})();

(function() {
  "use strict";

  angular.module("myApp").run(configureDefaults);
  configureDefaults.$inject = ["ngTableDefaults"];

  function configureDefaults(ngTableDefaults) {
    ngTableDefaults.params.count = 5;
    ngTableDefaults.settings.counts = [];
    ngTableDefaults.settings.groupOptions = { isExpanded: false };
  }
})();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script src="https://unpkg.com/ng-table/bundles/ng-table.min.js"></script>
<script src="https://codepen.io/christianacca/pen/NqJzRo"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/ng-table/bundles/ng-table.min.css" rel="stylesheet" />
<link href="https://codepen.io/christianacca/pen/NqJzRo" rel="stylesheet" />