How to edit multiple fields in single column material-table

Question

I'm using material-table for a project. There I have a scenario I need to render and edit multiple fields in a single column conditionally.

This is the scenario

{
  title: intl.formatMessage({ ...commonMessages.rate }),
  field: 'fixed',
  render: rowData => {
    if (rowData.config === 'A') {
      if (rowData.type !== 'B') {
        return (
          <Fragment>
            <Typography variant="body1">
                Pips : {rowData.pips}
            </Typography>
            <Typography variant="body1">
                Percentage : {rowData.percentage}
              </Typography>
          </Fragment>
        );
      }
      return (
        <Typography variant="body1">
            {rowData.percentage}
        </Typography>
      );
    }
    return (
      <Typography variant="body1">{rowData.fixed}</Typography>
    );
  },
  editComponent: props => {
    if (props.rowData.type === 'A') {
      if (props.rowData.type !== 'B') {
        return (
          <Fragment>
            <Grid item xs={12} sm={12} md={12} lg={6}>
              <TextField
                id="pips"
                onChange={e => props.onChange(e.target.value)}
                value={props.rowData.pips}
              />
            </Grid>
            <Grid item xs={12} sm={12} md={12} lg={6}>
              <TextField
                id="percentage"
                onChange={e => props.onChange(e.target.value)}
                value={props.rowData.percentage}
              />
            </Grid>
          </Fragment>
        );
      }
      return (
        <TextField
            id="fixed"
            onChange={e => props.onChange(e.target.value)}
            value={props.rowData.fixed}
        />
      );
    }

Here the render and edit components display properly. But since the field is 'fixed' the values for pips and percentage are not changing since the onChange applies to fixed even though any other one in a column changed.

How can I get this fixed ? Any help would be appreciated. Thanks

Answer 1

You can use the onRowDataChange prop for that like this:

<TextField
   id="pips"
   onChange={e =>
      props.onRowDataChange({
         ...props.rowData,
          pips: e.target.value
         })
       }
       value={props.rowData.pips}
  />

Here is a codepen.