I'm trying to use a material-ui datagrid that's being populated by a sql database to be able to edit what's inside of the database, I want that to be done via a form instead of simply editing the rows and cells individually.
I want to pass the id of the specific row as an argument into a function that will patch that row, using the id I can actually select the row inside of the database and then use a dialog form to update the individual data columns.
I've looked into the docs and anything that it seems to say would work just doesn't. I can't import the GridApi from @mui/x-data-grid-pro or @mui/x-data-grid-premium despite those being installed to make it work, getRowId seems to be a means of setting the row id rather than getting it, and the code snippets I've been able to find don't work either
<DataGrid
onComponentMount={getComponents()} {/*Calls on the database to get the rows and places the resulting array into the rows variable using sqlalchemy and fastapi */}
rows={rows}
columns={columns} {/* contains columns id, description, stock */}
pageSize={6}
rowsPerPageOptions={[6]}
onRowClick={()=>{selectComponents(((index) => {index.api.getRowIndex(index.rows.id)}))}}
/>
onRowClick={(rows)=>{selectComponents(rows.id)}}
This is the answer. Now when I click a row, it will return the row id as an argument in my function. Now I can simply click a row and use that info to open a dataform modal that comes pre-filled out with info that can change and then either be pushed to the database or canceled without saving