iamisti / mddatatable Goto Github PK

Thanks for the effort updating this great feature. I came up with the issue using a basic structure (slightly simplified version):

<md-data-table selectable-rows="true" sortable-columns="true" animate-sort-icon="true">
    <md-data-table-header-row>
        <md-data-table-column sortable-rows-default> {{lo.Type}} </md-data-table-column>
        <md-data-table-column align-rule="left"> {{lo.Name}} </md-data-table-column>
    </md-data-table-header-row>

    <md-data-table-row ng-repeat="item in si.items">
        <md-data-table-cell html-content="true">
            <!-- BUG: sorting not working on this column -->
            {{item.ItemType)}}
        </md-data-table-cell>
        <md-data-table-cell>{{item.Name}}</md-data-table-cell>
    </md-data-table-row>
</md-data-table>

And I did some further experiments. After added the html-content="true" to any of the md-data-table-cell, it will prevent sorting from re-rendering the whole column, even when I clicked the header of the same column. However, all other rows are still being correctly sorted.

I'm doing so because I want to insert different md-icons (basically different names of the icon) into the cells, there might be other better approaches. Please suggest if you know any :)

BTW, I'm still using v1.0 as I had some errores when using later versions. I didn't have the time to test whether the error came from some conflicts as I'm also using Angular-material.

TypeError: Cannot read property 'hasOwnProperty' of undefined
at new mdtPaginationHelper (md-data-table.js:200)
...

Hi,

Great datatable! I like it when the Google guidelines are used as much as possible.

The issue is that when you have a column sorted descending and you click another column, the sort direction for the new column still is descending, but the arrow is pointing in the ascending direction. I when you click another column, the initial direction should always be ascending.

Want me to make a pull request to fix it?

Hi

on adding new item in array always pushed down . where as i m doing un-shift and its expected to be added at top.

http://codepen.io/salmanzafar/pen/eJMmgM
can someone help me ? why its pushing down

(sorry I see that my issue is a duplicate)

In my case the value of the cell does not allow proper sorting:

<md-data-table-cell>
     {{ node.size | bytes }}
</md-data-table-cell>

This may return eg "9MiB" and "1GiB". I need to sort in bytes. This is my proposal.

<md-data-table-cell sort-value="node.size">
      {{ node.size | bytes }}
</md-data-table-cell>

Hi! I tried using the table. Our application uses the javascript 'strict mode' but because of that I get the following errors:

Error: [$injector:strictdi] mdDataTableDirective is not using explicit annotation and cannot be invoked in strict mode (...)
angular.js:12416 Error: [$injector:strictdi] mdDataTableHeaderRowDirective is not using explicit annotation and cannot be invoked in strict mode (...)
angular.js:12416 Error: [$injector:strictdi] mdDataTableColumnDirective is not using explicit annotation and cannot be invoked in strict mode (...)
angular.js:12416 Error: [$injector:strictdi] mdDataTableRowDirective is not using explicit annotation and cannot be invoked in strict mode (...)
angular.js:12416 Error: [$injector:strictdi] mdDataTableCellDirective is not using explicit annotation and cannot be invoked in strict mode (...)

Add possibility for rowspan & colspan...

Running bower install mdDataTable gives an error

I'd be glad to detail my use case if you're interested!

Just some ideas that will make the table a little more attractive:

• animating the sort icon when changing sort direction
• put a ripple effect when clicking a sortable header (it's an element with button behaviour)

I can implement it if you want,

Hi,

I am searching for the option to have an edit action on each row. I mean by having an edit icon at the end of the row with action to edit the cell's in a row. So, not by selecting the row first and then have an action to edit the the cell's of the row, but directly a dialog after clicking on the edit pencil.
In case no i could ask some developers to help you, but it would be graet if you can guide them while developing this function.

Let me know what you think.

Greetings and my compliments for this very good data table. In my opnion one of the best in the sense of following the google guideleines.

Oops, it's me again. This is a strange one.

If the data for table rows are re-assigned, old rows are not deleted. Demo is available here (note the change after 2 seconds).

I had a look at the code, it seems that angular.js did try to remove the old data/row (If you set a break point around Line 27530 (search the comment "remove leftover items"). I don't know why this is happening, as I saw $scope.rowDataStorage = [] in mdtRowDirective. And I'm confused about why the pagination works when change the number per page choice.

TypeError: _.get is not a function
at md-data-table.js:244
at Function.m.each.m.forEach (underscore-min.js:5)
at addRawDataToStorage (md-data-table.js:243)
at Object.fn (md-data-table.js:233)
at r.$digest (angular.min.js:131)
at r.$apply (angular.min.js:134)
at g (angular.min.js:88)
at R (angular.min.js:92)
at XMLHttpRequest.v.onload (angular.min.js:93)

HTML:

<md-card style="margin:0px">
        <md-subheader>Filter by search</md-subheader>

        <md-input-container style="margin:15px;">
            <label>Search</label>
            <input type="text" ng-model="filterName">
        </md-input-container>

        <div ng-hide="true">
            {{(filteredItems = (nutritionList | filter: filterName))}}
        </div>
    </md-card>
    <mdt-table
        paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,50]}"
        mdt-row-paginator-error-message="Error happened during loading nutritions."
        mdt-row="{
                'data': filteredItems,
                'table-row-id-key': 'id',
                'column-keys': ['name', 'calories', 'fat', 'carbs', 'protein', 'sodium', 'calcium', 'iron']
        }">
        <mdt-header-row>
            <mdt-column align-rule="left">Dessert (100g serving)</mdt-column>
            <mdt-column align-rule="right">Calories</mdt-column>
            <mdt-column align-rule="right">Fat (g)</mdt-column>
            <mdt-column align-rule="right">Carbs (g)</mdt-column>
            <mdt-column align-rule="right">Protein (g)</mdt-column>
            <mdt-column align-rule="right">Sodium (mg)</mdt-column>
            <mdt-column align-rule="right">Calcium (%)</mdt-column>
            <mdt-column align-rule="right">Iron (%)</mdt-column>
        </mdt-header-row>
    </mdt-table>

