daniel-nagy / md-data-table

Material Design Data Table for Angular Material

‼️ This repository is archived and no longer maintained. ‼️

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

Attribute	Element	Type	Description
mdDesc	mdColumn	[expression]	If present, the column will sort descending first. The default is to sort ascending first.
mdOnReorder	mdHead	function	A callback function for when the order changes. The callback will receive the new order.
mdOrder	mdHead	string	A variable to bind the sort order to.
mdOrderBy	mdColumn	string	The value to bind to the sort order.

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

Parameter	Type	Description
options	object	Small preset options.

Property	Type	Default	Description
clickOutsideToClose	bool	true	The user can dismiss the dialog by clicking anywhere else on the page.
disableScroll	bool	true	Prevent user scroll while the dialog is open.
escToClose	bool	true	The user can dismiss the dialog by clicking the esc key.
focusOnOpen	bool	true	Will search the template for an md-autofocus element.
messages	object	null	Error messages to display corresponding to errors on the ngModelController.
modelValue	string	null	The initial value of the input element.
placeholder	string	null	Placeholder text for input element.
save	function	null	A callback function for when the use clicks the save button. The callback will receive the ngModelController. The dialog will close unless the callback returns a rejected promise.
targetEvent	event	null	The event object. This must be provided and it must be from a table cell.
type	string	"text"	The value of the type attribute on the input element.
validators	object	null	Optional attributes to be placed on the input element.

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

Parameter	Type	Description
options	object	Large preset options.

Property	Type	Default	Description
cancel	string	"Cancel"	Text to dismiss the dialog without saving.
clickOutsideToClose	bool	true	The user can dismiss the dialog by clicking anywhere else on the page.
disableScroll	bool	true	Prevent user scroll while the dialog is open.
escToClose	bool	true	The user can dismiss the dialog by clicking the esc key.
focusOnOpen	bool	true	Will search the template for an md-autofocus element.
messages	object	null	Error messages to display corresponding to errors on the ngModelController.
modelValue	string	null	The initial value of the input element.
ok	string	"Save"	Text to submit and dismiss the dialog.
placeholder	string	null	Placeholder text for input element.
save	function	null	A callback function for when the use clicks the save button. The callback will receive the ngModelController. The dialog will close unless the callback returns a rejected promise.
targetEvent	event	null	The event object. This must be provided and it must be from a table cell.
title	string	"Edit"	Dialog title text.
type	string	"text"	The value of the type attribute on the input element.
validators	object	null	Optional attributes to be placed on the input element.

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

Parameter	Type	Description
options	object	Dialog options.

Property	Type	Default	Description
bindToController	bool	false	If true, properties on the provided scope object will be bound to the controller
clickOutsideToClose	bool	true	The user can dismiss the dialog by clicking anywhere else on the page.
controller	function string	null	Either a constructor function or a string register with the $controller service. The controller will be automatically injected with $scope and $element. Remember to annotate your controller if you will be minifying your code.
controllerAs	string	null	An alias to publish your controller on the scope.
disableScroll	bool	true	Prevent user scroll while the dialog is open.
escToClose	bool	true	The user can dismiss the dialog by clicking the esc key.
focusOnOpen	bool	true	Will search the template for an md-autofocus element.
locals	object	null	Optional dependancies to be injected into your controller. It is not necessary to inject registered services, the $injector will provide them for you.
resolve	object	null	Similar to locals but waits for promises to be resolved. Once the promises resolve, their return value will be injected into the controller and the dialog will open.
scope	object	null	Properties to bind to the new isolated scope.
targetEvent	event	null	The event object. This must be provided and it must be from a table cell.
template	string	null	The template for your dialog.
templateUrl	string	null	A URL to fetch your template from.

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.

Attribute	Element	Type	Description
mdNumeric	mdColumn	[expression]	If the expression is null or evaluates to true then all the cells in that column will be right aligned

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

Attribute	Type	Description
mdBoundaryLinks	[expression]	Displays first and last page navigation links
mdLabel	object	Change the pagination label (see more below).
mdLimit	integer	A row limit.
mdLimitOptions	array	Row limit options (see more below).
mdOnPaginate	function	A callback function for when the page or limit changes. The page is passed as the first argument and the limit is passed as the second argument.
mdPage	integer	Page number. Pages are not zero indexed. The directive assumes the first page is one.
mdPageSelect	[expression]	Display a select dropdown for the page number
mdTotal	integer	Total number of items.
ngDisabled	[expression]	Disable pagination elements.

