To preface this, I'm new to programming (<3 months) and I'm still learning basic concepts and terminology; forgive me if I seem obtuse. At the moment, I'm using an ag-grid component for the first time. My return statement has the following:
return (
<div className="App">
<input placeholder="Description" name="description" value={todo.description} onChange={inputChanged} />
<input placeholder="Date" name="date" value={todo.date} onChange={inputChanged}/>
<input placeholder="Status" name="status" value={todo.status} onChange={inputChanged}/>
<button onClick={addTodo}>Add</button>
<div className="ag-theme-material" style={{ height: 600, width: 600, margin: 'auto' }}>
<AgGridReact
rowData={todos}>
<AgGridColumn field="description" sortable={true} filter={true}></AgGridColumn>
<AgGridColumn field="date" sortable={true} filter={true}></AgGridColumn>
<AgGridColumn field="status" sortable={true} filter={true}></AgGridColumn>
</AgGridReact>
</div>
</div>
);
}
I've been tasked with preventing the drag and drop behavior of the ag-grid component. I was given the official https://www.ag-grid.com/javascript-grid-column-properties/ documentation to refer to, and I found the rowDrag property. I've tried to implement it as rowDrag={false} in the AgGridReact component, and separately into AgGridColumn, but neither method has worked. I've also searched this issue on Google, and found a few other methods that require making a whole new method for the draggability, but I think it might not be what's being sought in this exercise.
I feel dumb being stuck on this simple thing. I would really appreciate any help.