开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

Material Design Data Table

This module is an effort to implement Material Design data tables in Angular Material. Data tables are used to present raw data sets and usually appear in desktop enterprise applications. Data tables are particularly useful for visualizing and manipulating large data sets.

Specification for Material Design data tables can be found here.

• License
• Demo
• Installation
• Usage
• Change Log
• API Documentation
• Contributing

License

This software is provided free of charge and without restriction under the MIT License

Demo

A live demo.

A fork-able Codepen. Please use this to reproduce any issues you may be experiencing.

Installation

Using Bower

This package is installable through the Bower package manager.

bower install angular-material-data-table --save

In your index.html file, include the data table module and style sheet.

<!-- style sheet -->
<link href="bower_components/angular-material-data-table/dist/md-data-table.min.css" rel="stylesheet" type="text/css"/>
<!-- module -->
<script type="text/javascript" src="bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>

Include the md.data.table module as a dependency in your application.

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

Using npm and Browserify (or JSPM)

In addition, this package may be installed using npm.

npm install angular-material-data-table --save

You may use Browserify to inject this module into your application.

angular.module('myApp', [require('angular-material-data-table')]);

Usage

Example Controller

// Assume we have a $nutrition service that provides an API for communicating with the server

angular.module('demoApp').controller('sampleController', ['$nutrition', '$scope', function ($nutrition, $scope) {
  'use strict';
  
  $scope.selected = [];
  
  $scope.query = {
    order: 'name',
    limit: 5,
    page: 1
  };
  
  function success(desserts) {
    $scope.desserts = desserts;
  }
  
  $scope.getDesserts = function () {
    $scope.promise = $nutrition.desserts.get($scope.query, success).$promise;
  };

}]);

Example Template

<md-toolbar class="md-table-toolbar md-default">
  <div class="md-toolbar-tools">
    <span>Nutrition</span>
  </div>
</md-toolbar>

<!-- exact table from live demo -->
<md-table-container>
  <table md-table md-row-select multiple ng-model="selected" md-progress="promise">
    <thead md-head md-order="query.order" md-on-reorder="getDesserts">
      <tr md-row>
        <th md-column md-order-by="nameToLower"><span>Dessert (100g serving)</span></th>
        <th md-column md-numeric md-order-by="calories.value"><span>Calories</span></th>
        <th md-column md-numeric>Fat (g)</th>
        <th md-column md-numeric>Carbs (g)</th>
        <th md-column md-numeric>Protein (g)</th>
        <th md-column md-numeric>Sodium (mg)</th>
        <th md-column md-numeric>Calcium (%)</th>
        <th md-column md-numeric>Iron (%)</th>
      </tr>
    </thead>
    <tbody md-body>
      <tr md-row md-select="dessert" md-select-id="name" md-auto-select ng-repeat="dessert in desserts.data">
        <td md-cell>{{dessert.name}}</td>
        <td md-cell>{{dessert.calories.value}}</td>
        <td md-cell>{{dessert.fat.value | number: 1}}</td>
        <td md-cell>{{dessert.carbs.value}}</td>
        <td md-cell>{{dessert.protein.value | number: 1}}</td>
        <td md-cell>{{dessert.sodium.value}}</td>
        <td md-cell>{{dessert.calcium.value}}{{dessert.calcium.unit}}</td>
        <td md-cell>{{dessert.iron.value}}{{dessert.iron.unit}}</td>
      </tr>
    </tbody>
  </table>
</md-table-container>

<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page" md-total="{{desserts.count}}" md-on-paginate="getDesserts" md-page-select></md-table-pagination>

API Documentation

v0.10.x

• Column Sorting
• Edit Dialogs
• Inline Menus
• Numeric Columns
• Pagination
• Row Selection
• Table Progress
• Table Toolbars

Earlier Versions

• 0.9.x
• <=0.8.14

Tables are sorted alphabetically by their first column. I will be camelCasing attributes in tables (otherwise the cells would wrap and be difficult to read) but don't forget to kebab-case them in your template.

Column Sorting

When the user clicks the md-column element, the value of the md-order-by attribute will be bound to the variable provided to the md-order attribute on the md-head element. If the column is already sorted by that value, a minus sign - will be prefixed to the value. For most query languages, this is the universal symbol to sort descending.

The variable can be used to send a query to the server or as the orderBy property of an ng-repeat expression.