The md-label attribute has the following properties.

Property	Type	Default
of	string	'of' (e.g. x - y of z)
page	string	'Page:'
rowsPerPage	string	'Rows per page:'

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

<tr md-row ng-repeat="item in array | orderBy: myOrder | limitTo: myLimit: (myPage - 1) * myLimit">

<!-- and your pagination element will look something like... -->
<md-table-pagination md-limit="myLimit" md-page="myPage" md-total="{{array.length}}"></md-table-pagination>

My Pagination Isn't Working?!

• Make sure you pass md-page, md-limit, and md-total to the directive and that they are finite numbers.
• Pages are not zero indexed. The directive will assume pages start at one. If your query language expects pages to be zero indexed then just subtract one before making the query.

Row Selection

Attribute	Element	Type	Description
mdAutoSelect	mdRow	[expression]	Select a row by clicking anywhere in the row.
mdOnDeselect	mdRow	function	A callback function for when an item is deselected. The item will be passed as an argument to the callback.
mdOnSelect	mdRow	function	A callback function for when an item is selected. The item will be passed as an argument to the callback.
mdRowSelect	mdTable	[expression]	Enable row selection.
mdSelect	mdRow	any	The item to be selected.
mdSelectId	mdRow	number string	A unique identifier for the selected item. The identifier must be a property of the item.
multiple	mdTable	[expression]	Allow multiple selection. When enabled a master toggle will be prepended to the last row of table header.
ngDisabled	mdRow	expression	Conditionally disable row selection.
ngModel	mdTable	array	A variable to bind selected items to.

By default selected items will persist. Equality between items is determined using the === operator. In cases where items may not be strictly equal, you must provide a unique identifier for the item.

You may manually add or remove items from the model but be aware that select and deselect callbacks will not be triggered. When operating in single select mode, the deselect callback will not be triggered when a user selects another item. It will be trigger, however, if the user directly deselects the item. In multi-select mode, the master toggle will trigger select and deselect callbacks for all items selected or deselected respectfully.

Example: Row Selection From The Live Demo.

<tr md-row md-select="dessert" md-select-id="name" md-auto-select ng-repeat="dessert in desserts.data">

Example: Clearing Selected Items On Pagination

$scope.onPaginate = function () {
  $scope.selected = [];
}

Table Progress

Attribute	Target	Type	Description
mdProgress	mdTable	promise promise<Array>	The table will display a loading indicator until all promises are resolved or rejected.

The table module can display a loading indicator for you whenever asynchronous code is executing. It accepts a promise or an array of promises. If another promise is received before the previous promise is resolved or rejected it will be placed in a queue.

Because I spent almost an hour debugging this I thought I would share with you. I'm not sure why this is the case but if you put the deferred object on the scope and try to pass the promise to the directive from that, the queue mechanism will not work properly.

This Will Not Work

function () {
  $scope.deferred = $q.defer();
  // ...
  $scope.deferred.resolve();
}

<table md-table md-progress="deferred.promise"></table>

This Will Work

function () {
  var deferred = $q.defer();
  $scope.promise = deferred.promise;
  // ...
  deferred.resolve();
}

<table md-table md-progress="promise"></table>

In addition, if you are dealing with something that returns a promise directly (not a deferred object) you don't need to worry about it.

function () {
  $scope.promise = $timeout(function () {
    // ...
  }, 2000);
}

Table Toolbars

Tables may be embedded within cards that offer navigation and data manipulation tools available at the top and bottom. You can use the md-table-toolbar and md-default class on a md-toolbar element for a plain white toolbar.

If you need to display information relative to a particular column in the table you may use use a <md-foot> element. For example, say you had a calories.total property that summed the total number of calories and you wanted to display that information directly beneath the Calories column.

<tfoot md-foot>
  <tr md-row>
    <td md-cell></td>
    <td md-cell><strong>Total: </strong>{{calories.total}}</td>
    <td md-cell colspan="6"></td>
  </tr>
</tfoot>