tested with dependencies:

"dependencies": {
    "jquery": "~2.1.4",
    "angular-material": "master",
    "components-font-awesome": "master",
    "angular-messages": "~1.4.8",
    "angular-route": "~1.4.8",
    "angular-loader": "~1.4.0",
    "angular-mocks": "~1.4.8",
    "angular-paging": "~2.1.0",
    "ngmap": "~1.16.7",
    "angular-environment": "~1.0.3",
    "mdDataTable": "~1.2.0",
    "underscore": "~1.8.3",
    "lodash": "~3.10.1",
    "angular-aria": "~1.4.9",
    "angular-animate": "~1.4.9"
  }

Any ideas ?

I am using the table to hold search results. When I perform a search, the table behaves as I expect. However, if I do a column sort, I will see results from previous searches mixed in.
Is there a way to clear out past results from the table? Clearly, replacing the model object is not doing the trick :)

Is the editable-field already under development? I can't get it working

Hi

Thanks for putting up really a workable solution for loading tabular data . i wanted to edit row by providing an icon on most rite with check box

basically m moving to angular material from traditional design and in that design i have edit icon with check box m trying to use it with provided data table but not able to make it ?

can u help me

I see, there is a table horizontal scrollbar for column scroll.
Do you plan to develop a vertical scrollbar feature with fixed row header?

