Need to render data column by column using ng-grid in Angular JS

Question

I have data in below format,

$scope.myStudentData = {"Moroni":{"id":"1","grade":"A"},"Tiancum":{"id":"2","grade":"B"}}

But what is expected by grid is,

$scope.myGridOptions = [{"details":"id", "Moroni":"1", "Tiancum":"2"},{"details":"grade", "Moroni":"A", "Tiancum":"B"}];

This is because the ng-grid-options expects rows. Is there a way we can make a grid column-wise? Note: I want to use angular two-way binding between some derived fields and hence, not transforming the data into the format expected by grid.

Answer 1

You can actually.

$scope.gridOptions = {
        data: users,
        columnDefs: [
            {field: 'id', displayName: 'Member ID'},
            {field: 'lastName', displayName: 'Last Name'},
            {field: 'firstName', displayName: 'First Name'},
            {field: 'email', displayName: 'Email'},
            {field: 'phone', displayName: 'Phone'}

    };

And

<div ui-grid="gridOptions"></div>

Where users is your array of objects and your column definitions the columns you want to display. The field property must match the fields in your objects.

The API of gridoptions can be found here.