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}/>
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.
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.
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.
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;
}
}
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With