md-data-table

[jelbourn]

No description provided.

[jelbourn]

Current status: in the initial design / prototyping phase.

[jeroenhabets]

Hi @jelbourn, @hansl, with Angular 2.0 nearing release our interest in a data-table component is waxing... Do you have an update that you could share? TIA

[entzik]

desperately waiting for this and the date picker... an update would be highly appreciated. thanks!

[s3ppo]

any news on this? :)

[droidment]

Waiting for this too...

[NomanYaqoob]

when will be the except release of data-table?
thanks

[memark]

Any hint on when development might be started on this?

[mmacfadden]

We are an fairly impatient bunch aren't we (myself included)? I wonder if there is something we can do to help rather than just keep pining for updates. As it stands I think this component is still fairly far down on the priority list behind common things like menus, text areas, dialogs, etc. As you can see here:

https://github.com/angular/material2/blob/master/README.md#feature-status

I desperately want this as well. But it might be a while unless we can do something to help.

[leocaseiro]

There's a non-official angular material called ng2-material which contains a very nice md-data-table

I'm using temporary in my projects.

[md-gh]

is ng2-material compatible with the latest version of material ?

[leocaseiro]

@fatherdougal, there's a beta version that seems compatible:

yarn add --save ng2-material@beta

or

npm install --save ng2-material@beta

Update: The ng2-material@0.8.1 has been just released and it's compatible

[alsami]

They have just release a new version in the past 24hours
https://github.com/justindujardin/ng2-material/blob/master/CHANGELOG.md

[FredvanRijswijk]

Any status/update on this... Think most apps want use this

[andlcool]

any update for data table? Thanks. :)

[da45]

meanwhile, I am using Twitter Bootstrap,

[bastienlemaitre]

#1935 @jelbourn

[elvisbegovic]

No news here?!?

[ori-ht1]

md-data-table will be essential to a wide scope of apps. @jelbourn you must be very busy with beta.0 but can you please give us an update on the roadmap of md-data-table? It is very much appreciated.

#224

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

[radoslavpetranov]

So glad data tables will find their way into material this time. I used DevExpress for data tables with Angular 1. DevExpress have created a truly outstanding product - their table is more or less an excel table in a browser in terms of data visualization. Having said that, even though the material table will most probably be significantly less powerful (at least at first) I'm so glad I no longer will have to rely on external libraries for this. Thank you ng team!

[daniyalnagori]

Any News about availability ?

[elvisbegovic]

any news here

[brandon1525]

How to remove rows from the data table? The table can change values, but when I try to delete a row I could not, the variable is updated, but the table is not updated,, some solution??

[yusijs]

@brandon1525 you need to change it by creating a new array
// remove the items first, then..
this.dataset = [...newDataset];

[Ramlanka7]

@irowbin Hi, I am also looking for fixed header, did you find on how to do it ?

[unnamed666]

just do it with css for sticky header, my md-table is inside div#md-table-wrap and my css looks like this:

#md-table-wrap{display: flex; height:100%; overflow: hidden; position: relative;}
.mat-table{width:100%; height: calc(100% - 46px); overflow: scroll; margin-top: 48px;}
.mat-header-row{position: absolute; top: 0; left: 0; width: 100%; background: #fff; z-index: 5}

and it works fine.

[leblancmeneses]

has anyone figured out how to implement horizontal scroll? /cc: @irowbin

[irowbin]

@leblancmeneses add this css

.mat-table{width:100%;  overflow: scroll;  }

[georgeedwards]

With regards to the docs on this feature, I still think there is work to be done. Am I right in thinking there is no example anywhere of how to interact with a real backend api ? In the examples there are the following properties dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]); and get data(): UserData[] { return this.dataChange.value; } and connect() on the data source, which are the bit's I think are required? If that is it, how for example does one trigger a new data query, for example on a pagination or sort event?

Correct me if I am wrong, but I don't see this documented anywhere?

[irowbin]

@georgeedwards Yeah you're right! The angular docs less informative. Most of the docs descriptions are same as the code docs. Can't figured it out that what things goes to where and which things should be implemented for JiT/AoT Comparing to the releases, Documentation updates are too slow . 😆

[jrood]

@georgeedwards @irowbin I think you guys are definitely right that there is needed documentation, and I appreciate that you are putting a high value on that. At the same time, isn't there sort of an understanding, since this is open source / free software, that Google isn't really obligated to give us anything at all? I'm glad that we have md-table to try now rather than having to wait until the docs are all ready. If you guys want to submit any improvements to the docs, I'm sure your pull request would be welcome.

[georgeedwards]

@robwormald @jelbourn @shlomiassaf Any thoughts on the above? If anyone could comment to help me get going, then I would be more than happy to prepare a PR if that would be welcome?

Either way, it would be great to get something written somewhere about what is needed from the datasource somewhere.

[irowbin]

