How to sort table by column when grid initialize?

Question

I use ui-grid in my project.

Here is declaration of the table in html:

 <div id="grid1" ui-grid="gridOptions1" class="grid"></div>

Here is defenition of the table in controller:

  app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };


 $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions1.data = data;
    });

And here is working PLUNKER!

My question is how to sort table by Gender column when grid initialize?

NTP · Accepted Answer · 2017-12-10 10:31:36Z

2

you have to set it in columnDef for sorting when grid is initialised.

  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'name' },
      { field: 'gender',sort: { direction: uiGridConstants.ASC, priority: 1 } },
      { field: 'company', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };

you can also set direction to desc if you want to display male first

direction: uiGridConstants.DESC

Plunker

edited Dec 10, 2017 at 10:31

answered Dec 10, 2017 at 10:26

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to sort table by column when grid initialize?

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