On this page – https://mui.com/x/react-data-grid/editing/ – the DataGrid team has put an examlpe of how to have a DataGrid with an Actions column, containing buttons for Edit, Save, Cancel and Delete.

This is exactly what I’m trying to achive, but am unable to. Essentually in their examlpe they have the rows and columns of the DataGrid hardcoded in the TS source. I need them to come from the properties of an object, that is mapped to a JSON file coming from a back-end – that’s all. I have a an async method getData in another file, that returns an object with rows and column properties – how do i call that method, instead of relying on the hardcoded rows and columns objects.

I’m very new to React. I tried to use a combination of useEffect, useState, useMemo, but never got anything that works. Eventually the grid stops working, e.g. clicking the Edit buttons leads to the browser saying “Page not responding”.