@jrood Yeah! Thats why we love an open source. 😉 @georgeedwards
The http datasource example is here https://plnkr.co/edit/VAvjp7t5jqtUKfHv4ogM?p=preview
The checkbox example is here https://plnkr.co/edit/EU3BBlViWpPf2NJW4PXx?p=preview
Expand/collapse row on click example is here https://plnkr.co/edit/ZL6OnWwVmOCPYetp96XX?p=preview and http with sorting, paging is here https://plnkr.co/edit/VAvjp7t5jqtUKfHv4ogM?p=preview 😃

for instance

[jrood]

@georgeedwards thanks. I'm not sure exactly, but I imagine that you might wrap your calls to the api in some service

@Injectable()
export class MyDataService {
  constructor(private http: Http){}
  currentPage: BehaviorSubject<any[]> = new BehaviorSubject([]);
  getPage(skip,take){
    this.http.get(apiUrl+`?skip=${skip},take=${take}`)
      .subscribe(res => this.currentPage.next(res));
  }
}

and then you might tap into an (ngModelChange) event on the pager to trigger a call to getPage. And then the data source for your table would look like this

export class ExampleDataSource extends DataSource<any> {
  constructor(private myDataService: MyDataService) {}
  connect(): Observable<any[]> {
    return this.myDataService.currentPage.asObservable();
  }
  disconnect() {}
}

I hope that's at least somewhat useful.

[dev054]

@irowbin Btw, any idea on how to completely disable the selection of specific rows? Only setting [disabled]="true" on md-checkbox doesn't solve this, because user still can select a row checking either the master toggle or clicking directly in the row.

Actual behavior:

https://plnkr.co/edit/ixlAhiNaMR3qb1Dg3pEl?p=info

Excepted behavior (note that the rows are completely disabled):

https://codepen.io/anon/pen/BjvLVJ?editors=1010

[marct83]

How do I just take an array of objects and put them in a md-table? For the life of me I can't figure it out. It really shouldn't be overly hard. Does someone have an example? I have the table all setup with the columns etc. I just can't wrap my head around getting this data in there. The examples aren't really helping as all of the ones I've seen create the data in the database.

[leocaseiro]

@marct83 try check this example https://github.com/angular/material2/tree/master/src/demo-app/table out

[marct83]

Thanks @leocaseiro I'll go through it and see if it helps. Although this all seems fairly overly complicated to just display rows of data from an array. :)

[yusijs]

@marct83 keep in mind @jelbourn's comment that they are planning for a simpler table just taking an array of objects - this is just a first iteration :-)

[savaryt]

It would be great to have a container wrapping (ex: <md-row-wrapper>) rows to allow scrolling with persistent headers.

ex:

<md-table>
  <md-header-row>
  <!-- ... -->
  </md-header-row>
  <md-row-wrapper>
    <md-row>
      <!-- ... -->
    </md-row>
  </md-row-wrapper>
</md-table>

 .mat-row-wrapper {
  overflow-y: auto;
}

[CDDelta]

@ThibaultSavary #5885 is already tracking this issue. You can also find other features by filtering to issues with the label 'md-table' :-)

[pueaau]

@irowbin regarding the expandable rows (https://plnkr.co/edit/ZL6OnWwVmOCPYetp96XX?p=preview)
In the plonker it says that this is not the recommended approach. What would be the recommended approach?
Edit: @willshowell I just discovered that this is you plonker, what is the better approach?

[irowbin]

@pueaau I've tested with both JiT/AoT and working well for the current md version. I don't know the recommended approach for now. Maybe the angular guys explain about this and i will update with that approach as well. Thanks

[pueaau]

@willshowell After reading the table design document (https://docs.google.com/document/d/1ZyKhwrgqfTBAn7saTq2jPlep2_CwSw5DeoZ8UbaXrC0) I guess cdkRowDefWhen would be the way to go. This does not seem to be implemented yet. Is there another way?

I also tried to create a row including cells using a ComponentFactoryResolver. The row part sort of worked, but I couldn't figure out the table part yet. Guess I'll have to have a closer look at the code. Any suggestions are welcome.

[willshowell]

@pueaau @irowbin I put that warning there because of this response to it. Instead of adding content between rows, it should go inside of them. In the future, row heights will be used to make calculations about what is visible, and having untracked content will throw that off. I've been meaning to rewrite the example (hack) but haven't found time.

Concerning cdkRowDefWhen, see this issue #5887

[irowbin]

@willshowell Thanks. My company is building CMS/CRM/ERP using angular & material2 so the table is required almost everywhere. I've been searching features like expand/collapse row, render visible rows only, froze columns from both left/right, inline editing, column filter etc. Similar features like this https://handsontable.com/examples.html but yeah, we are asking these features too early because can't stay out from this cool and opensource tools you're providing with rich features. 😄

[vapits]

Hey all, @irowbin first of all 1000 thx for your examples man! Amazing job!

I would love to see a responsive example, I could figure it out myself unfortunately to share it with you . :/

Horizontal scrolling is not working for me or even the row doesn't change height size if content in a column is to big so it's overlapping the rows above and below of it.

[irowbin]

@vapits Thanks but the plnkr examples are provided from the angular team i guess. 😎

[SalahudinMalik]

Hi dear, I am getting this error while accessing data from API

[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.}