AngularJS ng-grid clumping together grid

Question

I'm trying to do a basic ng-grid . I have it is defined and it has data. I'll attach a picture too, I haven't ever seen ng-grid do this, but this is the first time I'm setting it up myself so maybe I'm doing it wrong. Here's my code:

My Controller:

    controllers.controller('searchResultsController', ['$scope', '$rootScope',
    function($scope, $rootScope) {

        $scope.data = $scope.searchResults.data || $rootScope.searchResults.data;
        $scope.resultsGridOptions = {
            data: 'data',
            columnDefs: [
                {
                    field: 'startingCity',
                    displayName: 'Starting City',
                    width: '***'
                },
                {
                    field: 'destination',
                    displayName: 'Destination',
                    width: '***'
                },
                {
                    field: 'airline',
                    displayName: 'Airline',
                    width: '**'
                },
                {
                    field: 'price',
                    displayName: 'Price',
                    width: '*'
                },
                {
                    field: 'seatsInFirstClass',
                    displayName: 'Seats In First Class',
                    width: '*'
                },
                {
                    field: 'seatsInEconomy',
                    displayName: 'Seats In Economy',
                    width: '*'
                }
            ]
        };
    }
]
);

My app declaration:

angular.module('reservationsApp', ['ngRoute', 'ngGrid', 'ui.bootstrap', 'reservationsControllers']);

And if it'll do any good, my template (pretty plain though):

<div class="gridStyle" ng-grid="resultsGridOptions"></div>

Here's a screenshot of what I'm getting

Answer 1

I figured it out, well, @GregL figured it out. I wasn't importing the ng-grid.css file correctly.