Components: md-data-table

[jelbourn]

[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 [email protected] 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

[LucianoTulio]

Any news?

[jelbourn]

When there's an update it will be here.

[elvisbegovic]

@jelbourn awesome!hope with virtual-repeat

[yusijs]

@jelbourn is the design process open somewhere, or is that phase just internal discussions?

[jelbourn]

Just prototyping / planning at this stage.

[yusijs]

Alright, thanks. Looking forward to the result ☺

[LiPengfei19820619]

Looking forward to material2 data-table.
Thanks.

[CharlBest]

@istiti I'm also very much looking forward to virtual-repeat. But we will see.

[Bosper]

Very exciting abut that,

[radoslavpetranov]

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!

[fshchudlo]

@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.

[radoslavpetranov]

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!

[radoslavpetranov]

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
}

[DanPride]

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 ?

[benjamincharity]

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.

[vijayrajaram]

@benjamincharity watch out. PrimeNG Data Table has serious memory leak issues. More details here https://github.com/primefaces/primeng/issues/1780

Like you said, most data tables are buggy. I'm hoping md-data-table would come soon to rescue us all :)

[benjamincharity]

@vijayrajaram oof... thanks for pointing that out!

[amccubbin]

for another option that incorporates material: https://teradata.github.io/covalent/#/components/data-table

[jefersonestevo]

@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 :)

[Dunky13]

@jefersonestevo a running demo would be nice

[jefersonestevo]

@Dunky13 as soon as I have some time I'll try to create a plnkr with a running demo. Meanwhile, there is a demo inside the project itself. You can run it by cloning the project, npm install and npm start: link

[dahaupt]

@jefersonestevo The demo looks really nice, good work there. 🙂

[Dunky13]

@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.

[jefersonestevo]

@Dunky13 I've updated the original post with a link to a running demo

[thekalinga]

@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

[sbrez]

Hi guys!
Any idea how long for material to get the data-table out?
Thanks

[elvisbegovic]

456374856970786854578990 years

cc @sbrez

[ghost]

Hi guys!
Is the datatable have Export function，export data to excl or csv!
Thanks

[benb7760]

Should this be added to the 'Next Milestone' project. I can see that duplicate #3172 was added before it was closed

[DanPride]

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.

[zhentian-wan]

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?

[hatakawas]

Any news on this feature?

[DanPride]

I would vote for the flash mx datagrid approach, given the overwhelming
similarity between actionscript and typescript seems like a no brainer
Example syntax for an mx datagrid...

dataProvider="{sDataArr}" x="23" y="53" themeColor="#009DFF" rowCount="14" width="215" height="296" tabIndex="4" toolTip="Tip" >

 <mx:columns>
     <mx:DataGridColumn headerText="Square" width="50"  textAlign="left" dataField="NameCol" />
     <mx:DataGridColumn headerText="Name" width="{squareNameLength}"  textAlign="center" dataField="SquareCol" />
     <mx:DataGridColumn headerText="Supervisor" textAlign="left" dataField="SupervisorCol" />
  </mx:columns>

/mx:DataGrid>

All they gotta do is come up with the property name spelling, and give it to us, and we are off to the races.
Dan Pride
danielpride.com

[pauldaustin]

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.

[m00zi]

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.

[maxime-menard]

FYI : https://github.com/angular/material2/commit/1e07b30d3ca3a7d782c500b5dc1d84250166f319

[burubur]

@maxime-menard woww... Good news

[choopage]

How do we start using? I am eagerly waiting for the doc. Any informal example would be great.

[memark]

@choopage There is demo code in the link provided above. (I have not tried it myself.)

https://github.com/angular/material2/tree/1e07b30d3ca3a7d782c500b5dc1d84250166f319/src/demo-app/data-table

[yaroslavdraha]

nice)
waiting for new release

[jelbourn]

We're still experimenting with the design and the API; there will be more information when that process is further along

[sidewaiise]

Nice work guys, this looks great :)

[michaeljota]

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. 👍

[jelbourn]

@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.

[michaeljota]

@jelbourn I see. Yeah, that's important. It would be nice, but it resembles very much to the native structure. Thanks you.

[leocaseiro]

@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.

[jelbourn]

@leocaseiro I see the support for sticky headers there, but not columns. Is there a demo somewhere?

[leocaseiro]

@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>.

Update: https://github.com/zurb/responsive-tables

[Raphyyy]

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

[portaljacker]

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

[michaeljota]

@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.

[portaljacker]

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.

[leocaseiro]

Another example using <table> with fixed header and columns: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

[jelbourn]

@leocaseiro in both of those examples the stuck column is an entirely separate <table>

[leocaseiro]

@jelbourn yep, I think it's a "clone" of the html elements made with JS which IMO is the most common behaviour for frozen elements (Same as the $mdSticky).

Unless you are aware of a better approaching that doesn't need cloning an element with divs that wouldn't work in a <table>.

[michaeljota]

@leocaseiro I think that's what they are doing and the reason why they don't use <table>

[gtzinos]

Hello,
When will be the except release of data-table?
Thanks.

[avatsaev]

Can't wait for this to be released, very needed.

[maudel]

yes, many of us really need hope it will be released soon with some nice
examples.

2017-04-05 8:56 GMT-04:00 Vatsaev Aslan [e-mail]:

Can't wait for this to be released, very needed.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/581#issuecomment-291852478,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADhjHnMogYqfC8GBoj81fYoNO4pBa0noks5rs49kgaJpZM4Ip1-b
.

[pantonis]

Did anyone manage to test it?

[gtzinos]

Guys any progress ?

[ghost]

any one know why the datatable branch haven't update two months.

[aldo-roman]

@stevenmi because they haven't worked on it 🙃

[yusijs]

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.

[jelbourn]

Still working on it, just not in that branch. Mainly figuring out some details about how we'll eventually approach virtual scrolling.

[sidewaiise]

In the meantime i recommend ngx-datatable.. have used it for a couple of projects. It's good.

On 23 Apr 2017, at 5:36 pm, Ronnie [e-mail] wrote:

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.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[Raphyyy]

For now I'm using this : https://github.com/fredguile/ng2-md-datatable
Work like a charm and good approch

[shlomiassaf]

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!

[shlomiassaf]

@jelbourn @andrewseguin

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(): void

It 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.

https://github.com/andrewseguin/material2/blob/data-table-prototype/src/lib/data-table/data-table.ts#L218

[andrewseguin]

@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.

[Renader]

@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

[shlomiassaf]

@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.

[kmkatsma]

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!

[ghost]

http://demos.wijmo.com/5/Angular2/FlexGridIntro/FlexGridIntro/

