React-data-grid: Disabling a specific cell on the grid

[nicomfe]

[ ] bug report
[X] feature request
[ ] support request

Is it possible to disable a specific cell on the grid?

[diogofcunha]

Hi @nicomfe, what do you mean by disabling?

Hide a cell? Make it readonly?

[nicomfe]

make it readonly

[pidupuis]

Any workaround?

[dg92]

@nicomfe @pidupuis any updates?

[pidupuis]

@dg92 Nope :/

[amanmahajan7]

You can use onCheckCellIsEditable prop to make some cells readonly.

checkCellEditable = ({ column, row }) => {
   // Return true/false
};

render() {
  return(
     <ReactDataGrid ... 
        onCheckCellEditable={this.checkCellEditable}
     />
  );
}

[zebralight]

You can use onCheckCellIsEditable prop to make some cells readonly.

checkCellEditable = ({ column, row }) => {
   // Return true/false
};

render() {
  return(
     <ReactDataGrid ... 
        onCheckCellEditable={this.checkCellEditable}
     />
  );
}

when defining checkCellEditable like so to make all cells editable:

checkCellEditable = ({ column, row }) => true

All cells are still read only.

[dongapplyboard]

You can use onCheckCellIsEditable prop to make some cells readonly.

checkCellEditable = ({ column, row }) => {
   // Return true/false
};

render() {
  return(
     <ReactDataGrid ... 
        onCheckCellEditable={this.checkCellEditable}
     />
  );
}

when defining checkCellEditable like so to make all cells editable:

checkCellEditable = ({ column, row }) => true

All cells are still read only.

@zebralight This disables the entire row, what about just particular cells (eg. A cell at column 1, row 2)

[dongapplyboard]

You can use onCheckCellIsEditable prop to make some cells readonly.

checkCellEditable = ({ column, row }) => {
   // Return true/false
};

render() {
  return(
     <ReactDataGrid ... 
        onCheckCellEditable={this.checkCellEditable}
     />
  );
}

when defining checkCellEditable like so to make all cells editable:

checkCellEditable = ({ column, row }) => true

All cells are still read only.

@zebralight This disables the entire row, what about just particular cells (eg. A cell at column 1, row 2)

Nevermind found out that you can utilize the editable prop in columns that takes the rowData prop and disable that certain column and row (cell) when the data changes.

columns = [
      {
        key: 'id',
        name: 'ID'
      },
      {
        key: 'location_id',
        name: 'Location ID',
        editable: function(rowData) {
          return rowData.allowEdit === true;
        }
      }
]

[Talamantez]

You can use onCheckCellIsEditable prop to make some cells readonly.

checkCellEditable = ({ column, row }) => {
   // Return true/false
};

render() {
  return(
     <ReactDataGrid ... 
        onCheckCellEditable={this.checkCellEditable}
     />
  );
}

Hi - Thanks for the solution. There is a typo in this example. In the ReactDataGrid JSX component, the onCheckCellEditable prop should be onCheckCellIsEditable.
Thanks!