iamisti / mddatatable Goto Github PK
View Code? Open in Web Editor NEWAngular data table complete implementation of google material design based on Angular Material components.
License: MIT License
Angular data table complete implementation of google material design based on Angular Material components.
License: MIT License
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.
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 ?
Angular data table implementation of google material design. This component is UNDER DEVELOPMENT. First release: 26th of July ??
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?
I see, there is a table horizontal scrollbar for column scroll.
Do you plan to develop a vertical scrollbar feature with fixed row header?
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'
Running bower install mdDataTable
gives an error
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!
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)
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 (...)
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,
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?
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 :)
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.
(sorry I see that my issue is a duplicate)
Is the editable-field already under development? I can't get it working
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
I'd be glad to detail my use case if you're interested!
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
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
Add possibility for rowspan & colspan...
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
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);
});
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.
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-icon
s (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)
...
Do you have plan to implement a pagination feature ?
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
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 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
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. ;)
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?
Just some ideas that will make the table a little more attractive:
I can implement it if you want,
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!
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
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!
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?
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
Hi, is there a way to refresh the table via ajax with an external button?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.