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}/>

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}/>

• javascript
• reactjs
• datatable
• react-data-grid

1 Answer 1

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;
        }
      }
]