React Datasheet Grid - Render function does not allow to change

Question

I'm developing a React based website using @Equify/react-datasheet-grid. When I use render() function I can't be able to change cell value. I also checked this issue (React Input Type not editable). But I couldn't solve my problem.

Here is my code:

columns

const columns = [
    textColumn({ title: 'Kulak No', 
                 width: 1, 
                 minWidth: 200, 
                 key: 'identityNumber',
                 render: d=>renderStyle(d.rowData['identityNumber'], d.rowIndex)})
]

renderStyle

const renderStyle = (value, rowIndex) => {
    return (<input className='dsg-input' defaultValue={value} style={{"pointerEvents": "none", "backgroundColor": "rgba(199, 184, 26, 0.6)"}}>);

I'll be grateful for any help. PS: Please consider that I'm new to React.

Hayrettin Basaraner · Accepted Answer · 2021-01-20T11:35:20.373

I opened this issue on @Equify/react-datasheet-grid. You can see from link. And I found the solution:

const columns = [
    textColumn({ title: 'Kulak No', 
                 width: 1, 
                 minWidth: 200, 
                 key: 'identityNumber',
                 render: ({rowData, rowIndex, columnIndex, setRowData}) => renderStyle(rowData, rowIndex, columnIndex, setRowData), d.rowIndex)})
]

const renderStyle = (rowData, rowIndex, columnIndex, setRowData) => {
    let column = getKeyByValue(columnsIndexes, columnIndex);
    return (
        <input className='dsg-input' 
               defaultValue={rowData[column]} 
               onChange={(e) => setRowData({...rowData, column: e.target.value})} 
               style={{'backgroundColor': 'aqua'}}>
        </input>);
  }

React Datasheet Grid - Render function does not allow to change

1 Answers1