Discussion - Implementing a real time update grid with mtx-grid

[gustavomerini]

I'm currently implementing a dashboard that will contain real time data from flights, by mutating the array I can achieve what I need, the grid values are successfully updated. The problem comes when I added an expanded row so that the user can see more info about a particular flight. When I receive new data from the BE, my array gets a new reference and passes the value via <mtx-grid [data]="myArray" .... which triggers a full update on the component and by consequence, the DOM re-renders the grid with its original state, with every row that was expanded closed for example.

I wanted to discuss a possible solutions for this, I'm trying to check the matero grid code to see if I can find any turnaround or maybe I can help to build this feature on the project, if you believe this would add value to the component. The idea I had would be to create a transaction feature in ng matero, that would allow the developers to mutate the data without triggering a full grid re-render. So the developers would use a method from the grid component and would define a transaction. For example, it is similar to what ag-grid provides ag-grid

const myTransaction = {

  update: [
      // updating a row, the grid will look for the row with ID = 2 to update
      {employeeId: '2', name: 'Bob', age: 23}
  ]
}

I'm not sure if I was clear, I also made a stackblitz so you can understand better. https://angular-material-13-starter-x1xj4z-mumijv.stackblitz.io https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-mumijv?file=src/app/app.component.ts

Click on the expand arrow and wait a few seconds, you will see that a mock real time update is triggered and it will close the expanded row because it re-renders the component.

Thanks in advance!

[nzbin]

In fact, you can use the original MatTable API to update data. Check this discussion https://github.com/ng-matero/extensions/discussions/135#discussioncomment-3884265

I forked your stackblitz demo and made a small fix. Please have a try.

const newList = this.list.map((data) => {
  data.name = 'New name' + this.randomNumber;
  return data;
});

this.grid.dataSource.data = newList; // <= set the new data
this.grid.table.renderRows(); // <= rerender the rows

[gustavomerini]

@nzbin oh nice, this solves the issue!

Thank you for your time!!

[MiniLebron]

@nzbin 你好 当我的折叠表格再次嵌套一个折叠表格的时候，第二个折叠表格似乎不生效this.grid.table.renderRows();

[MiniLebron]

<mtx-grid #grid [pageOnFront]="false" [showPaginator]="false" [data]="list" [columns]="columns"
          [expandable]="true" [expansionTemplate]="expansionTpl" (expansionChange)="log($event)">
</mtx-grid>

<ng-template #expansionTpl let-row>
    <mtx-grid #grid1 [pageOnFront]="false" style="margin: 20px 0;border: 1px solid;" [showPaginator]="false"
        class="mtx-grid-boder" [data]="row.children" [columns]="columns1" [expandable]="true"
        [expansionTemplate]="expansionTpl1" (expansionChange)="log($event)">
    </mtx-grid>

    <ng-template #expansionTpl1 let-row1>
        <mtx-grid [pageOnFront]="false" style="margin: 20px 0;border: 1px solid;" [showPaginator]="false"
            class="mtx-grid-boder inner-grid third-grid" [data]="row1.children" [columns]="columns2">
        </mtx-grid>
    </ng-template>
</ng-template>

this.grid.dataSource.data = res; // <= set the new data
this.grid.table.renderRows();

this.grid1.dataSource.data = res[0].children // <= set the new data
this.grid1.table.renderRows();