Docs bug: How to add rows to table

[ORESoftware]

Bug, feature request, or proposal:

We really need a straightforward example of how to dynamically add a row to a table, I see some other issues in the issue tracker on this, but am still having trouble finding info on it, so I am getting frustrated tbh

What is the expected behavior?

Expected to find docs for dynamically adding a row

What is the current behavior?

Do not find docs to dynamically add a row

What are the steps to reproduce?

Look at docs until giving up

---

I didn't post this SO question, but there are several like it:
https://stackoverflow.com/questions/47581267/how-to-add-data-dynamically-to-mat-table-datasource

I assume the answer is something like this:

export class MyDataSource extends DataSource<any> {
  // implement connect, etc
}

const ds = new MyDataSource();

// ...later on, we want to add some rows

ds.whatDoWeCallToAddSomeRowsPlease(); // ???

Adding rows dynamically should be one of the first examples in the docs, I would hope, please advise

[ORESoftware]

But the problem with my code above, is that DataSource is not exported from @angular/material anymore, so that seems to have changed...I am also extremely confused why this both compiles and runs without errors:

  this.dataSource = new MatTableDataSource();
  this.dataSource.connect()

connect to what? is the question

[EdricChan03]

@ORESoftware Actually, the documentation site uses the Markdown docs (such as card.md, button.md, etc.) and transforms them to HTML files. The readme for the library in each sub-library then redirects you to the documentation.

[julianobrasil]

@ORESoftware, isn't the same info in https://material.angular.io/components/table/overview?

[willshowell]

@ORESoftware

this.myDataSource = new MatTableDataSource();
this.myDataSource.data = dataToRender;

// ...later on, we want to add some rows

this.myDataSource.data = differentDataToRender;

[ORESoftware]

@willshowell so in your example you just want users to overwrite the entire variable? seems like

this.myDataSource.data.push() / this.myDataSource.data.unshift() would be a better idea?

the problem is that when I push to the existing array, the table doesn't re-render... I can try re-assigning to a new array, but that seems to just be a band-aid.

[ORESoftware]

@julianobrasil I have looked at that overview 10 times, it does not make it clear how to add rows.

There should be a method on MatTableDataSource that allows you to add rows etc.

const ds = new MatTableDataSource(x);
ds.addRow({});
ds.removeRow();

re-rendering everything by just overwriting the entire array seems crazy to me

[julianobrasil]

In fact, there should be a way to trigger MatDatatable update. I'll take closer look later to see whether I can find out something.

[willshowell]

@ORESoftware I'm sure @andrewseguin would be able to explain more effectively, but I'll try:

DataSource

When using MatTable or CdkTable, you must provide it with a data source. Any data source implementation that you provide needs a connect() and disconnect() method. The former is used by the table as a consistent interface to get a stream of data to display.

The connect method should return an Observable<MyRowType[]>. There is an agreement between the data source and the view that the table only needs to perform change detection when the Observable emits, and not any more. If that agreement did not exist, the table would have to perform change detection on each every cycle, which would be highly unnecessary in most use cases.

MatTableDataSource

As I'm sure you're aware, this is a convenience implementation of a DataSource. You provide an array of rows (via data) and it provides a very simple interface for setting up filtering/pagination/etc on those rows.

Any time you want to change the data that the data source is sending to the table, you simply overwrite the data property, and that array will propagate through any established filters, pagination, or sorting and be sent to the MatTable.

But why not just allow push and unshift?

Those operations mutate the array. Neither the data source nor the table can be aware of the changes you've made to your array by using those operations without liberal use of change detection.

I still really want addRow and removeRow methods

Maybe try extending MatTableDataSource?

class MyCustomDataSource extends MatTableDataSource {

  addRow(newData) {
    this.data = [...this.data, newData];
  }

  removeRow() {
    this.data = this.data.slice(0, this.data.length - 1)
  }

}

[ORESoftware]

Thanks, I don't think that's a great solution (overwriting the original array), I made a video demonstrating the problem

https://www.useloom.com/share/83b4388cf48f49178280bec3d3bbc984

[willshowell]

@ORESoftware thanks for the video.

1. FWIW, if you're only ever adding rows from the data service, perhaps try something like this:

   constructor(private data: ChromeDataService) {
     this.dataSource = new MatTableDataSource<ChromeMessage>([]);
   }
   
   ngOnInit() {
     this.data.currentMessage.
       .scan((accum, message) => accum.concat(message), [])
       .subscribe(messages => this.dataSource.data = messages);
   }

   Obviously I don't know how your data service works or really any of the rest of the app, but maybe it will show how easy it can be to add rows.

   This way could be even simpler:

   const oldData = this.dataSource.data;
   oldData.push(newRow);
   this.dataSource.data = oldData;

2. What you're experiencing with empty rows not showing data until you navigate tabs is almost certainly a symptom of change detection not being run when you expect. You could validate this by adding a click handler to one of your cell templates. When you click it, change detection should run and the rows should update.

3. You talk about performance costs around 3:30. As far as I'm aware, this whole system was designed to be as performant as possible, thus leaving it up to the user to define when change detection should occur. Creating a new array via concat or spread assignment doesn't do a deep copy, AFAIK it simply updates the object reference, so I think the costs you're expecting by assigning a new array are much much lower than anticipated.

4. In any case, writing your own data source is pretty easy and you can make it as flexible and customizable as you need. The only condition is that your connect() method emits each time you want to render an update.

5. Finally, consider what addRow() and removeRow() open up... Why include those but not addRows(), removeRows(), swapRows(), invertTable(), replaceRow()? They're all valid needs, but supporting them all would be overkill when it's so easy to accomplish otherwise.

[ORESoftware]

Ok, so what you are saying is that in the Material codebase, you have something like:

Object.defineProperty(dataSource, 'data', {
     set: function(){
         // do some majik?
     }
});

yes if that's the case, the user can modify the data array at will, and use Array.prototype methods to change what's in the table. The reason those methods might exist (raison d'etre) would be so that all the users in the world don't have to reimplement the same logic. For example, swapRows() might be tricky..idk.

[ORESoftware]

Ok so the solution given does not work. I have this code:

    const a = self.dataSource.data.slice(0);
    a.push(m as any);
    self.dataSource.data = a;
    self.dataSource.filter = '';

blank rows are added... But I have to recreate the entire component to get the table cells to render. So what's in the video happens, no matter what I do. Something is wrong.

[willshowell]

@ORESoftware source is here:

https://github.com/angular/material2/blob/af44b9dad774b91eac61f748c76177939587e4f4/src/lib/table/table-data-source.ts#L51-L53

That does sound like something is wrong. Are you able to recreate the issue in a stackblitz?

[willshowell]

@ORESoftware I've tried to build a reproduction that's similar to your setup,

https://stackblitz.com/edit/angular-material2-issue-gd6jr5?file=app/table.component.ts

Can you see if you can get identify the difference in your app or fork the stackblitz and reproduce it there?