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