adjusting angularjs material design data table col

Question

I'm using the old AngularJS Material Design Data Table and would like to know how to adjust the column width.

https://github.com/daniel-nagy/md-data-table

For instance if I wanted to change the 'fat' column in the demo to a fixed width of 40px how would I go about this?

Demo: http://codepen.io/anon/pen/BjvLVJ

There is a fixed padding which seems to be the main problem.

table.md-table.md-row-select td.md-cell:nth-child(n+3):nth-last-child(n+2), table.md-table.md-row-select th.md-column:nth-child(n+3):nth-last-child(n+2) {
    padding: 0 56px 0 0;
}

Answer 1

You could use the following css class.

.width-override{
  width:40px !important;
  padding:0px !important;
}

You will need to add it to the th and td tags of the respective column like so.

<th md-column md-numeric md-order-by="fat.value" class="width-override"><span>Fat (g)</span></th>

<td md-cell class="width-override">{{dessert.fat.value | number: 2}}</td>

Please checkout the below example!

Note: The contents are of width 56px so the column is of that width, you might want to use the same, since we do not want to clip the contents inside the column.

angular.module('demoApp', ['ngMaterial', 'md.data.table'])

.config(['$mdThemingProvider', function ($mdThemingProvider) {
    'use strict';
    
    $mdThemingProvider.theme('default')
      .primaryPalette('blue');
}])