Observe that Calories is the second column in the table. Therefore, we need to offset the first column with an empty cell. If you need to offset many columns you can use <td colspan="${n}"></td> where n is the number of columns to offset.

You may need to manually correct the the text alignment and cell padding if you use colspan.

Contributing

Requires

• node
• grunt-cli

This repository contains a demo application for developing features. As you make changes the application will live reload itself.

Update

I noticed the nutrition app was an inconvenience for people trying to run the app locally and contribute. I have updated the demo application to remove the dependency for the nutrition app. This is also a good example of how you can take advantage of ngRepeat to easily achieve client side sorting and pagination.

Running the App Locally

Clone this repository to your local machine.

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

Create a new branch for the issue you are working on.

git checkout -b my-issue

Install the package dependencies.

npm install
bower install

Run the application and visit 127.0.0.1:8000 in the browser.

grunt

Make your modifications and update the build.

grunt build

Create a pull request!

md-data-table's Issues

Pagination events

I think the mdDataTablePagination directive should have an ng-change event, which fires whenever a page is changed. Meaning whenever any of the pagination buttons are clicked.

Column ordering not working for dynamically generated columns

When I have theth attribute set to order-by="{{column.key}}", it causes the sorting function to attempt to sort by that string rather than the actual value bound to it. This is problematic for a table with dynamically generated columns, for eg:

<th
  ng-repeat="column in ::vm.config.columns"
  ng-attr-numeric="::column.type === 'numeric'"
  order-by="{{column.key}}"
>
  {{::column.heading}}
</th>

Progress bar wrong column count

Hey,

when creating the header elements in a dynamic way, the column counter function returns a wrong value, it seems, that the function counts the rows, before "ng-repeat" finishes it's work.

Toggle sort direction default via directive in <th>

Feature request - would be nice to specify the default sort direction for a column via a directive in the <th>, as an example (note the order-direction attr):

<md-data-table-container>
      <table md-data-table md-row-select="tableConfig.selected">
          <thead md-trim-column-names md-order="tableConfig.order">
              <tr>
                  <th order-by="name">Report Name</th>
                  <th numeric order-by="views.value" order-direction="descending">Visits</th>
                  <th numeric order-by="users.value" order-direction="ascending">Unique Users</th>
              </tr>
          </thead>
          <tbody md-auto-select>
              <tr ng-repeat="report in reports_data | orderBy: tableConfig.order">
                  <td>{{report.name}}</td>
                  <td>{{report.views.value}}</td>
                  <td>{{report.users.value}}</td>
              </tr>
          </tbody>
      </table>
  </md-data-table-container>

Pagination footer is too wide for mobile devices.

The pagination footer is too wide to display properly on small screens.

Column Header Tooltips

Column headers should provide the option to display definitions via tooltips on hover.

Sticky header and footer

Hi, it would be nice to have a sticky header and footer. I'll work this feature if I have time.

Nice work :)

Client-Side Sorting and Pagination

When using client side sorting and pagination, numeric columns are not correctly right aligned when the number of rows changes or when items are reordered.

Multiple tables and md-selected

Try using the select all checkbox in either table of this plunker, note that the md-selected arrays for the separate tables exhibit unexpected behavior.

Get Selected Row

Hello, i'm still wondering how i can access the selected rows, it says, my "selected" array is always undefined.

Tag Latest Build

Please tag your latest build as there is currently no way for me to specify a version of md-data-table in my project's bower.json. I have to set the version to "*" but prefer to specify an actual build number "0.7.6" so future changes don't break the functionality.

Per Bower's documentation for the bower.json file (http://bower.io/docs/creating-packages/):

Version

Ignored by Bower as git tags are used instead.

Intended to be used in the future when Bower gets a real registry where you can publish actual packages, but for now just leave it out.

Pagination Problem

Hello , I am having some problems with the pagination , it simply doesn't work, I checked the console and this was the error : Table Pagination: Could not locate your table directive, your onPaginationChange function will not work.

Table Transition

Add animation when new data is rendered

not responsive

I tried using it in my project , it works fine, but its not responsive, I dont know if I am missing out something??

The onboard demo with grunt is not working - infinite-earth-4803

