md-data-table

[Gregcop1]

Hi.

What do you think about adding a component for Data Table? It could be pretty useful on admin app.

Features:

• apply material design recommandations about header, row and cells
• activation of checkbox on each row and a master checkbox to rule them all. The idea is to allow multiple selection and fired action on change
• tooltip on header label
• auto truncate of header label

The idea is to be as transparent as possible. Integrator don't have to learn a new way to build data table, so it could be something like this :

<md-data-table [selectable]="true" (onSelectableAll)="logEvent($event)" (onSelectableChange)="logEvent($event)">
  <thead>
  <tr>
    <th class="md-data-table-cell-non-numeric">Material</th>
    <th>Quantity</th>
    <th truncateAt="20">Unit price</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="#material of materials" [selectableValue]="material.id">
    <td class="md-data-table-cell-non-numeric">{{ material.name }}</td>
    <td>{{ material.quantity }}</td>
    <td>{{ material.price }}</td>
  </tr>
  </tbody>
</md-data-table>

I've already worked on the first steps for this feature in another repo (I have an idea of revamp about using more observable but it's still a WIP)

[a8775]

+1

[joshwiens]

The fact that material doesn't have a data table baffles me, also happens to be why it isn't used in any of my production apps. Here's to hoping Material2 doesn't punt to the community and make us roll our own again.

[jelbourn]

We definitely plan on building one of these eventually, but it's a long way off due to the complexity of building something that will be feature-rich, performant, and accessible. Closing this issue for now since it's not actionable in the short-term. Towards the end of 2016 we might have more to say on the subject.

[Gregcop1]

It was an issue before PR but OK. I think you should take advantage of community who really want to help you and just manage the efforts but you certainly have more experience than me on managing this kind of project. Towards end of 2016 I think a lot of solutions will emerge and you'll just have to chose. :-)

[ollwenjones]

Towards end of 2016 I think a lot of solutions will emerge and you'll just have to chose.

Agreed.

[cm0s]

I do totally agree with @d3viant0ne. A decent table is really a must have for a lot of corporate web applications. For now I use a forked version of PrimeTek's data-table solution (https://github.com/primefaces/primeng). They did a good job and added a lot of features. Can be a good starting solution for md-data-table.

[Gregcop1]

@cm0s If you want there's a basic implementation of md-data-table on ng2-material project. ATM, all the features are not ready but it's a good start in my opinion. We try to stick with basic material design recommendations and angular/material2 practices to make the switch to official component easier when it will be ready.

[damianobarbati]

+1 absolutely a must

[ghost]

+1 absolutely a must

[pantonis]

+1 we need it. It is the most important control. We dont need buttons inputs we need this.

[zahlprish]

@pantonis we don't "need" anything, if you're viewing this you're probably a developer and with that said you can/could or even probably should implement your own data table component for use. I'll take whatever this incredible Dev team will provide us: buttons, inputs because it is all high quality.... oh and FREE!

[damianobarbati]

@pantonis @zahlprish I think Pantonis meant he'd like the material team to focus on a component like md-table rather then perfectioning md-button and md-input.
I agree with you zahlprish that we should appreciate whatever this amazing team provide us as it is: their effort is a free and high quality bless!!!
Nonetheless, expressing our needs can better address their efforts (in case they take them into account off course!).
Nobody better then the material team can develop a generic/customizable/high-quality/well-crafted datatable component and that's the most important part of whatever CMS you'll be ever developing.
I'd rather use the solution they provided rather then one provided by anybody else (even me).
The angular-material 1 was amazing, but with a md-table component and md-datetime component it will be perfect.
No more looking around for missing components, 99% of needs addressed :)

[pantonis]

@zahlprish I don't think that anyone could develop a better control than the material team. That is why I opened a ticket here. I don't know if you are a developer but if you are then a data table is something you use in 95% of your projects ;). I highly appreciate the work done by the guys.
@damianobarbati covered me 110%.

Hope the angular-material team will push this control up into their backlog because there is not anything yet for angular 2. Saw a couple of data tables but they are buggy, very bad design and not feature rich.

[Gregcop1]

Maybe you should take a look at this project. The goal is to provide temporary components which are deprecated as soon as the official team provide stable ones. We try to fit angular 1 material and angular 2 styleguide, to be as near as possible at what component should look alike in the official version.

[pantonis]

@Gregcop1 thanks. This control looks very nice.

Unfortunately filtering, pagination, aggregations and exporting are not implemented in this control. As I said I am coming from an enterprise development environment and this kind of functionality is more than mandatory, :)

[Gregcop1]

Pagination is in review, but in a independent component, cause you can use pagination with other thing than table. Sortable column is in progress.
For the other features, feel free to contribute. ;) It's the idea about open source projects. I also in a development firm and instead of doing my own specific and fat components I try to think of reusable one and push them as pull request cause it can help people and you have immediate feedback to your work.
BTW, I don't see the link between export and material design. Material design is just UI/UX... it shouldn't take care of data manipulation in my opinion. Components expose Input and Output to display your datas in comfortable layout but that's it.

[aminebizid]

Enterprise dev using alpha.... Strange

[aminebizid]

@pantonis primeng may be a solution for you until data-table release

[pantonis]

@Gregcop1 thanks

@Zigzag95 not strange at all if you want to use latest technologies and not stay with legacy ones ;). Project is a greenfield one and expected to be released in 3-4 months. I am trying to use ng2 which is way better than NG1. After all everything starts from alpha.
and yes primeng is the best I could found so far. the guys do very good job

[jelbourn]

See #581

This issue is out of date. When we decided to no longer work on a dart version of material, that freed up cycles to start on a data table. It's still a long way out, but currently in the design and prototyping phase.

[zahlprish]

I am thinking that one could achieve the results of "md-datable-table" (such as filtering, pagination, aggregations) fairly easily by just taking advantage of Angular 2 Pipes.

[hindmarch]

Towards the end of 2016 we might have more to say on the subject.

Hi it's me. The end of 2016. Any news?

[JanStureNielsen]

@hindmarch @damianobarbati -- this issue is closed. As Jeremy noted above, the md-data-table work is tracked in #581.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}