Angular2

[jraadt]

This is a great library and on some projects we're starting to move to Angular2. Are there plans to make an Angular2 version?

[daniel-nagy]

Yeah I plan on, at some point, porting this to Angular 2.

[jraadt]

The Angular 2 Material team just indicated they are punting on a data tables component and wont start developing something until at least the end of the year. My guess is longer. md-data-table has a good opportunity to become the data table that developers go to for Angular 2. It's incredible in Angular 1 and I look forward to your Angular 2 port. Good work @daniel-nagy !!

[ollwenjones]

@daniel-nagy I'm curious if you've given any thought to what the design would be like in ng2? Would the template structure stay pretty much the same or (optionally?) consolidate using new ng2 tricks like ng-content and @ContentChildren(TemplateRef)?

[daniel-nagy]

@ollwenjones honestly I have't played around much with Angular2 yet. I imagine the structure would be mostly the same. Components should clean things up nicely in general.

[ollwenjones]

Thanks

[pantonis]

+1 Very very nice component. Please port it into Angular 2

[DzmitryShylovich]

@pantonis https://github.com/swimlane/angular2-data-table

[Koslun]

@jraadt Yeah with the announcement that they're basically only in maintenance mode for angular material 1 I think it's pretty definite that they won't be making an official version or try to integrate this. At least in the near future.

@DzmitryShylovich Thinking it might be intresting to perhaps try to integrate the styles in this project as a theme to https://github.com/swimlane/angular2-data-table. As it's a lot more feature-rich as a data-table whereas this project is primarily low-level styling for table's in general. @ThomasBurleson, the head of the angular material team has also previously indicated he was at least interested in the solutions of the ng1 version https://github.com/swimlane/angular-data-table.

[wmichaelfeltman]

Interesting. I started using this library first. Tried a few others, including the SwimLane one and eventually switched back. I really liked the SwimLane table but had a lot of issues trying to use it and it seemed to really stagnate for a while. I just visited the site while posting this and all of the demos appear to be working now. I have always liked the styling of md-data-table the best and think it adheres to the Material Design spec better than any of the others I've tried. md-data-table seems to leverage Angular Material the best of the data tables I looked at and feels more consistent with how Angular Material is implemented.

[amcdnl]

Hi all - angular2-data-table author here :) ...

@Koslun I'm absolutely interested in improving the material theme in my table. If you wanna collab with me on it, hit me up on gitter channel. We don't use material internally so I don't want to couple the component to that ( nor would anyway ) but if we can match general styling / etc that would be great.

As for my direction on the table, I aim to deliver a table solution that renders data fast and is flexible. It doesn't make any assumptions about the way you filter/search/edit/fetch your data. I find as I built applications each use case is different and the one-size-fits all filter/etc often just causes extra pain when trying to integrate and then of course it bloats the download.

@f1tech The angular1 version is still active, I'm using it in production for some time without issues. I haven't had time to address every concern that someone has brought up but always pointed them in the right direction and gave feedback if they wanted to PR and fix.

I'll be on ngAir next month talking about the table, would love feedback or questions you might want answered. https://plus.google.com/app/basic/events/crosrdtjjeh64edh931etvrra5g

[wmichaelfeltman]

@amcdnl thanks for responding here. Currently md-data-table is meeting all of my needs and we'll be in Angular 1.5.x for a while. There was a lot I liked about the swimlane data table. At the time I was evaluating md-data-table seemed to be more production ready. I'd love to see the 2 converge for Angular 2.

[Koslun]

@amcdnl Yeah I think I would be interested in helping out to some extent. In the short-term I am however more committed to trying to contribute to generator-angular-fullstack, where we're trying to make a transition to Angular 2.

In connection to that I also want to help move the generator to Webpack 2, TypeScript 2 and using Angular 2's offline compiler. Where I'm kind of waiting on Angular 2's offline compiler to become more production-ready with corresponding documentation and similarly also waiting on documentation for Webpack 2.

Think I'll be more free to help out after that but can at the very least give feedback and ball ideas in the mean time.

On that note, avoiding being dependent on Angular Material is one of the things I did not consider. Another is whether you were planning on supporting tree grids, but can see now that you are.

Regardless, I think getting angular2-data-table to comply with the material design specification can be broken down into two bigger features, where I would also advocate for a third.

