How do I use custom edit components with material-react-table

Question

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>
}

Answer 1

you can get help from material-react-table V1 crud example:

    const columns = useMemo<MRT_ColumnDef<IPmsProgress>[]>(
      () => [
        {
          ...
      ],
      [ validationErrors],
    );    
    
    // use this state for insert values
    const [values, setValues] = useState<any>(() =>
      columns.reduce((acc, column) => {
        acc[column.accessorKey ?? ''] = '';
        return acc;
      }, {} as any),
    );

    const handleCreateNewRow: MRT_TableOptions<IPmsProgress>['onCreatingRowSave'] = ({
      table,
    }) => {        
      const newValidationErrors = validatePmsProgress(values);
      if (Object.values(newValidationErrors).some((error) => error)) {
        setValidationErrors(newValidationErrors);
        return;
      } 
      const request: IRequestPmsProgress = {
        contractid: currentContractId,
        dateid: currentReportDateId,
        item: values.item,
        lastplanprogress: values.lastplanprogress,
        lastplanvirtualprogress: values.lastplanvirtualprogress,
      }
      setValidationErrors({});
      addPmsProgress(request);
      table.setCreatingRow(null); //exit creating mode
    };
    
    ...
    const table = useMaterialReactTable({
      ...
      renderCreateRowDialogContent: ({ table, row }) => (  <>
          <DialogTitle variant="h6" fontFamily="sans serif" textAlign='center'>Add new item</DialogTitle>
          <DialogContent
            sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
          >
            <form onSubmit={(e) => e.preventDefault()}>
              <Stack
                sx={{
                  width: '100%',
                  minWidth: { xs: '300px', sm: '360px', md: '400px' },
                  gap: '1.5rem',
                }}
              >
                {columns.filter(column => 
                    column.accessorKey === 'item' ||
                    column.accessorKey === 'lastplanprogress' || 
                    column.accessorKey === 'lastplanvirtualprogress').map((column) => (
                  <TextField
                    key={column.accessorKey}
                    variant='filled'
                    label={column.header}
                    name={column.accessorKey}
                    type={column.accessorKey === 'item' ? 'text' : 'number'}
                    onChange={(e) =>
                      setValues({ ...values, [e.target.name]: e.target.value })
                    }
                  />
                ))}
              </Stack>
            </form>
          </DialogContent>
          <DialogActions sx={{ p: '1.25rem' }}>
            <MRT_EditActionButtons variant="text" table={table} row={row}/>
          </DialogActions>                
        </>
      ),
      ...
    })
    ...