[kmkatsma]

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();

}
```

[alvachien]

Looking forward to the release of this control!!!!

[takahser]

Can't wait for the official material2 component, in the meanwhile thanks @jefersonestevo for your contribution! Good job! 👍🏼

[sabithpocker]

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?

[Renader]

Since the contributors lack will to keep the community up to speed:

The current state is that there has been a pull request opened to merge @andrewseguin's prototype into master. Maybe they'll land in Beta.4 that is currently still blocked.

Unfortunately there is no milestone for beta.4
https://github.com/angular/material2/milestones?state=open

Also the project board looks kinda abandoned:
https://github.com/angular/material2/projects/12

I'd guess we can expect a release of Beta.4 within the next 25 - 40 days.

@jelbourn please fix the god damn project management, _this repository is a mess._

[robwormald]

@Renader please refer to Angular's Code of Conduct before commenting further - such language is not helpful and frankly, crappy to get in your inbox on the regular. Please remember this is our work, and we don't tolerate it at Google, and we won't here.

To everyone in here (@Renader included!) we appreciate your enthusiasm on this feature. Understand that the goal is to get it right the first time - performance, accessibility, ergonomics all have to be considered, and so its a process.

If you look at the mentioned PR, you'll see that there's active code review going on. One neat thing about the data table is that we're collaborating with other teams at Google on the design and feedback - this is a net win for everyone as we get to apply their experience doing stuff at scale.

One side effect of this is that a lot of the communication happens internally, as often we're discussing (sometimes confidential) stuff at each others' desks and in meetings, rather than on GitHub. I'm personally pretty excited about this component as well, and it'll be worth the wait.

[jrood]

Thanks @robwormald! I appreciate that you guys are taking the time to make a quality solution.

[alvachien]

@robwormald Thanks for the information.

Compare to another Software Giant Microsoft has done at open source project OData/WebAPI to adopt their own new technology .NET Core, I think the progress of Angular team is acceptable.

[cuznerdexter]

@robwormald Keep up the good work guys.
We should not complain as at the end of the day the team is building a great free resource.

Definitely the Datepicker and Data-table will be invaluable for my team when finally complete.

[jymdman]

Will there be support for inline editing in the datatable (in the future)?
If not, maybe I should look for another component to use instead...

[TxOne]

https://uxdesign.cc/design-better-data-tables-4ecc99d23356

[ghost]

feature request：export data to csv or excel

[shlomiassaf]

Exporting probably won't happen.

You have the data source , implement that logic.. no need for it to come in the package

Sent from my iPhone

On May 22, 2017, at 5:23 AM, stevenmi [e-mail] wrote:

feature request：export data to csv or excel

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[Nathan-Ryan]

@stevenmi FWIW export functionality is not a display concern. Perhaps access to the data table's state (sorting, pagination, filters) would help so you can use that data as a predicate for your own export method to reflect the displayed data.

[ghost]

how about add Column/row rendering feature

[andrewseguin]

Good news everyone! The design document has been finalized and is now available to view.

We spent a long time considering our design and we appreciate all the great feedback we received. With the help from you and many internal teams at Google, we now have a design that we will start implementing. In fact, we just checked in our first PR #4468.

Note that the design of our cdk-data-table is agnostic to style and will not be tied to an opinionated approach to features such as sorting, filtering, pagination, etc. We want to make sure that we build it in such a way that you are not tied to a particular opinion on how these features are surfaced, but provide the right hooks that they can be easily incorporated.

Once the cdk-data-table is ready, we'll also include some form of an md-table that provides an easy-to-use interface and the material styles.

Stay tuned as we continue our development on the table. We are very excited to begin the implementation and we'll be working hard to get this out to all of you.

[hatakawas]

Great!!!

[JoeyHengst]

Awesome!!

[PierreRochard]

Fanastic! Thank you for the design document. Here is another solid existing implementation worth analyzing: https://www.primefaces.org/primeng/#/datatable

[fatalcaron]

Hey guys, somebody can help me with this question: https://stackoverflow.com/questions/44207529/angular-material-cdk-data-table-dont-update-when-data-change

[robwormald]

@fatalcaron the data table, as specified in the Design Doc, uses the OnPush change detection strategy. This means it requires you to handle your data immutably - this is not specific to the data table implementation.

Also, this issue is not for technical support, especially on an alpha, not yet merged, unreleased, undocumented prototype! Please refrain from doing so here 😄

[shlomiassaf]

@andrewseguin THANKS!

I'm working on a checkbox component for the table, something like:

  <cdk-table [dataSource]="dataSource">
        <md-table-checkbox cdkColumnDef="checkbox"></md-table-checkbox>
  </cdk-table>

@Component({
  selector: 'md-table-checkbox',
  template: `
<cdk-header-cell class="md-table-checkbox" *cdkHeaderCellDef>
  <md-checkbox color="primary"
               (click)="$event.stopPropagation()"
               (change)="$event ? masterToggle() : null"
               [checked]="isAllSelected()"
               [indeterminate]="selection.hasValue() && !isAllSelected()">
  </md-checkbox>
</cdk-header-cell>
<cdk-cell class="md-table-checkbox" *cdkCellDef="let row">
  <md-checkbox color="primary"
               (click)="$event.stopPropagation()"
               (change)="$event ? selection.toggle(row) : null"
               [checked]="selection.isSelected(row)">
  </md-checkbox>