.controller('nutritionController', ['$mdEditDialog', '$q', '$scope', '$timeout', function ($mdEditDialog, $q, $scope, $timeout) {
  'use strict';
  
  $scope.selected = [];
  $scope.limitOptions = [5, 10, 15];
  
  $scope.options = {
    rowSelection: true,
    multiSelect: true,
    autoSelect: true,
    decapitate: false,
    largeEditDialog: false,
    boundaryLinks: false,
    limitSelect: true,
    pageSelect: true
  };
  
  $scope.query = {
    order: 'name',
    limit: 5,
    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.editComment = function (event, dessert) {
    event.stopPropagation(); // in case autoselect is enabled
    
    var editDialog = {
      modelValue: dessert.comment,
      placeholder: 'Add a comment',
      save: function (input) {
        if(input.$modelValue === 'Donald Trump') {
          input.$invalid = true;
          return $q.reject();
        }
        if(input.$modelValue === 'Bernie Sanders') {
          return dessert.comment = 'FEEL THE BERN!'
        }
        dessert.comment = input.$modelValue;
      },
      targetEvent: event,
      title: 'Add a comment',
      validators: {
        'md-maxlength': 30
      }
    };
    
    var promise;
    
    if($scope.options.largeEditDialog) {
      promise = $mdEditDialog.large(editDialog);
    } else {
      promise = $mdEditDialog.small(editDialog);
    }
    
    promise.then(function (ctrl) {
      var input = ctrl.getInput();
      
      input.$viewChangeListeners.push(function () {
        input.$setValidity('test', input.$modelValue !== 'test');
      });
    });
  };
  
  $scope.toggleLimitOptions = function () {
    $scope.limitOptions = $scope.limitOptions ? undefined : [5, 10, 15];
  };
  
  $scope.getTypes = function () {
    return ['Candy', 'Ice cream', 'Other', 'Pastry'];
  };
  
  $scope.loadStuff = function () {
    $scope.promise = $timeout(function () {
      // loading
    }, 2000);
  }
  
  $scope.logItem = function (item) {
    console.log(item.name, 'was selected');
  };
  
  $scope.logOrder = function (order) {
    console.log('order: ', order);
  };
  
  $scope.logPagination = function (page, limit) {
    console.log('page: ', page);
    console.log('limit: ', limit);
  }
}]);

body,
md-content {
  background-color: #f5f5f5 !important;
}

body > md-toolbar {
  z-index: 3;
}

md-toolbar.md-table-toolbar.alternate {
  color: #1e88e5;
  background-color: #e3f2fd;
}

md-toolbar.md-table-toolbar.alternate .md-toolbar-tools {
  font-size: 16px;
}

md-card:first-child {
  padding: 8px 8px 8px 24px;
}

.checkboxes > md-checkbox {
  margin: 0;
  padding: 16px;
  min-width: 300px;
  flex: 0 0 auto;
}
.width-override{
  width:40px !important;
  padding:0px !important;
  overflow:hidden;
}

<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/1.0.0/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">
    
  </head>

  <body layout="column">
    
    <md-toolbar class="md-whiteframe-1dp">
      <div class="md-toolbar-tools">
        <div class="md-title">Material Design Data Table</div>
      </div>
    </md-toolbar>
    
    <md-content laout="column" flex ng-controller="nutritionController">
      
      <md-card>
        <div layout="row" layout-wrap class="checkboxes">
          <md-checkbox ng-model="options.rowSelection">Row Selection</md-checkbox>
          <md-checkbox ng-model="options.multiSelect">Multiple Selection</md-checkbox>
          <md-checkbox ng-model="options.autoSelect">Auto Selection</md-checkbox>
          <md-checkbox ng-model="options.decapitate">Decapitate</md-checkbox>
          <md-checkbox ng-model="options.largeEditDialog">Lard Edit Dialogs</md-checkbox>
          <md-checkbox ng-model="options.boundaryLinks">Pagination Boundary Links</md-checkbox>
          <md-checkbox ng-model="options.limitSelect" ng-click="toggleLimitOptions()">Pagination Limit Select</md-checkbox>
          <md-checkbox ng-model="options.pageSelect">Pagination Page Select</md-checkbox>
        </div>
      </md-card>
      
      <md-card>
        
        <md-toolbar class="md-table-toolbar md-default" ng-hide="options.rowSelection && selected.length">
          <div class="md-toolbar-tools">
            <span>Nutrition</span>
            <div flex></div>
            <md-button class="md-icon-button" ng-click="loadStuff()">
              <md-icon>refresh</md-icon>
            </md-button>
          </div>
        </md-toolbar>
        
        <md-toolbar class="md-table-toolbar alternate" ng-show="options.rowSelection && selected.length">
          <div class="md-toolbar-tools">
            <span>{{selected.length}} {{selected.length > 1 ? 'items' : 'item'}} selected</span>
          </div>
        </md-toolbar>
        
        <md-table-container>
          <table md-table md-row-select="options.rowSelection" multiple="{{options.multiSelect}}" ng-model="selected" md-progress="promise">
            <thead ng-if="!options.decapitate" md-head md-order="query.order" md-on-reorder="logOrder">
              <tr md-row>
                <th md-column md-order-by="name"><span>Dessert (100g serving)</span></th>
                <th md-column md-order-by="type"><span>Type</span></th>
                <th md-column md-numeric md-order-by="calories.value" md-desc><span>Calories</span></th>
                <th md-column md-numeric md-order-by="fat.value" class="width-override"><span>Fat (g)</span></th>
                <th md-column md-numeric md-order-by="carbs.value"><span>Carbs (g)</span></th>
                <th md-column md-numeric md-order-by="protein.value"><span>Protein (g)</span></th>
                <th md-column md-numeric md-order-by="sodium.value" hide-gt-xs show-gt-md><span>Sodium (mg)</span></th>
                <th md-column md-numeric md-order-by="calcium.value" hide-gt-xs show-gt-lg><span>Calcium (%)</span></th>
                <th md-column md-numeric md-order-by="iron.value" hide-gt-xs show-gt-lg><span>Iron (%)</span></th>
                <th md-column md-order-by="comment">
                  <md-icon>comments</md-icon>
                  <span>Comments</span>
                </th>
              </tr>
            </thead>
            <tbody md-body>
              <tr md-row md-select="dessert" md-on-select="logItem" md-auto-select="options.autoSelect" ng-disabled="dessert.calories.value > 400" ng-repeat="dessert in desserts.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
                <td md-cell>{{dessert.name}}</td>
                <td md-cell>
                  <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 md-cell>{{dessert.calories.value}}</td>
                <td md-cell class="width-override">{{dessert.fat.value | number: 2}}</td>
                <td md-cell>{{dessert.carbs.value}}</td>
                <td md-cell>{{dessert.protein.value | number: 2}}</td>
                <td md-cell hide-gt-xs show-gt-md>{{dessert.sodium.value}}</td>
                <td md-cell hide-gt-xs show-gt-lg>{{dessert.calcium.value}}%</td>
                <td md-cell hide-gt-xs show-gt-lg>{{dessert.iron.value}}%</td>
                <td md-cell ng-click="editComment($event, dessert)" ng-class="{'md-placeholder': !dessert.comment}">
                  {{dessert.comment || 'Add a comment'}}
                </td>
              </tr>
            </tbody>
          </table>
        </md-table-container>

        <md-table-pagination md-limit="query.limit" md-limit-options="limitOptions" md-page="query.page" md-total="{{desserts.count}}" md-page-select="options.pageSelect" md-boundary-links="options.boundaryLinks" md-on-paginate="logPagination"></md-table-pagination>
      </md-card>
    </md-content>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <script src="https://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>
    
  </body>
</html>