[data grid] Allow insert rows while using dataSource

[aleksei-a-savitski]

Summary

The new GridDataSource interface simplifies implementation of infinite loading, however it is not possible to prepend new rows to the grid.
Such functiononality would be usefull for implementing table where fresh row entries are comming from websockets in realtime.

Examples

I have created an implementation based on 'rows' prop with full rows update for inifinite loading to show the UX I would like to achive:
https://stackblitz.com/edit/react-jtcqule9?file=Demo.tsx.

And here is my humble attempt to recreate the same using GridDataSource interface:
https://stackblitz.com/edit/react-mdseecwc?file=Demo.tsx.
Currently it is not possible to append rows to the GridDataSource. As a workaround I tried to use a filter with I change manually to trigger the dataSource.getRows.

I also tried to implement same UX with apiRef.current.updateRows(), but it doesn't insert rows into the begining of the grid.

Motivation

I'm trying to avoid full rows update while complying to the following requirements:

• Be able to insert rows into begining of a grid
• Allow user to infinitely scroll to load more data
• When new rows are added after the user has scrolled down, the user's view should remain unchanged, showing the same rows they were looking at before the new rows appeared
• If some rows were expanded they should remain expanded after new rows are added

Search keywords: data grid, update rows, infinite loading, scroll position

[michelengelen]

@cherniavskii we had an example some time ago that was handling the "add row to the top" problem, but I cannot find it. Do you recall where we had this?

[cherniavskii]

Hey @aleksei-a-savitski
Can you share more details about your use case?
Are you creating new rows on the client and then sending them to the server?
Or is the update coming from the server (new entries have been added to the database while you were browsing the data grid)?

cc @arminmeh

[arminmeh]

@aleksei-a-savitski
we are currently working on support for editing data with the data source
#13261

Some problems that this will solve:

• Adding a new row changes the page size so we will have to either
  • remove the last row
  • append next page request over few last rows
• Cache for all pages has to be either updated or cleared, since your new row moves data in all subsequent pages

To avoid the cache problem, you will have to call apiRef.current.unstable_dataSource.cache.clear(); in your addRow method.

I don't think you need to change the filter to trigger the new request. You can try using https://mui.com/x/api/data-grid/grid-api/#grid-api-prop-unstable_replaceRows to replace rows and adding the new row on top.

@cherniavskii @MBilalShafi I couldn't find an easy way to add a new row on top through our API
updateRows will add all new rows on the bottom and unstable_replaceRows cannot replace one row with two (to push the rest down)

[aleksei-a-savitski]

hi @cherniavskii @arminmeh in my case new row entries are comming from server and they should be added on top.

I haven't tried https://mui.com/x/api/data-grid/grid-api/#grid-api-prop-unstable_replaceRows. In my case it looks like I will have to replace all rows and to do so I will have to store them by myself somewhere. I would be similar to the implementation I have based on 'rows' prop.

[arminmeh]

hey @aleksei-a-savitski

I have created an example that accomplishes 3 out of 4 points from your motivation.

The missing point is:

If some rows were expanded they should remain expanded after new rows are added

At the moment, tree data and row grouping features are not working together with lazy loading. This feature is covered with this issue. You can follow it and give it a 👍
I have left the code related to this commented out.

As mentioned earlier, we are working on editing feature with the data source. Once it is completed, it should be easier for you to implement this and it should also help with keeping at least part of the cache after adding a row. I have added a comment suggesting to cover adding a row in the examples of the related doc page.

If you are adding rows constantly, you can also consider removing apiRef.current.unstable_dataSource.cache.clear(); from addRow() method and add unstable_dataSourceCache={null} prop on the grid, which disabled the cache entirely.

Let me know if the example can work for you for now.
Also, do you think that #13261 and #14527 will give you everything you need out of the box? If so, we can consider closing this issue.

[aleksei-a-savitski]

@arminmeh thanks for the example. looks like it will work for my use case.

Considering that the datasource API is in beta right now, should I go with this solution or it is better to use rows prop? Is it benifitial in terms of performance in case of frequent rows updates over 'rows prop' solution?

[KenanYusuf]

Hi @aleksei-a-savitski

Considering that the datasource API is in beta right now, should I go with this solution or it is better to use rows prop?

The data source feature is ready to be used in production, and will be made stable in the next major version. Any changes to the API will be communicated in the version changelog.

Is it benifitial in terms of performance in case of frequent rows updates over 'rows prop' solution?

The performance benefits come in the form of caching, which you can read more about here. Another benefit is that you do not need to store rows in state locally to pass to the rows prop, making your code cleaner.

As mentioned here: #16289 (comment), #13261 and #14527 should cover the functionality you are looking for. If that is all of your questions answered, please feel free to close this issue.

[aleksei-a-savitski]

thanks!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@aleksei-a-savitski How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.