I am following the official material-react-table
docs on how to create a CRUD table. Reference link here https://www.material-react-table.com/docs/examples/editing-crud. However I am running into an issue when trying to use my own custom modal components for the "create new" functionality instead of the internalEditComponents
provided from the library. Basically I have a custom dialog see below. When I view the values in the handle create function the values are empty unless I use the internalEditComponents
. How do I populate the values
props in the handle create function without creating a bunch of 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>
}
you can get help from material-react-table V1 crud example: