Monday, May 1, 2017

First look at Angular Material 2 Data Table

For anyone working with Angular 2, there's a number of options out there in the data table space, but noticeably lacking has been support for one in the Material 2 project.  If you're looking for good support of material styling, there's only a few options that I've found:

1. MDL - just a styled MDL table, or angularized version.
2. ngx-datatable
3. ng2-md-datatable

These are decent options depending on your needs, but if you've been wanting official version, we've been out of luck till now.  It looks like we finally are getting close to release DataTable in Material 2. Work has been visibly in progress for a while (and people have been begging for it!) over at the official tracking issue here: https://github.com/angular/material2/issues/581

Right now it's still sitting in a fork of the official repo, but I took opportunity to pull the base files out to take a look and get it running in a simple project.

So...for anyone who wants to play with the data table in the context of an Angular CLI based project, I kind of shoehorned the files from the branch into a minimal CLI project, and put the table on the AppComponent page. You can add it to any CLI project by basically following setup done in this base project.

Code is here: https://kmkatsma.github.io/md-table-cli-demo/

Running demo is here: https://kmkatsma.github.io/md-table-cli-demo/

One thing I can't figure out is how to get the headers to show without loading data in the table.  But overall, it seems to be pretty good approach.  I like that it just uses css for sizing and formatting, seems like that's good way to not have to build it into the api of the grid itself.  In any case, excited to finally get a chance to see the work being done!


No comments:

Post a Comment