CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
David says Reinstate Monica
David says Reinstate Monica

Reputation: 20139

How can I order the columns in UI-grid?

I have a JSON that is coming in as something like

{
 x:1,
 y:2
}

Which means when I stick it on my ui-grid, the x column is first and the y column is second. However, I want the reverse: y then x.

How can I tell UI-grid to display y ahead of x?

Upvotes: 0

Views: 639

Answers (1)

mainguy
mainguy

Reputation: 8331

By using columnDefs.

Define your grid in html like this:

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

And your app code like this:

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

app.controller('MainCtrl', ['$scope',
  function($scope) {

    $scope.myData = [{
      "x": "1",
      "y": "2",

    }, {
      "x": "3",
      "y": "4",

    }];

    $scope.gridOptions = {
      data: 'myData'
    };

    $scope.gridOptions.columnDefs = [{
        name: 'y'
      }, {
        name: 'x'
      },
    ];
  }
]);

Note how columnDefs uses y for the first column and x for the second one.

Here is a Plunker

Upvotes: 1

Related Questions