Material-table: How to render custom components on editable table and enable editing only on edit action click ?

[thidasapankaja]

I'm using material-table in a project. There I need to render a custom editable components. As an example I need to render a custom dropdown list. However I was able to to it with render option under the columns . But I can't figure out how to make this editable only on editable action click. Because now, this is always editable. So, how can I make this readonly and edit only on _edit_ action click

  const columns = [
 {
      title: intl.formatMessage({ ...messages.rateType }),
      lookup: StaticLookup.baseAccountTypes,
      field: 'configType',
      render: rowData => (
        <Select
          id="configType"
          className={classes.formControlTopMarginAdjustment}
          option={StaticLookup.configTypes}
          optionId="key"
          optionName="value"
          value={rowData.configType}
          dataAutoId={RATE_CONFIG_LIST('configType')}
        />
      ),
    },,
]

Any help would be appreciated.
Thanks

[josh-feldman]

Check out the editComponent prop:

 const columns = [
 {
      title: intl.formatMessage({ ...messages.rateType }),
      lookup: StaticLookup.baseAccountTypes,
      field: 'configType',
      editComponent: tableData => (
        <Select
          id="configType"
          className={classes.formControlTopMarginAdjustment}
          option={StaticLookup.configTypes}
          optionId="key"
          optionName="value"
          value={tableData.rowData.configType}
          dataAutoId={RATE_CONFIG_LIST('configType')}
        />
      ),
    },
]

[thidasapankaja]

Thanks @josh-feldman . I was able to do it using this. However I have a scenario I need to display different data (on a same column) conditionally, and edit it. I was able to render it on edit, conditionally using editComponent prop. But having trouble to display it conditionally and edit it using onChange. Is there any way I can do it ?

as an example,

(if tableData.rowData.configType === 'A')
    return tableData.rowData.a;
return tableData.rowData.b

How can I make this work ?

[jayarjo]

@thidasapankaja
I encourage you to ask material-table related questions on StackOverflow, so that others could benefit from them as well.

[thidasapankaja]

ok Thanks @jayarjo .
Btw, I was able to get this work after I asked the question in Stackoverflow and mentioned in the chat group. This is it.

https://stackoverflow.com/questions/58431036/how-to-edit-multiple-fields-in-single-column-material-table