Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can we make some rows non-editable in react-data-grid?

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}/>
like image 496
Lini Susan V Avatar asked Apr 10 '17 06:04

Lini Susan V


People also ask

How do I make a row editable in react table?

In your column array that you pass into react table you need to create a button who's onClick function takes a callback to edit your data to add an isEditing: true so you will handle turning the row to edit mode from outside of the table.

How do you filter a grid in react?

To enable filtering in the Grid, set the allowFiltering to true. Filtering options can be configured through filterSettings . To use filter, inject the Filter module in the grid. To learn about how to work with Filtering Options, you can check on this video for React Grid.

How do you update row data in Ag grid react?

The easiest way to update data inside the grid is to replace the data you gave it with a fresh set of data. This is done by either updating the rowData bound property (if using a framework) or calling api. setRowData(newData) . See Updating Row Data for more details.


1 Answers

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;
        }
      }
]
like image 189
Sudhir Shrestha Avatar answered Sep 30 '22 03:09

Sudhir Shrestha