AngularGrid Fiddle

http://angulargrid.com

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
<script src="https://rawgit.com/ceolter/angular-grid/master/dist/angularGrid.js"></script>
<link rel="stylesheet" href="https://rawgit.com/ceolter/angular-grid/master/dist/angularGrid.css">
<link rel="stylesheet" href="https://rawgit.com/ceolter/angular-grid/master/dist/theme-fresh.css">
<md-toolbar class="md-whiteframe-z2">
    <div class="md-toolbar-tools">Toolbar</div>
</md-toolbar>
<div flex layout="row">
    <md-content style="width:20px; background-color:aqua;"></md-content>
    <md-content flex class="md-padding" ng-controller="gridCtrl" layout="column">
        <md-button ng-click="resize()">Size to Fit</md-button>
        <div flex angular-grid="gridOptions" class="ag-fresh"></div>
    </md-content>
    <md-content style="width:20px; background-color:lightgreen;"></md-content>
</div>

JavaScript

var app = angular.module('main', ['ngMaterial', 'angularGrid']);

app.controller("gridCtrl", function ($scope) {

    var columnDefs = [{
        displayName: "Make",
        field: "make",
        cellRenderer: function (params) {
            return '<span layout="row" layout-align="center center" style="background-color:gold;">{0}</span>'.replace('{0}', params.value);
        },
        width: 140
    }, {
        displayName: "Model",
        field: "model",
        cellStyle: {
            margin: 'auto 0'
        }
    }, {
        displayName: "Price",
        field: "price",
        cellRenderer: function (params) {
            return '<span style="margin:auto 0;">{0}</span>'.replace('{0}', params.value);},
        width: 60
        }];

    var rowData = [{
        make: "Toyota",
        model: "Celica",
        price: 35000
    }, {
        make: "Ford",
        model: "Mondeo",
        price: 32000
    }, {
        make: "Porsche",
        model: "Boxter",
        price: 72000
    }, {
        make: "AAA",
        model: "BBB",
        price: 111
    }, {
        make: "AAA",
        model: "BBB",
        price: 111
    }, {
        make: "AAA",
        model: "BBB",
        price: 111
    }, {
        make: "AAA",
        model: "BBB",
        price: 111
    }, {
        make: "AAA",
        model: "BBB",
        price: 111
    }, {
        make: "AAA",
        model: "BBB",
        price: 111
    }];

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        rowHeight: 60
    };

    $scope.resolveDataField = function (params) {
        return '<span layout="row" layout-align="left center">{0}</span>'.replace('{0}', params.value);
    }

    $scope.resize = function () {
        $scope.gridOptions.api.sizeColumnsToFit();
    };

    });