I am currently using the official material-react-table documentation to implement a CRUD table. You can find more information at this link: . However, I encountered an issue while trying to utilize my own custom modal components for the "create new" feature instead of relying on the internalEditComponents provided by the library. Essentially, I have a customized dialog as shown below. When I check the values in the handle create function, they appear empty unless I use the internalEditComponents. How can I populate the values props in the handle create function without having to create extensive custom logic?
// handle create function
const handleCreate: MRT_TableOptions<any>['onCreatingRowSave'] = props => {
const { values, table, row } = props;
console.log('handleDomainCorrectionCreate', values); // this is empty
};
// custom dialog
renderCreateRowDialogContent: props => {
const { table, row, internalEditComponents } = props;
<DialogTitle>Add correction entry</DialogTitle>
<DialogContent>
<Box sx={{ my: 2 }}>
<DialogContentText variant="subtitle2">From</DialogContentText>
<TextField
autoFocus
id="error_name"
label="Error Name"
type="text"
fullWidth
variant="standard"
name="error_name"
onChange={event => setErrorName(event.target.value)}
value={errorName}
/>
</Box>
<Box sx={{ my: 2 }}>
<DialogContentText variant="subtitle2">To</DialogContentText>
<TextField
id="corrected_name"
label="Corrected Name"
type="text"
fullWidth
variant="standard"
name="corrected_name"
onChange={event => setCorrectedName(event.target.value)}
value={correctedName}
/>
</Box>
</DialogContent>
<DialogActions>
<MRT_EditActionButtons variant="text" table={table} row={row} />
</DialogActions>
}