This is the component for which I am looking exactly. If it has responsive feature like datatables (https://www.datatables.net) instead of horizontal scroll then it will be very helpful.

Hi there,

I saw your demo and since I'm going with angular-material I would like to use your data table.

I cloned your repository and after npm install and bower install, did a gulp on the main directory. Most tasks except the test and run server tasks seemed to work. However, I don't see anything like a dist folder with a file like md-data-table.js that I can include in my project. I saw the same project when I tried to do bower install md-data-table.

I was wondering if it would be possible for you to put this project on bower in such a way that rather than the user pulling the entire project with dependencies, it would be extremely helpful if after a bower-install I could just include 1 .js file and 1 .css file into my project in order to use your module.

FYI

I got this output when I ran gulp

[19:04:57] Using gulpfile ~/Dev/third_party_modules/md-data-table/gulpfile.js
[19:04:57] Starting 'default'...
[19:04:57] Starting 'start development webserver'...
[19:04:57] Finished 'start development webserver' after 6.41 ms
[19:04:57] Starting 'build'...
[19:04:57] Starting 'test'...
[19:04:57] Starting 'unit'...
[19:04:57] Server started http://localhost:9000
[19:04:57] LiveReload started on port 35729
[19:04:57] Starting Karma server...

/home/amarish/Dev/third_party_modules/md-data-table/node_modules/karma/node_modules/di/lib/injector.js:9
throw error('No provider for "' + name + '"!');
^
Error: No provider for "framework:jasmine-jquery"! (Resolving: framework:jasmine-jquery)
at error (/home/amarish/Dev/third_party_modules/md-data-table/node_modules/karma/node_modules/di/lib/injector.js:22:68)
at Object.parent.get (/home/amarish/Dev/third_party_modules/md-data-table/node_modules/karma/node_modules/di/lib/injector.js:9:13)
at [object Object].get (/home/amarish/Dev/third_party_modules/md-data-table/node_modules/karma/node_modules/di/lib/injector.js:54:19)
at /home/amarish/Dev/third_party_modules/md-data-table/node_modules/karma/lib/server.js:321:14
at Array.forEach (native)
at Object.exports.start (/home/amarish/Dev/third_party_modules/md-data-table/node_modules/karma/lib/server.js:320:21)
at Object. (/home/amarish/Dev/third_party_modules/md-data-table/node_modules/gulp-karma/lib/background.js:3:8)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:902:3

[19:04:58] 'unit' errored after 957 ms
[19:04:58] Error in plugin 'gulp-karma'

Do you have plan to implement a pagination feature ?

Hi, is there a way to refresh the table via ajax with an external button?

just copied everything from the demo and the search is not working.

had to change from {{(filteredItems = (nutritionList | filter: filterName))}}

to {{filteredItems = (nutritionList | filter: filterName)}}

(bracket around filteredItems)

I am getting the following error when trying to use md-data-table in my project.

Error: [$compile:multidir] Multiple directives [mdButton, mdButton (module: material.components.button)] asking for transclusion

Is this because of mdButton directives in both ngMaterial and md-data table? How can I fix this?

I am trying to use your "editable-field" for "md-data-table-cell" and the cell remains the same. I took the demo project and tried to edit to playaround it

I upgrade the version and now I cannot use ng-click on mdt-cell or mdt-row.

There is another way to put arbitrary actions on the table?

Hi,
Is there a way to apply filters to ajax loaded table content ? something like
'column-keys': [
'speed | bytes',
],
and the possibility to concatenate two fields of the reply into one columns like {{ loaded_bytes }} of {{ total_bytes }}

Obviously i can modify my backend code to implement this but i think that implement it in mdDataTable would be better
Thanks in advance

I believe it's a new issue introduced since 1.0.x.

Tested using the demo codepen, with {{$scope.Calories = "Calories";}}.

Bind element will be shown as the row content {{header}} rather than desired values set in js.

<mdt-header-row>
    <mdt-column>
        {{header}}
    </mdt-column>
</mdt-header-row>

Correct me if I'm supposed to use something else instead.

Hi, thanks for creating this module! Unfortunately, I'm having a little trouble using it. I took your example usage of the mdDataTable and put it in my view and (after including your module in my project), and get the following error. Any ideas of what I might be missing? Thanks!

Error: [$compile:ctreq] Controller 'mdDataTable', required by directive 'mdDataTableHeaderRow', can't be found!

Example:

                <md-data-table-row ng-repeat="node in nodes | orderBy:['type', 'name']"
                                   ng-class="{'ani-slide': nodes != null}">

Error is:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 19 of the expression [{anislide: nodes} {'selectedRow': getRowOptions().selected}] starting at [{'selectedRow': getRowOptions().selected}].
http://errors.angularjs.org/1.4.4/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=19&p3=%7Banislide%3A%20nodes%7D%20%7B'selectedRow'%3A%20getRowOptions().selected%7D&p4=%7B'selectedRow'%3A%20getRowOptions().sele

Fiexed table heading and only scroll the table body. Table should occupy its parent's element height.

leave check-box checked while clicking on the row also

Any thoughts on adding support for virtual repeat?
I think it'd go very well with adding vertical scrolling with a fixed header. Effectively laying the groundwork for performant infinity scrolling.

Hi there,

Another question was that I saw your docs and didn't really see in the configuration how I am supposed to configure a column such that it has icon buttons where I can set ng-click attributes to controller methods on my scope.

Is this possible on your table?

Amarish

Hi,

I forked the project but can't achieve to lauch gulp correctly. Seems to have a problem with bower's path directory or something like this...
I ran npm install && bower install. Is there anything else I forgot ?

Need a feature to use Ajax loading and virtual repeat...
For example I need to show all record from database with custom html fileld (additional actions for example)
Can you help to realize that?

Previously it was possible to use a md-button inside the . But this is no longer possible, since the transclude does not meet this requirement.

Follow the code in md-data-table.js:

transclude(function (clone) {
//TODO: better idea?
var cellValue = $parse(clone.html().replace('{{', '').replace('}}', ''))($scope);
mdDataTableRowCtrl.addToRowDataStorage(cellValue);
});

It would be more consistent if a row is defined by mdt-row element no matter where the data comes from. An AJAX response should update $scope collection and the rest is up to Angular. ;)

Olá,

Meu nome é Johnny e gostaria de usar o md-data-table no meu projeto de estudo. Fiz a instalação através do "bower install". Porém não consigo implementar. Pode meu ajudar?

Grato!

bower.json

{
"name": "myProject",
"description": "My Project",
"version": "0.0.1",
"homepage": "...",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.4.x",
"angular-animate": "^1.4.x",
"angular-aria": "^1.4.x",
"angular-material": "^0.9.x",
"material-design-icons": "2.0.x",
"angular-ui-router": "^0.2.15",
"md-data-table": "0.0.0"
}
}

$ bower install
bower md-data-table#0.0.0 not-cached git://github.com/iamisti/md-data-table.git#0.0.0
bower md-data-table#0.0.0 resolve git://github.com/iamisti/md-data-table.git#0.0.0
bower md-data-table#0.0.0 ENORESTARGET No tag found that was able to satisfy 0.0.0

Additional error details:
No versions found in git://github.com/iamisti/md-data-table.git

Angular data table implementation of google material design. This component is UNDER DEVELOPMENT. First release: 26th of July ??

Is there an option to fire an event whenever a row is selected/unselected?
I tried ng-click on the mdt-row but it doesn't fire at all

Having issues with my karma tests and I'm trying to resolve and think it's a versioning issue.

Are you able to confirm if they work with the following?
Angular 1.4.7
Angular-Material 0.11.1

Thanks!