How to do a "row header" in Angular ui-grid

Question

What I'm trying to do in Angular ui-grid seems pretty common, but I'm having trouble finding anything that describes a solution.

I have a table. Like many tables the first row is really a "row header".

Now what specifically do I mean by that:

Like column headers, the values are always the same. They are not "data"
Like column headers, they are styled differently than non-header data cells to indicate that they are not "data".
You should not be able to "sort" nor "remove" the header row
Ideally, the column for the row headers is "frozen" in that it doesn't scroll

It perhaps is worth mentioning that the row header labels COME from the data as in:

{
   rowHeader : "Fixed Rate",
   TenYear:   .02,
   TwentyYear:  .03
},
{
   rowHeader : "Variable Rate",
   TenYear:   .04,
   TwentyYear:  .05
}

So what I'm looking for in the above example, is a table where the first column has row headers of "Fixed Rate" and "Variable Rate". The styling of that column should "look like" a header cell rather than a data cell.

Now I know that some of these things like "frezeing" and turning off sorting are available via columnDefs in gridOptions. But what I'm unclear of is if there's a way to just declare that the first column is a header, and I just get all of these things.

This seems to be a common table paradigm.

Kathir · Accepted Answer · 2016-08-20 01:00:45Z

This is pretty easy with row header template. You can define your own template like below

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.columns = [{ field: 'TenYear' }, { field: 'TwentyYear' }];
 var data = [{
   rowHeader : "Fixed Rate",
   TenYear:   .02,
   TwentyYear:  .03
},
{
   rowHeader : "Variable Rate",
   TenYear:   .04,
   TwentyYear:  .05
}]
  $scope.gridOptions = {
    data : data,
    enableSorting: true,
    columnDefs: $scope.columns,
    onRegisterApi: function( gridApi ) { 
      $scope.gridApi = gridApi;
      var cellTemplate = 'ui-grid/selectionRowHeader';   // you could use your own template here
      $scope.gridApi.core.addRowHeaderColumn( { name: 'rowHeaderCol', displayName: '', width: 200, cellTemplate: "<div class=\"ui-grid-row-header-cell ui-grid-disable-selection\"><div class=\"ui-grid-cell-contents\">{{row.entity['rowHeader']}}</div></div>"} );
    }
  };


}]);

Working plnkr http://plnkr.co/edit/9jZYgS3Ygaj2vhOnd2vh?p=preview

Collectives™ on Stack Overflow

How to do a "row header" in Angular ui-grid

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related