md-data-table
jelbourn opened this issue · comments
Current status: in the initial design / prototyping phase.
desperately waiting for this and the date picker... an update would be highly appreciated. thanks!
any news on this? :)
Waiting for this too...
when will be the except release of data-table?
thanks
Any hint on when development might be started on this?
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.
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.
is ng2-material compatible with the latest version of material ?
@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
They have just release a new version in the past 24hours
https://github.com/justindujardin/ng2-material/blob/master/CHANGELOG.md
Any status/update on this... Think most apps want use this
any update for data table? Thanks. :)
meanwhile, I am using Twitter Bootstrap,
No news here?!?
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!
Any News about availability ?
any news here
Any news?
When there's an update it will be here.
@jelbourn awesome!hope with virtual-repeat
@jelbourn is the design process open somewhere, or is that phase just internal discussions?
Just prototyping / planning at this stage.
Alright, thanks. Looking forward to the result ☺
Looking forward to material2 data-table.
Thanks.
Very exciting abut that,
I am currently working on a simple, temporary non-material based data table that I'll use until I'm ready to migrate my project to material. I was hoping to avoid adding filtering/sorting to this widget since it's just a temporary thing but apparently that's a requirement I won't be able to skip so I'm updating my backend right now to handle more complex data requests.
In terms of design, have you guys already decided on what the data requests would look like? For example if I were to filter the table by a dateCol >= 12/12/2014 and firstName contains "Kev" OR country = "USA", sort all of this by col1 asc and col 2 desc and get the second page of the results, do you already have an idea in what form would this information be provided by the data table? In case you are reusing an existing concept/format could you share what would that be so we could read up on it a little?
Thanks in advance!
@radoslavpetranov if material design is not important for you, you can use right-angled library instead of implementing your own data table. This is pretty functional and stable library.
Thanks for the suggestion @fshchudlo! I already have the table implemented and I'm just looking to add sorting and filtering which is not that big a deal. Since I will be switching the whole app to material in a month or 2 I was hoping to just see if there's any information available on what the data API would look like so that I'll have to change my backend as little as possible when switching to material.
Thanks again though!
And just to clarify what I mean, this is what that particular data request from my previous post would look like from a DevExpress data table for example
{
"filter":
[
[
[ "dateCol", ">=", "12/12/2014" ],
"and",
[ "firstName", "contains", "Kev" ]
],
"or",
[ "country", "eq", "USA" ]
],
"sort" :
[
{ getter: "col1", desc: false },
{ getter: "col2", desc: true }
],
"pageSize" : 20,
"page" : 2
}
Is there any super rough estimate on eta for data table? Are we talking weeks, months or a quarter or two away ? Is there a recommended alternative in the meantime like a custom flexbox or something else ?
While I wait for this datatable, I have used http://www.primefaces.org/primeng/#/datatable in a few places (we tried several different datatables; most were too buggy for production). I just copied some material CSS to skin it for the time being.
@benjamincharity watch out. PrimeNG Data Table has serious memory leak issues. More details here primefaces/primeng#1780
Like you said, most data tables are buggy. I'm hoping md-data-table would come soon to rescue us all :)
@vijayrajaram oof... thanks for pointing that out!
for another option that incorporates material: https://teradata.github.io/covalent/#/components/data-table
@jelbourn and @andrewseguin, while waiting for this datatable, I've developed one for my own usecases (based on material design datatable spec Material Design DataTable) and made it available on:
https://github.com/jefersonestevo/angular-smd
Running demo: Preview
The datatable is fully based on @angular/material2 components (including theming). I don't know if it's the way you're prototyping the datatable here, but it may help with some ideas.
If you need something to help just let me know :)
@jefersonestevo a running demo would be nice
@jefersonestevo The demo looks really nice, good work there. 🙂
@jefersonestevo I saw that, but I don't always want to clone a whole project just to see how it looks. A demo would be preferable there.
@Dunky13 I've updated the original post with a link to a running demo
@jefersonestevo Is it possible for you to contribute to covalent?
They too are working on the same problem to make new components compatible with material.
If you are developing exactly the same thing what others are also developing, all contributors would be putting too much energy creating independent flavors of the same components & going to thru their own bug cycles without much gain for the community.
Thanks for your contribution in anycase
Hi guys!
Any idea how long for material to get the data-table out?
Thanks
456374856970786854578990 years
cc @sbrez
Hi guys!
Is the datatable have Export function，export data to excl or csv!
Thanks
Should this be added to the 'Next Milestone' project. I can see that duplicate #3172 was added before it was closed
Datagrids are pretty standard fare, inevitably it will have to address the same issues as others like the actionscript data-grid and advanced-datagrid (both super excellant). Since you already know the main elements by default like column sort, select etc. Is it possible to publish a set of tags and formats and fill in the actual meat later? Reason I ask, I am pretty tired of retyping stuff to go from bootstrap to material, table to md-table to smd-md-table, smd-datatable-header replacing table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width" etc etc ad infinitum ad nauseum ad boredom. Since the whole world is waiting (instead of watching :)), if developers know the basics of the code implementation we could be productively preparing apps for the day. Then with the release, tweek a few errors once the final install is in and blow the worlds mind, releasing (in my case) 30 table databases with MD as much as months before we could otherwise ? Good idea? Bad idea? Thought I would throw it out. Since the world of Google development has become a moving target, it could be a lot less painful for the end app developers if we could lead the target like a skeet shooter does.
Is that possible to get
<md-data-table
[items]="items"
[header]="header"
(row-click)="handleClick($event)"
....
></md-data-table>
this kind of easy syntax?
Header and items can be generated automatically based on the data passed in.
And also get pagination for free?
Any news on this feature?
I've been using the following data table with their Material template
NGX Datatable. Something included in Angular material would be great to reduce the number of external dependencies.
Is there any update for data-table ? any estimate time for release ? the data-table is one of the vital component, you should consider it in 1st group of component.
FYI : 1e07b30
@maxime-menard woww... Good news
How do we start using? I am eagerly waiting for the doc. Any informal example would be great.
@choopage There is demo code in the link provided above. (I have not tried it myself.)
nice)
waiting for new release
We're still experimenting with the design and the API; there will be more information when that process is further along
Nice work guys, this looks great :)
The demo looks great. The Observable object and the interfaces, are a must for this and you already have it. Thanks you.
However, I would like to say that the template API should use native HTML table elements. But, maybe you made it that way because it's easiest to prototype, as you did first with md-input.
Anyway, I'm really thankful for see your approach, looks really nice. 👍
@michaeljota not using native table elements gives more flexibity to the DOM structure, which allows us to support sticky headers and columns in an accessible way.
@jelbourn I see. Yeah, that's important. It would be nice, but it resembles very much to the native structure. Thanks you.
@jelbourn, I don't want to start a discussion, but the RWD-Table-Patterns uses <table> elements and they support sticky headers and it seems to be pretty accessible.
@leocaseiro I see the support for sticky headers there, but not columns. Is there a demo somewhere?
@jelbourn, they haven't finished the implementation of columns yet, but their reference to implement it is similar to the zurb one: http://zurb.com/playground/projects/responsive-tables/index.html which is also <table>.
Hi ! Thank you for your amazing work and sorry to annoy you again on this thread.
I'm new with Angular 2 and I'm really interested with this feature.
Is there a way to start working with beta version of this feature ?
Thank you
I'm also interested in this feature for something at work. For now we're using this: https://getmdl.io/components/#tables-section
But it'd be nice to have something properly integrated and not have to fiddle with the design so much.
We tried working with the demo code earlier, but we couldn't easily get it integrated so we went with the lite option
@Raphyyy this is not a place to ask such questions, still I'm going to answer that exact question: TL; DR: No.
Long:
The whole framework it's in beta, but no version had been published that use the table that's been in development. I think that if the feature it's in this repo somewhere, you could work it out. Keep in mind that if this had not released yet, you will be on your own, and I strongly recommend to wait. If you don't want to wait, don't ask how not to wait. Just fight it through like a lvl 5 mage in the 100th dungeon.
Any estimates on when it'll be done? That way I can figure out when I'll come back to the feature we'd switch to using it at work.
Another example using <table> with fixed header and columns: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
@leocaseiro in both of those examples the stuck column is an entirely separate <table>
@leocaseiro I think that's what they are doing and the reason why they don't use <table>
Hello,
When will be the except release of data-table?
Thanks.
Can't wait for this to be released, very needed.
Did anyone manage to test it?
Guys any progress ?
any one know why the datatable branch haven't update two months.
@stevenmi because they haven't worked on it 🙃
They probs decided that for every person who nags on release date, they're going a month w/o updates.
Currently slated for 2027 release.
Still working on it, just not in that branch. Mainly figuring out some details about how we'll eventually approach virtual scrolling.
For now I'm using this : https://github.com/fredguile/ng2-md-datatable
Work like a charm and good approch
Real progress!! thanks!
https://github.com/andrewseguin/material2/tree/data-table-prototype/src/lib
@jelbourn @andrewseguin Virtual scrolling still show blank rows for about 500 ms before rendering.
ngx-datatable is quite fast in that aspect.
That's normal for a pre-alpha thing I guess :) Thanks it looks great and seems to be solid already!
I'v been working with the datatable, love the implementation.
The DataSource<T> abstract class requires this imp:
connectTable(viewChanged: Observable<MdTableViewData>): Observable<T[]>Internally, each datasource might use other observables (or combinations of observables) and spit out a subject (like done in the demo).
This requires datasource's to manage the subscriptions.
I would like to propose adding another abstract method
disconnectTable(): voidIt will allow datasources to keep track of the count of connected tables and subscribe to internal observables when count 0 goes to 1 or unsubscribe when count goes to 0.
I guess disconnectTable() is fired when ngOnDestroy() is fired on the md-table component.
In the current form I find it hard to manage subscriptions automatically, I always have to invoke a call from the component instantiating the datasource, when it gets destroyed.
@shlomiassaf Thanks for the feedback, we're happy you love the implementation.
You raise a great point about letting the data source know that the table has been destroyed, especially since it handles so many subscriptions. We'll be sure to add a similar hook into the final design.
@andrewseguin I know this must be getting really annoying, but is there any roadmap on this??
To me a data table is crucial - and there is still no complete ui framework for Angular 4. I am already frustrated to have chosen Angular over React.. Since React's ecosystem would offer me better solutions.
This is high priority for so many users, especially since the other table directives out there are crap and a waste of time due their bad api/doc/implementation.
So a roadmap would definitely a great thing. I'd even commit to Material 2, but I wouldn't know where to start. Since the whole project management seems to be handled internally. I really prefer Angular over React but they rock especially in recruiting contributors. Take a look at "Bugs for beginners" for example:
https://github.com/facebook/react/labels/Difficulty%3A%20beginner
@andrewseguin Here's another optional feature...
Currently, the dataSource is automatically registered (subscribed) on table init:
ngAfterViewInit() {
this.renderHeaderRow();
// For now, if the columns change then all rows need to re-render.
this.columnChange.subscribe(() => {
this._dataDiffer.diff([]);
this.rowPlaceholder.viewContainer.clear();
});
const connectFn = this.dataSource.connectTable.bind(this.dataSource);
Observable.combineLatest(this.viewChange.let(connectFn), this.columnChange)
.subscribe((result: any) => {
this.renderRowChanges(result[0]);
});
}This is limiting, if there is no dataSource at the afterViewInit phase it will throw.
It forces the user to use ngIf or some other logic to handle this state.
Since it's a common state it might be useful to handle this registration in a getter/setter structure.
This approach also allows unsubscribing if the dataSource is replaced. Currently it will cause a memory leak and possible unexpected bugs.
The above is a minimal fix, you can also extend it to allow the user to provide a "no items" template as a content child. Essentially this is just implementing *ngIf logic internally... since this is a common table scenario it might be suited in the core table.
I know the approach is a minimal table with a powerful API, I think this addition follows this approach since it's super common, like sort for example. It's just an "UI" API for a no-items state.
EDIT: This also fit nicely with the disconnectTable feature suggested above, replacing a dataSource is requires a disconnect notification.
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/
I've played around trying to manipulate some, biggest question I have now, that I haven't been able to figure out: How can we get table header to display without any data? It seems to not allow it - i tried editing some things, but couldn't get it to work.
I like the css based approach for sizing etc, seems like that's good way to not have to build it into the api of the grid itself. Excited to finally get a chance to see the work being done!
I managed to get header row to render even if no data is initially populated by making 2 changes to renderHeaderRow method below. I actually don't know if this is a horrible hack or not. =)
renderHeaderRow() {
const headerRowView = this.headerRowPlaceholder.viewContainer;
headerRowView.clear(); // Reset header row
// Create view for the header and set the header cells outlet
let headerRow = this.getHeaderRowDef();
let headerCells = this.getHeaderCellTemplatesForRow(headerRow);
const context = {headerCells};
// 1. get rows reference here
let row = headerRowView.createEmbeddedView(headerRow.template, context);
this.setLatestHeadersCellsOutlet(headerCells);
// 2. detect changes on rows here
row.detectChanges();
}
Looking forward to the release of this control!!!!
Can't wait for the official material2 component, in the meanwhile thanks @jefersonestevo for your contribution! Good job! 👍🏼
Does the md-data-table (when ready) come with an option to handle lazy loaded pages?
We are looking for a functionality where pages of size X(say 100) will be fetched from server and shown client side in rows of x(say 10). And also cache already loaded pages.
Does this qualify to be a feature? If not what is the recommended way of handling something like this?