md-data-table

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)

[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?

[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!