1. "Just" making the table look more like the material design specification should be pretty doable and mostly just require some CSS changes, where this project surely can serve as an example. What you lose by not depending on Angular Material 2 in this respect is probably theming but not sure that it matters much for a table. Also figure that you separate the toolbar to a separate component.
2. The largest change or added feature I imagine is needed for the table is however inline menus, edit dialogs and other potential controls, like a datepicker. If any custom control would be included by default I think there would likely be a definite need for some kind of dependency on Angular Material 2 core and even more Angular material 2 components like the md-select component used for the inline menu in this table. Can think of two approaches to this. a. Some kind of plugin system. Where you separate this theme to a separate npm package which in turn has all of these dependencies or peer-dependencies. b. Be able to include any component or directive, with certain restrictions, into the cells of a certain column. Think this would be the ideal solution depending on the restrictions but imagine it would also be one of the trickiest things to do. It is however something you can easily do with this project given its more low-level nature.
3. A final feature I think would be neat is the ability to propagate a click event on each cell of a column to an arbitrary function. Where I figure adding an onCellClick EventEmitter would be ideal. Think this is radically easier than number 2 and something you would also need to do for number 2 either way. Or at least stop the row click event propagation like it is done in this table. Though it might be done very differently in Angular2-data-table.

@amcdnl General thoughts and which of the three do you think would fit well into Angular2-data-table?

[amcdnl]

1) Yes, totally agree. Wasn't a huge priority for me as I don't use that styling but I know its popular so I implemented it as a base.

2) There is no plans for date pickers/edit dialogs/menus/etc in this project. It is designed to be extremely light and be a grid not a bunch of stuff crammed together. If your looking for that, I'd look at something like KendoUI.

3) You can absolutely do all that already, we have expressive cell templates where you can define your own components/data/etc for each cell. See this: https://github.com/swimlane/angular2-data-table/blob/master/src/demos/expressive.ts#L26

[Koslun]

@amcdnl Regarding 3), interesting and very cool :), totally missed that. Then I take it my 2 (b) is more or less done already. As you mentioned and I see now is described in the example documentation you can just create your own "rich component within your grid" already. So I take it that you could just include any angular material component or some other cool component already. As I tried to mention, I think this is definitely the ideal approach, so think 2) is a good stance. The angular2-data-table demos seem to not be rendering for some reason so haven't quite tried it out yet though.

What I still wonder is if you can bypass the click event on a cell-by-cell basis. I.e. will the row selection be triggered or completely absorb every click on the cell even if I put an ngClick on the cell? Or can I disable it depending on the cell? So that you don't get the row being selected when you're trying to interact with a cell. Like when you're changing an inline menu you've thrown into a cell.

Seems like the ng2 documentation isn't there yet for Template ref but a bit about it in the Basics section and in the Developer Guide. However still not completely sure how you're using the template so might look into that later.

[amcdnl]

@Koslun

Yes, thats the approach i'm taking. Keeps it nice and lite.

Ugh, yes I know the demos are rendering I've been hacking at it to make it work better with webpack and broke the output file. Will be working on that Friday.

You can hook whatever event you want up, your template runs outside the scope of the table and I don't swallow those events.

Yes, it was very tricky hehe. I worked w/ some of the core angular guys to figure out a clever approach.

[Koslun]

@amcdnl

You can hook whatever event you want up, your template runs outside the scope of the table and I don't swallow those events.

Oh ok, that sounds great. So does that mean that putting in a template which listens to these click events will swallow up any click events directed at the entire row and thus avoid row selection being triggered when clicking on cells with ngClick?

Yes, it was very tricky hehe. I worked w/ some of the core angular guys to figure out a clever approach.

Yes, I can only imagine, great job with both projects so far :+1:. Definitely moving to use Angular2-data-table when I move to Angular 2 and think this project (md-data-table) should definitely just integrate their styles into the material design or similar theme and possibly create multiple other separate components like an edit-dialog component and a md-data-table-toolbar component.

Given that @daniel-nagy or someone else doesn't beat me to it, I'll try to help with that contribution effort with aforementioned material design tweaks.

[ollwenjones]

just wrote myself a JIRA to try the swimlanes table out @amcdnl :smile: My availability to contribute to ng2-material table turned out to be pretty limited. :frowning:

[amcdnl]

Selection control is optional and not really tied to any state inside the component, you pass it whats selected so you could turn off selection and just do your own thing if you had some special case.

I welcome PRs! Look forward to seeing what you guys come up with!

[ollwenjones]

didn't catch what was said about material spec earlier, but I spent some time getting the ng2-material styling tight with the spec, if that SCSS helps anyone. The only thing that isn't right that I know of is the checkbox style got bumped in the upgrade from ng2-material checkbox to official material 2 checkbox.

[Koslun]

@amcdnl

Cool seems manageable then. Will look into it more later on but take it that a PR for selection is not necessarily needed. Might be worth demonstrating as a demo though if nothing else.

@ollwenjones Probably. Need to add a few styles to get Angular2-data-table to mirror the material design specification as well as this project. While we don't want to have to include a lot of ng2-material. Thinking you could probably use the expressive templates to add ng2-material checkboxes in the first column. Thus likely making it appropriate to showcase a demo of both a selection and checkbox setup that mirrors the material design specification more closely.

[lgt]

I checked all available alternatives. But this one rocks! Would be cool to see this ported to angular2

[Jacooscript]

Up