How to make table sticky header using md-toolbar
I included thead inside the md-toolbar for the header of the fixed table, when I look at the contents of the table, the title is not fixed at the top. Below is my code and link to codepen http://codepen.io/apps4any/pen/WQgKMw
<html lang="en" ng-app="demoApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css"> <link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css"> </head> <body layout="column"> <md-toolbar> <div class="md-toolbar-tools"> <div class="md-title">Material Design Data Table</div> </div> </md-toolbar> <md-content layout="column" flex> <md-card ng-controller="nutritionController"> <md-data-table-container> <table md-data-table class="md-primary" md-row-select="selected" md-progress="deferred"> <md-toolbar> <thead md-order="query.order" md-trigger="onorderchange"> <tr> <th order-by="name" name="Dessert" unit="100g serving"></th> <th order-by="type" name="Type"></th> <th numeric order-by="calories.value" name="Calories"></th> <th numeric unit="g" order-by="fat.value" name="Fat"></th> <th numeric unit="g" order-by="carbs.value" name="Carbs"></th> <th numeric unit="g" order-by="protein.value" name="Protein"></th> <th numeric unit="mg" order-by="sodium.value" name="Sodium"></th> <th numeric unit="%" order-by="calcium.value" name="Calcium"></th> <th numeric unit="%" order-by="iron.value" name="Iron"></th> </tr> </thead> </md-toolbar> <tbody> <tr md-auto-select md-disable-select="dessert.name === 'Jelly bean'" ng-repeat="dessert in desserts.data | orderBy: query.order | limitTo: query.limit: (query.page - 1) * query.limit"> <td>{{dessert.name}}</td> <td> <md-select ng-model="dessert.type" placeholder="Other"> <md-option ng-value="type" ng-repeat="type in getTypes()">{{type}}</md-option> </md-select> </td> <td>{{dessert.calories.value}}</td> <td>{{dessert.fat.value | number: 2}}</td> <td>{{dessert.carbs.value}}</td> <td>{{dessert.protein.value | number: 2}}</td> <td>{{dessert.sodium.value}}</td> <td show-unit>{{dessert.calcium.value}}</td> <td show-unit>{{dessert.iron.value}}</td> </tr> </tbody> </table> </md-data-table-container> <md-data-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{desserts.count}}" md-trigger="onpagechange"></md-data-table-pagination> </md-card> </md-content> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script> <script src="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script> </body> </html>
JS:
angular.module('demoApp', ['ngMaterial', 'md.data.table']) .controller('nutritionController', ['$q', '$scope', '$timeout', function ($q, $scope, $timeout) { $scope.selected = []; $scope.query = { order: 'name', limit: 15, page: 1 }; $scope.desserts = { "count": 9, "data": [ { "name": "Frozen yogurt", "type": "Ice cream", "calories": { "value": 159.0 }, "fat": { "value": 6.0 }, "carbs": { "value": 24.0 }, "protein": { "value": 4.0 }, "sodium": { "value": 87.0 }, "calcium": { "value": 14.0 }, "iron": { "value": 1.0 } }, { "name": "Ice cream sandwich", "type": "Ice cream", "calories": { "value": 237.0 }, "fat": { "value": 9.0 }, "carbs": { "value": 37.0 }, "protein": { "value": 4.3 }, "sodium": { "value": 129.0 }, "calcium": { "value": 8.0 }, "iron": { "value": 1.0 } }, { "name": "Eclair", "type": "Pastry", "calories": { "value": 262.0 }, "fat": { "value": 16.0 }, "carbs": { "value": 24.0 }, "protein": { "value": 6.0 }, "sodium": { "value": 337.0 }, "calcium": { "value": 6.0 }, "iron": { "value": 7.0 } }, { "name": "Cupcake", "type": "Pastry", "calories": { "value": 305.0 }, "fat": { "value": 3.7 }, "carbs": { "value": 67.0 }, "protein": { "value": 4.3 }, "sodium": { "value": 413.0 }, "calcium": { "value": 3.0 }, "iron": { "value": 8.0 } }, { "name": "Jelly bean", "type": "Candy", "calories": { "value": 375.0 }, "fat": { "value": 0.0 }, "carbs": { "value": 94.0 }, "protein": { "value": 0.0 }, "sodium": { "value": 50.0 }, "calcium": { "value": 0.0 }, "iron": { "value": 0.0 } }, { "name": "Lollipop", "type": "Candy", "calories": { "value": 392.0 }, "fat": { "value": 0.2 }, "carbs": { "value": 98.0 }, "protein": { "value": 0.0 }, "sodium": { "value": 38.0 }, "calcium": { "value": 0.0 }, "iron": { "value": 2.0 } }, { "name": "Honeycomb", "type": "Other", "calories": { "value": 408.0 }, "fat": { "value": 3.2 }, "carbs": { "value": 87.0 }, "protein": { "value": 6.5 }, "sodium": { "value": 562.0 }, "calcium": { "value": 0.0 }, "iron": { "value": 45.0 } }, { "name": "Donut", "type": "Pastry", "calories": { "value": 452.0 }, "fat": { "value": 25.0 }, "carbs": { "value": 51.0 }, "protein": { "value": 4.9 }, "sodium": { "value": 326.0 }, "calcium": { "value": 2.0 }, "iron": { "value": 22.0 } }, { "name": "KitKat", "type": "Candy", "calories": { "value": 518.0 }, "fat": { "value": 26.0 }, "carbs": { "value": 65.0 }, "protein": { "value": 7.0 }, "sodium": { "value": 54.0 }, "calcium": { "value": 12.0 }, "iron": { "value": 6.0 } } ] }; $scope.getTypes = function () { return ['Candy', 'Ice cream', 'Other', 'Pastry']; }; $scope.onpagechange = function(page, limit) { var deferred = $q.defer(); $timeout(function () { deferred.resolve(); }, 2000); return deferred.promise; }; $scope.onorderchange = function(order) { var deferred = $q.defer(); $timeout(function () { deferred.resolve(); }, 2000); return deferred.promise; }; }]);