Hi Daniel
The demo is using the resource $resource('http://localhost:3000/nutriton/desserts')
I do not run anytning on port 3000
I find that this link is stopping my attempt to verify the software.
I saw the online version and have downloaded https://infinite-earth-4803.herokuapp.com/nutriton/desserts/:id
There was 50 items.
I put them into the nutritionResource, changed the controller from "get()" to just let the variable assign to desserts
Now I see the 50 rows.
Now I try to sort the data... But it does not work as I see it.
I have used nearly two hours to figure out this.
I would be much more happy that the sample was running without having to tweek these things.
Therefore I file the bug.
The problem makes me not get into what I want....
I need to find out if I can make links in the fields. But can I. I don't know because I have to use all my time on just getting the sample to work..

Anyway it is great work you have made..
I'm just not total happy about the infinite-earth-4803 stunt. It makes me unpappy.
There is really a lot of good design in using the HTML table, tr,th,td tags.

Float values in numeric cell are parsed as Int

precision property adds zeros to rounded value

Column Ordering

Column ordering should be enabled or disabled on a per column basis instead of all or nothing. This shouldn't be too difficult to do. Instead of enabling column ordering for each column when the md-order attribute is specified, we could instead force explicit order-by attributes on the header cells to enable ordering.

Table Progress

Display progress indicator when the table is loading data

Pagination with dynamic data

Hi first of all thank for this module have a nice look and feel as material design.

I have a project what involve in collect data from sensors through MQTT protocol to the server and proportionate to front end with Socket.io, i need this data to be displayed in a table and users can interact with them so this module fits perfect as data table.

the data from Socket.io are saved in a $scope.array object so in the front is called with a ng-repeatin the tbody dynamically while these data arrives from sensors.

The problem comes when table begins to fill, i know the implementation and the manipulation with the data have another approach but i want to know if i can sort the data in pages somehow or if can be implemented this feature since md-limit is not working with this way of collecting data.

Sorry if something is not understood English is not my mother tongue.

Conditional attributes

Provide a way to conditionally apply (maybe all) attributes. I've tried ng-attr-{{attribute}} myself and it does not work.

Pagination Page Calculation

Pagination needs to calculate the most suitable page based on the current min value when selecting a different number of rows per page.

Client-side sorting directive

Having trouble following the client-side sorting example (using md-order) outlined in the README.

Here's a plunker demonstrating that clicking a <th> apparently has no effect on the sort order (although watching the ctrl.order variable in the md-data-table directive proves that it is being updated on click).

Am I missing a step? If so, I'd be happy to submit a PR for the README with additional detail.

License?

Would like to use this as a temporary workaround until the official version is implemented. Can you add a license? Thanks!

Conflict between numeric columns and Angular's built-in number filter

When using both, the resulting behavior can be seen in this plunker - any digits after the comma separator are truncated.

Error in pagination with latest branch version

With the latest commit i keep getting the error TypeError: Cannot read property 'localName' of null at findTable (http://localhost:9001/bower_components/angular-material-data-table/dist/md-data-table.js:456:63) it turns out that element.prop('previousElementSibling') is returning null

Inline Editing cells with validation

I request for inline editing cells with validation done the material design way integrated into your demo:

http://codepen.io/anon/pen/zGzrgy

Thanks :-)

Hide checkbox?

Thanks for this great module! I'm wondering if there is a way to disable showing the checkbox if I'm allowing "md-auto-select". Essentially, I want to go to a different view once a user clicks on a row. On that note, is there a event handler for the on-click event or just ng-click? Thanks again!

Table Pagination Label

The md-data-table-pagination label ("Rows per page:") has been hard-coded which is not the ngMaterial way, and specially a problem when creating apps in non-english languages.

Row wrap limit

Limit the number of rows a table cell can wrap. Configurable to hide overflow.

<tr>The text in this table cell is quite long</tr>

example
The text in this table cell is quite long

<tr wrap-limit="0" overflow="ellipsis">The text in this table cell is quite long</tr>

example
The text in this table cell is ...

sample with local collection please

Hi Daniel
I do not understand how I should implement $watchCollection()
I do not have a service I can call to get things sorted etc.
I have an array with data.
I declare where the data is
I declare what key is mapped to what column
From there offf. I expect the md-data-table to take care of the rest