Example Using ngRepeat

<md-table-container>
  <table md-table>
    <thead md-head md-order="myOrder">
      <!-- when the user clicks this cell, the myOrder variable will get the value 'nameToLower' -->
      <th md-column md-order-by="nameToLower">Dessert (100g serving)</th>
      <!-- the variable myOrder will not be changed when this cell is clicked -->
      <th md-column md-numeric>Calories</th>
    </thead>
    <tbody md-body>
      <!-- we can let ng-repeat sort the columns for us -->
      <tr ng-repeat="dessert in desserts | orderBy: myOrder"></tr>
    </tbody>
  </table>
</md-table-container>

Edit Dialogs

Tables may require basic text editing. This module includes a service for displaying edit dialogs to modify text or anything else really. The service provides presets for both small and large edit dialogs designed for manipulating text. It also has full support for creating custom dialogs so you can be as creative as you want to be.

Unlike Angular Material dialogs, the preset methods will open the dialog.

Restrictions

• The dialog will always receive a new isolated scope.
• You must provide a targetEvent and the event target must be a table cell.

Example

$scope.editComment = function (event, dessert) {
  // if auto selection is enabled you will want to stop the event
  // from propagating and selecting the row
  event.stopPropagation();
  
  /* 
   * messages is commented out because there is a bug currently
   * with ngRepeat and ngMessages were the messages are always
   * displayed even if the error property on the ngModelController
   * is not set, I've included it anyway so you get the idea
   */
   
  var promise = $mdEditDialog.small({
    // messages: {
    //   test: 'I don\'t like tests!'
    // },
    modelValue: dessert.comment,
    placeholder: 'Add a comment',
    save: function (input) {
      dessert.comment = input.$modelValue;
    },
    targetEvent: event,
    validators: {
      'md-maxlength': 30
    }
  });

  promise.then(function (ctrl) {
    var input = ctrl.getInput();

    input.$viewChangeListeners.push(function () {
      input.$setValidity('test', input.$modelValue !== 'test');
    });
  });
});

Small Edit Dialogs

$mdEditDialog.small(options);

The small method will return a promise that will resolve with the controller instance. The controller has two public methods, dismiss which will close the dialog without saving and getInput which will return the ngModelController.

Large Edit Dialogs

Large edit dialogs are functionally identical to small edit dialogs but have a few additional options.

$mdEditDialog.large(options);

The large method will return a promise that will resolve with the controller instance. The controller has two public methods, dismiss which will close the dialog without saving and getInput which will return the ngModelController.

Roll Your Own

$mdEditDialog.show(options);

The show method will return a promise that will resolve with the controller instance.

Table cells have a md-placeholder CSS class that you can use for placeholder text.

Example: A Table Cell That Opens An Edit Dialog

<td md-cell ng-click="editComment($event, dessert)" ng-class="{'md-placeholder': !dessert.comment}">
  {{dessert.comment || 'Add a comment'}}
</td>

Inline Menus

Table cells support inline menus. To use an inline menu, place an md-select element inside an md-cell element.

Example

<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>

Clicking anywhere in the cell will activate the menu. In addition, if you have automatic row selection enabled the row will not be selected when the cell is clicked.

Numeric Columns

Numeric columns align to the right of table cells.

You may use Angular's number filter on a cell to set the decimal precision.

<!-- 2 decimal places -->
<td md-cell>{{dessert.protein.value | number: 2}}</td>

If you are using colspan you may need to manual correct the alignment and padding of cells. You can override the cell's style with a custom CSS class.

Pagination

The md-label attribute has the following properties.

The md-limit-options attribute supports integers or objects with the properties label and value. The latter is convenient for when you want to use language to give meaning to individual options, e.g.

// the 'All' option will show all items in the collection
ctrl.limitOptions = [5, 10, 15, {
  label: 'All',
  value: function () {
    return collection.length;
  }
}];

Example: Changing The Pagination Label

<!-- how to change the pagination label -->
<md-table-pagination md-label="{page: 'Página:', rowsPerPage: 'Filas por página:', of: 'de'}"></md-table-pagination>

<!-- or if the label is defined on the scope -->
<md-table-pagination md-label="{{label}}"></md-table-pagination>

I used Google translate so if the translations are wrong please fix them and make a pull request.

Example: Client Side Pagination Using ngRepeat

<