</cdk-cell>
`
})
export class MdTableCheckbox implements AfterViewInit {

  /**
   * A Custom selection model, optional.
   * If not set, the selection model from the DataSource is used.
   */
  @Input() selection: SelectionModel<any>;

  @ViewChild(CdkCellDef) cell: CdkCellDef;
  @ViewChild(CdkHeaderCellDef) headerCell: CdkHeaderCellDef;

  constructor(private cdkColumnDef: CdkColumnDef,
              private ds: DataSourceDirective<any>) { }

  ngAfterViewInit(): void {
    this.cdkColumnDef.cell = this.cell;
    this.cdkColumnDef.headerCell = this.headerCell;

    if (!this.selection) {
      this.selection = this.ds.ds.selection;
    }
  }

  isAllSelected(): boolean {
    return !this.selection.isEmpty() && this.selection.selected.length === this.ds.ds.filteredData.length;
  }

  masterToggle(): void {
    if (this.isAllSelected()) {
      this.selection.clear();
    } else {
      this.ds.ds.filteredData.forEach(data => this.selection.select(data));
    }
    this.ds.ds.refresh();
  }
}

I have 2 issues:

• CdkColumnDef, CdkCellDef, CdkHeaderCellDef and friends are not exposed. In my use case I need them to create the column manually. Since I implement a component, they are inside the component's template so the datatable does not see them as content children. . I set CdkCellDef and CdkHeaderCellDef manually into CdkColumnDef.
  can you expose them? from core level components its trivial I think

• Since CdkHeaderRow and CdkRow are both ChangeDetectionStrategy.OnPush they don't react to changes that are not emitted from the datasource observable.
  A change originated from the header (e.g. a click event on the header) will trigger UI changes for the header row but not for the table rows.

In my use case the master checkbox click will not trigger a UI change on the rows, so for example clicking the master checkbox to "CHECKED" will not reflect (on the UI) for all checkboxes of each row. Same thing if clicking each checkbox for each row so all are checked, the master will not check automatically (in the UI, the state is valid)
Any clues how to tackle this?

[shlomiassaf]

@andrewseguin

Ok so I think I got most of it now...

Assume we want to build a custom md-table component where the columns might change, e.g. dynamic columns...

Let's say we have these 2 lines as content of cdk-table inside the md-table component:

  <cdk-header-row *cdkHeaderRowDef="columnKeys"></cdk-header-row>
  <cdk-row *cdkRowDef="let row; columns: columnKeys"></cdk-row>

columnKeys is a property of type string[] and its initial value is [], it will change once we get user input. This is actually the dynamic columns we want to support.

Running this will result in a table without columns.
Converting columnKeys to an observable that emits string[] won't help as well.

This can never work since both CdkHeaderRow and CdkRow are set with ChangeDetectionStrategy OnPush, the first value CdkHeaderRow gets is [], from there on nothing will trigger CD since CdkHeaderRow component is passive, the actual binding is held by CdkHeaderRowDef (the structural directive).

I think CdkHeaderRowDef need to emit events on changes to the columns it holds.
From there, CdkTable will listen and notify CdkRow to run markForCheck() (or rerun renderHeaderRow())

As a workaround i've create a simple directive that exposes the ChangeDetectorRef of each CdkHeaderRow and CdkRow and when columns change I run markForCheck() on all.

import { ChangeDetectorRef, Directive } from "@angular/core";
@Directive({
  selector: '[cdRef]'
})
export class ChangeDetectorRefDirective {
  constructor(public cdr: ChangeDetectorRef) {}
}

  <cdk-header-row cdRef *cdkHeaderRowDef="columnKeys"></cdk-header-row>
  <cdk-row cdRef *cdkRowDef="let row; columns: columnKeys"></cdk-row>

This also solves the checkbox issue above.

my custom MdTable component now has this function so "outsiders" can invalidate the UI without changing rows...

  @ViewChildren(ChangeDetectorRefDirective) allRowsCd: QueryList<ChangeDetectorRefDirective>;

  // this will make sure columns kick in
  ngAfterViewInit(): void {
    this.markForCheck();
  }
  markForCheck(): void {
    if (this.allRowsCd) {
      this.allRowsCd.forEach( cd => cd.cdr.markForCheck() )
    }
  }

[shlomiassaf]

@craigsnyders @prestonvanloon would you mind explaining your dislike? Is there a better solution? would love to hear.

[iulianb]

@shlomiassaf you should spend some time reading the discussion before posting

Also, this issue is not for technical support, especially on an alpha, not yet merged, unreleased, undocumented prototype! Please refrain from doing so here 😄

[shlomiassaf]

Read my comments I offer my thoughts on the design, exposing symbols and a suggestion to refresh the rows without change from the datasource.

Not a issue about technical support.

Sent from my iPhone

On May 30, 2017, at 5:26 PM, iulianb [e-mail] wrote:

@shlomiassaf you should spend some time reading the discussion before posting

Also, this issue is not for technical support, especially on an alpha, not yet merged, unreleased, undocumented prototype! Please refrain from doing so here 😄

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[georgeedwards]

I am really excited to see this launch - keep up the great work! One design scenario that causes issues I have come across in numerous other libraries, is say you have a table with a datetime column, where the data is a momentjs object. Many libs don't allow you to format this in a human friendly format, without resorting to alphabetical sorting, which is obviously not ideal.

Is there anything in this design to assist the ordering and parsing of datetime objects in human readable formats?

[prestonvanloon]

@shlomiassaf I :-1: because I don't understand your use case/question and it looked like technical support question.

[shlomiassaf]

@prestonvanloon Sometimes I tend to complicate things since english is not my natural-born language. Let's not get into details now, but I can understand that... (👎 won't help me fix the way I express myself but again, this is not the place to dive deep)

[goelinsights]

@andrewseguin didn't see it in the design doc but I saw the sortable component in your branch.

Do you address column-level interactions in the design docs? Was curious to what extent the initial design would be able to capture things like sums, subtotals, counts, averages, sorts, etc esp as interacted with things like filters.

[shlomiassaf]

@goelinsights , I think this is a customisation that is out of the scope for the data-table, the core one at least.

Since the datasource is provided by the user, as well as filtering, pagination, sorting etc... it is fairly trivial to support these requirements on the datasource or on an external helper.

You can display these as a footer...

[goelinsights]

@shlomiassaf are you speaking for the core team?

The top column-level feature I'm looking for, which seems like it would be a broad use case (incl something I use often in Adwords) is a sort by ASC/ DESC column widget (usually a carrot icon).

I can't imagine why it would be easier for each of us to hack our own than there be an API for this built into the material table that they'll need to do anyway if they're re-skinning the data table for the Adwords team.

[shlomiassaf]

@goelinsights I speak for myself, not for anyone else.

Your post talks about sums, subtotals, averages, counts and sort, not only for a sort by ASC/ DESC column widget so my answer was for that.

My opinion is that CdKTable will not include those, common as they might be, since CdkTable is not intended for that purpose.

It is likely that a following MdTable implementation will include some, probably sorting and pagination.

These are all my opinions, based on reading the design doc.

[ScottRFrost]

The addition of the P2: required label is exciting! Now that this component is officially high priority, I'm hopeful that we'll see at least an initial version :soon: in the next beta or two.

[vqw]

Exactly, fingers crossed for rapid implementation! :goberserk: :goberserk: :goberserk:

[ghost]

In my opinion, the cell header shouldn't scroll with scroll bar

[DanPride]

I have quit angular, without the data table its a broken leg.

Dan Pride
1-408-508-4879
http://danielpride.com
www.linkedin.com/in/danielpride/
http://archaeolibrary.com/
http://headlessuber.com
http://kingsolomonsgate.com

On Mon, Jun 19, 2017 at 11:58 PM, stevenmi [e-mail] wrote:

In my opinion, the cell header shouldn't scroll with scroll bar

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/581#issuecomment-309662591,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACUUNrBb-8RWLkYO_BUCxQ7hPJxXvWdBks5sF22UgaJpZM4Ip1-b
.

[dapriett]

I've been using this data-table, it works nicely:

https://teradata.github.io/covalent/#/components/data-table
https://github.com/Teradata/covalent/tree/develop/src/platform/core/data-table

[Mr-Sloth]

@DanPride
Angular has data tables, there are arround 20+ modules out there :D
Handsontable, PrimeNg and terradata are some of them.

Just Angular-Material doesn´t have it yet.

[CaerusKaru]

For those still waiting on this, the PR for md-table can be found here. Should most likely be included in the next beta release, and will hit master once the review is done in the next week or so.

[ScottRFrost]

The PR has received pr: lgtm and pr: merge ready labels from @jelbourn !

The merge should be :soon: :smile:

UPDATE - It's Merged!

[unnamed666]

can i use md-table if i update now or i should wait for beta 8 in changelog?

[CaerusKaru]

@unnamed666
You can use it now if your project depends on the latest material2-builds. However, there is no public documentation on using md-table, which is a fairly complex (though well-engineered) structure. There are examples provided in the demo-app, but until official docs come, it may be difficult to reason about directly. There's a PR for docs on md-table, found here. Use them at your own risk.

[ghost]

http://ui-grid.info/docs/#/tutorial/401_AllFeatures

[CaerusKaru]

@stevenmi That feature set is built for AngularJS, and this library is built for Angular. If you have specific feature requests pertaining to the ui-grid library, please make them explicit so that the project maintainers can track them.

[ctilley83]

Beta 8 is out!! Includes Data Table!!

[jelbourn]

Yep, initial version is out!

We wanted sticky-headers to get in for the initial release, but it didn't quite make it, so that should be coming before too long.

Other stuff we plan on adding in the next few months are:

• Only rendering as many rows fit on the viewport on initial render and adding more on scroll
  (with a more comprehensive virtual scrolling coming later)
• A "simple table" that just takes a plain array instead of a data source and handles everything for you
  (but obviously with less customization)

And other stuff planned:

• multiple row / cell templates gated on a predicate function
• colspan
• sticky columns
• sections
• more rendering optimizations

Closing this issue now; we'll be tracking additional features in their own issues.

[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 https://github.com/angular/material2/issues/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[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._}