title: How to disable some specific columns from edit in react material table?
body: <pre><code>    import React from 'react';
      import MaterialTable from 'material-table';
  
      export default class DictionaryTable extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
          columns: [
              {title:'Need state',field: 'NeedState',lookup: { 1: 'Fragrance', 2: 'Price', 3:'Formulation',4:'Technolgy'} },
              { title: 'Keyword extracted', field: 'keyword' },
              { title: 'Actual Keyword', field: 'actual_keyword' },
              { title: 'Map score', field: 'map_score', type: 'numeric' },
              { title: '6 month mentions', field: 'six_month_mention'},
          ],
          data: [
              { NeedState: 1, keyword: 'mango', actual_keyword: 'apple', map_score: .3 ,six_month_mention:234},
              { NeedState: 2, keyword: 'expensive', actual_keyword: 'price', map_score: .6 ,six_month_mention:45},
              { NeedState: 2, keyword: 'costly', actual_keyword: 'price', map_score: .43 ,six_month_mention:433},
              { NeedState: 3, keyword: 'chemical', actual_keyword: 'oil', map_score: .43 ,six_month_mention:68},
              { NeedState: 4, keyword: 'humidifier', actual_keyword: 'diffuser', map_score: .63 ,six_month_mention:987},
          ]
          }
      }
  
  
      render() {
          return (
          &lt;MaterialTable
              title={&lt;div style={!this.state.editable ? { color:'red', fontSize:"18px" } : { color:'red', fontSize:"12px" }}&gt;
              &lt;p class={!this.state.editable ? "bg-light text-dark br6 pa-5-10" : "negative-bg-button text-white br6 pa-5-10" }&gt;
                  {
                  !this.state.editable ? 
                  (
                      &lt;span&gt;Run request for - {this.state.request_name}&lt;/span&gt;
                  ):(
                      &lt;span&gt;
                      &lt;i class="fa"&gt;
                          &amp;#xf071;
                      &lt;/i&gt; 
                      &amp;nbsp; Caution: The dictionary is on edit mode. Any changes made will trigger a pipeline rerun with updated dictionary
                      &lt;/span&gt;
                  )
                  }
                  &lt;/p&gt;
              &lt;/div&gt;}
              columns={this.state.columns}
              columns={[
              ...this.state.columns.map(data =&gt; {
                  return {
                      field: data.field,
                      title: data.title,
                      isEditable: data["actual_keyword"] = false,
                      render: rowData =&gt; 
                          (
                              &lt;div style={ data.field === "map_score" ? { color : "red",borderRadius:'3px',paddingLeft:'10px' } : {} }&gt; 
                              {
                              data.field === "map_score" ?
                              (
                                  &lt;span&gt;
                                  {
                                      rowData[data.field] &gt; 0.8 ?
                                      &lt;i class="fas fa-thermometer-full positive-color-font"&gt;&lt;/i&gt;
                                      : rowData[data.field] &gt; 0.6 ?
                                      &lt;i class="fas fa-thermometer-half neutral-color-font"&gt;&lt;/i&gt; :
                                      &lt;i class="fas fa-thermometer-quarter negative-color-font"&gt;&lt;/i&gt;
                                  } 
                                  &lt;/span&gt;
                              ):(
                                  &lt;span&gt;
                                  {
                                      data.field === "NeedState" ?
                                      (
                                      &lt;span&gt;
                                          {rowData["show_needstate"]}
                                      &lt;/span&gt;
                                      ):data.field === "show_needstate" ? (
                                      &lt;span style={{ display:'none' }}&gt;
  
                                      &lt;/span&gt;
                                      ) : (
                                      &lt;span&gt;
                                          {rowData[data.field]}
                                      &lt;/span&gt;
                                      )
                                  }
  
                                  &lt;/span&gt;
                              )
                              } 
                              &lt;/div&gt;
                          )
                  };
                  })
          ]}
              data={this.state.data}
              editable={{
              onRowAdd: newData =&gt;
                  new Promise(resolve =&gt; {
                  setTimeout(() =&gt; {
                      resolve();
                      this.setState(prevState =&gt; {
                      const data = [...prevState.data];
                      data.push(newData);
                      return { ...prevState, data };
                      });
                  }, 1);
                  }),
              onRowUpdate: (newData, oldData) =&gt;
                  new Promise(resolve =&gt; {
                  setTimeout(() =&gt; {
                      resolve();
                      if (oldData) {
                      this.setState(prevState =&gt; {
                          const data = [...prevState.data];
                          data[data.indexOf(oldData)] = newData;
                          return { ...prevState, data };
                      });
                      }
                  }, 1);
                  }),
              onRowDelete: oldData =&gt;
                  new Promise(resolve =&gt; {
                  setTimeout(() =&gt; {
                      resolve();
                      this.setState(prevState =&gt; {
                      const data = [...prevState.data];
                      data.splice(data.indexOf(oldData), 1);
                      return { ...prevState, data };
                      });
                  }, 1);
                  }),
              }}
          /&gt;
          );
      }
      }
  </code></pre>
  
  <p>Here I have shared my complete component.</p>
  
  <p>Here I am using react <strong>material</strong> table.</p>
  
  <p>It is working fine but I just want to achieve one feature.</p>
  
  <p>When I am clicking edit all rows are getting <strong>editable</strong> state.</p>
  
  <p>But I want to prevent two columns <em>six_month_mention</em> and <strong>map_score</strong> from being editable.</p>
  
  <p>Is there any way to achieve it? </p>
  
  <p>Please have a look</p>