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

halfer · Accepted Answer · 2019-10-28 01:02:40Z

4

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.

edited Oct 28, 2019 at 1:02

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 17, 2019 at 11:52

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to edit multiple fields in single column material-table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related