daniel-nagy / md-data-table Goto Github PK

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.

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

Nice work :)

precision property adds zeros to rounded value

Tables within cards should support pagination.

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

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

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

Add animation when new data is rendered

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.

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.

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

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

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.

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?

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?

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

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.

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!

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

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

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

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 ?

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 👍

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.

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

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.

Display progress indicator when the table is loading data

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

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.

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

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.

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.

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 ?

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.

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

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

Thanks :-)

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>

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

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.

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.

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>

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>

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

Table cells can display editing dialogs to do inline changes of 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.

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

Hi,

can i sort collumns using th buttons?

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

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.

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.

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

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