I see the controller uses 'ngResource' .. in my eyes this dramastically reduces the use-cases where md-data-table can be used.

I compare current solution to http://iamisti.github.io/md-data-table/ where the model is very easy to understand. Unfortunally the markup is too limited in iamisti solution. So I need to go with this solution. I just need to understand how to use it.

md-single-select

I'm not sure if this is the right forum to ask, so please direct me accordingly.

I was looking at the source, and wondered if it would be possible to update the table to be configured to only allow single selection of a given row in the table. Additionally, if the table is defined as md-single-select="selected" then no check boxes are really needed, but the selected row remains highlighted... and only one row is selectable.

I really like this library, and plan to follow it's updates.

All the best.

~Rob.

Multiple Tables on one Site

Hey,

i got an issue with the selected items, when having multiple tables at the same page.
Unfortunately i'm not able to write the "md-row-select" value by hand, because im creating the tables with ng-repeat. How do i refer to an array for each generated table in a dynamic way?

BUG - Row Select

The global checkbox should deselect itself if all the rows are selected and then any row is deselected, resulting in all the rows no longer being selected.

Hide selection checkboxes

Hi would it be possible for you to add a directive to hide the checkboxes on the table?

Pagination

Tables within cards should support pagination.

Editing Dialogs

Table cells can display editing dialogs to do inline changes of data.

Missed styles for tfoot

it will be nice to style tfoot element used for summary info

Normalized Attribute Names

Hello, i got a problem with filling the datatable rows dynamically:

right now i got this line, to fill each line with data:

header:

`
{{entry.attributeName}}

`

body:

`
{{entry.valueName}}

`

It fills the data the right way, but it doesn't provide the selection options anymore.

When i provide the checkboxes by myself they aren't connected to the rows, as well as the select all function doesn't work properly. Is there a solution for this ?

Sorted Column Names

When a column is sorted, its text should darken to @md-dark and an icon should appear displaying the direction.

Row selection in table

I couldn't find the official Google specification for selecting a row but I think it will be good if we can select the row by clicking anywhere in the row with the ripple effect.

As of now we have to click on the check box to select the row.

What say ?

RTL Styling

It already works with the RTL layout, but needs some tweaks. While trying to use it in a right-to-left environment, the following came to my attention that need improvements:

• Toolbar button margins
• Number/Text Alignment
• Pagination

This is a great implementation of the docs; good job 👍

Alternate Headers

Support for alternate headers. Possible impliment default alternate headers, for example display the number of items selected.

Long Header Titles

Header titles should be configurable to show ellipsis on overflow instead of forcing the table to scroll.

Row Selection Background Color

When a row is selected its background color should be darkened to Grey 100 (#F5F5F5).

the following css class is available,

table[md-data-table] > tbody > tr.md-selected {
  background-color: #f5f5f5;
}

The issue is adding and removing the class appropriately when the row is selected.

Sorting

Hi,

can i sort collumns using th buttons?

Inline Menus

Table cells provide inline menus for selecting from a list of things.

Unknown provider $nutritionProvider

I'm facing this error in console after install + controller (layout) implementation:
Error: [$injector:unpr] Unknown provider: $nutritionProvider <- $nutrition <- nutritionController

Pagination page selector

It would be nice select a page or at least jump to the first or last page.

Column resize

A gr8 feature would be "resizable columns". @daniel-nagy, are there any plans to implement this? If not, I would like to help add this feature.

md-trigger with controllerAs syntax in ES2015

Greetings i'm using babel to build my controllers, and everything works correctly until it comes time to use the functions passed into md-trigger.

The problem is that in my controller functions i'm using "this". here's a code snippet

export default class MainController {
    query = {
        order: 'name',
        filter: '',
        page: 1,
        limit: 10,
        market: 'All Markets',
        region: 'All Regions'
    };

   constructor () {
        this.pageChanged( 1, 10 );
   }
   pageChanged( page, limit ) {
       return this.$Property.get( ..... ).$promise;
   }
}

The above code is not complete, but it shows at least what i'm interested in figuring out. When the controller is called, it correctly loads the first page of ten properties, when attempting to use the pagination, however, i get an error message that this.$Property is undefined - and if i console.log( this ) it comes up undefined.

Any advice?