[data grid] Server-side add deleteRows and insertRows

[aress31]

Summary

The new dataset feature with get Rows and updateRows method are great steps toward full CRUD support in DataGrid.

Could the MUI team consider extending this feature to include deleteRows and insertRows. Then the groundwork would have been done to expose easier ways to connect the DataGrid to forms (modals or drawers) as right now the philosophy seems to be in-line cells editing only - which is not scalable.

Examples

No response

Motivation

No response

Search keywords: server-side, dataset, crud

[michelengelen]

Makes perfect sense. Added it to the board.
cc @MBilalShafi

[aress31]

Thanks @michelengelen, when you say added to the board do you mean: MUI X public roadmap.

Because I can't see the issues I have opened in the board.

[michelengelen]

It's a different board dedicated to the grid team. It's private, so you cannot view it.

[MBilalShafi]

Hey @aress31, thanks for opening this issue!

The new Data source feature with getRows and updateRows is definitely a step toward full CRUD support in the Data Grid. During the development of the server-side features, we did consider extending this further.

The main reason we didn’t include deleteRows or insertRows is that the Data Grid doesn’t provide built-in UI for those actions. For example, there’s no default add/delete button. Instead, it’s expected that developers implement a custom “actions” column, as shown in this example:
👉 https://mui.com/x/react-data-grid/editing/#full-featured-crud

That said, until we figure out a way to support it internally, it’s relatively straightforward to extend the Data Source interface in the userland with custom deleteRows and insertRows methods, and use them as needed from the actions column.

If you run into any issues while implementing this or have other questions, feel free to comment.

[aress31]

@MBilalShafi, it’s quite straightforward. As I mentioned, one of the current limitations of the DataGrid for CRUD actions is that it operates at the row or cell level rather than at the record level.

For example, adding a delete icon to the toolbar and allowing rowIds to be passed to a deleteRows callback would make supporting delete operations much easier and more intuitive.

Additionally, providing hooks for deleteRows and getRows would enable these actions to be easily reused in other UI elements as well.

[aress31]

Additionally, for large or complex datasets, many applications prefer wiring forms to the DataGrid, like this:

This approach is often preferred over inline row editing, especially when working with rich text fields or more complex input types.