6

I am using react-data-grid for displaying an editable table in a page. I have used editable: true for enabling editable columns. But i have some rows which are non-editable. How can i control this in row-level?

Please suggest a solution. PFB the initialization of data grid.

<ReactDataGrid
    enableCellSelect={true}
    columns={this.state.columns}
    rowGetter={rowGetter}
    rowsCount={this.state.rows.length}
    rowHeight={35}
    minHeight={500}
    onGridRowsUpdated={this.handleGridRowsUpdated}/>
Lini Susan V
  • 1,135
  • 1
  • 8
  • 25

1 Answers1

9

ReactDataGrid takes "editable" as input function.

Here, we can pass out custom logic to determine if edit is allowed for the specific cell.

columns = [
      {
        key: 'id',
        name: 'ID'
      },
      {
        key: 'location_id',
        name: 'Location ID',
        editable: function(rowData) {
          return rowData.allowEdit === true;
        }
      }
]
Sudhir Shrestha
  • 1,106
  • 1
  • 12
  • 25
  • please let me know where can we get documentation about ReactDataGrid. I found [official site](http://adazzle.github.io/react-data-grid/documentation.html#/componentsDocs) only. But couldn't find the details that you have shared. – Lini Susan V Apr 18 '17 at 09:38
  • I couldn't find this in the documentation as well. I had required similar scenarios then ended up searching their source file file ("react-data-grid.js") for solution. If you search "canEdit:" in this file you can probably find the comment there about this method. – Sudhir Shrestha Apr 18 '17 at 20:42
  • Thanks for the info :) – Lini Susan V Apr 19 '17 at 05:54
  • This worked after my two days of search. Hope they create a better documentation – Boopathi T Oct 22 '18 at 14:00