[Table] Add example with dynamic data (add/remove/edit rows)

[tyler2cr]

Bug, feature request, or proposal:

cdk table API docs need instructions and/or an example of updating the dataSource in the table
connecting the table to a data source

What is the expected behavior?

seeing implementation instructions and/or an example of how to send the updated dataSource to the table so that the connect function is called

What is the current behavior?

The docs only cover rendering data on initial load of the component, but if a service updates the data, there isn't a documented way to update the data-table

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

the md-table API doc hints at an approach but also lacks clarity

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular 4
material 2
typescript 2.4
windows

Is there anything else we should know?

[andrewseguin]

Sounds good to me, I'll make an example that includes adding/removing/editing rows.

[Lakston]

I hope I can add to this request without creating a new Issue, I've been looking at the example code provided in both the angular material docs and the cdk guide and I'm struggling to understand how to just send my data (a simple array of objects) to the table. Do I need my data to be a BehaviorSubject ? Do I need the typescript get too ?

The example generates data with loops and is quite confusing to me.

A simpler example with just a small simple array would really help ! I'll create a new Issue if needed.

[irowbin]

hello @andrewseguin It would be nice if you add collapsible row too.

[ilmars]

Hi @andrewseguin,
alos would be nice to have example with server data,
to get server data is OK, but how to triger on new http.get request on paging, sorting and filtering? (i'm stuck with that).

[willshowell]

@Lakston IMO your request deserves a separate issue. While the ExampleDatabase is great as a supplier of 100 rows of random data, it convolutes the Basic Example, and I think the docs could benefit from an even simpler example with maybe a single emission of a hardcoded array of data with Observable.of.

@ilmars luckily an example with an HTTP request just got merged yesterday and will be available on the docs site soon #5766

[tyler2cr]

@Lakston what I did to accomplish that was to setup a service to provide the data array to the ExampleDatabase and then looped over each item in the array and fed them into the addUser method from the example, after changing it to match my object. So you can just replace what is being iterated over in the for loop from the example by creating a service to call for that data

[tyler2cr]

for anyone interested in an unpublished example:

https://github.com/angular/material2/pull/5093/files

https://github.com/angular/material2/tree/master/src/demo-app/table

[tyler2cr]

Some help on this would be greatly appreciated :)

https://stackoverflow.com/questions/45382599/angular-2-table-invoke-connect-function

[etovian]

Agreed. I wept for joy when this component arrived. But after about six hours of fiddling with this thing, I still can't get it to work with a meaningful, real-world example. I expected to just point it at an array, and I'd be off and running. But having to create a datasource and a database is especially cumbersome. If the grid is supposed to be truly unopinionated, imo it shouldn't be coupled to observables. I should be able to just point it at an array of data and an array of column definitions (like most other analogous components).

[willshowell]

@etovian You don't need to create a database. That's just used in the example because the example needs to generate a lot of random data to display.

You barely even have to use Observables. They're used in the examples because they massively simplify manipulating the data in response to user events and are generally very powerful and flexible. If you just want to render an array once, you can use Observable.of(myArrayOfValues) and you don't have to touch rxjs again. If you want to render it more than once,

// component
_dataSubject = new BehaviorSubject<any[]>([])

constructor() {
  this.dataSource = new MyDataSource(this._dataSubject)
}

updateValues(myArray: any[]) {
  this._dataSubject.next(myArray)
}

// MyDataSource
constructor(private _data: BehaviorSubject<any[]>) { }

connect() {
  return this._data.asObservable()
}