How to disable a specific row to be draggable in AG table? - reactjs

Question

I am using the Managed Dragging of AG Grid React table and want to disable a specific row, if it matches the condition.
In Docs I couldn't find enough information how to do that. As it describes here, it is possible to add the draggable feature conditionally, like this
rowDrag: params => !params.node.group
In params object, I couldn't find the row data to implement my condition.
In the code example described below, I want to disable the row to be draggable if the name==='John.
Also, how to that if you have row draggable for entire row: rowDragEntireRow={true}?
Sandbox demo and code
import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
function App() {
const [gridApi, setGridApi] = React.useState(null);
const [gridColumnApi, setGridColumnApi] = React.useState(null);
const onGridReady = (params) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
};
const defaultColDef = {
flex: 1,
editable: true
};
const columnDefs = [
{
headerName: "Name",
field: "name",
rowDrag: (params) => {
console.log("params", params);
return !params.node.group;
}
},
{ headerName: "stop", field: "stop" },
{
headerName: "duration",
field: "duration"
}
];
const rowData = React.useMemo(
() => [
{
name: "John",
stop: 10,
duration: 5
},
{
name: "David",
stop: 15,
duration: 8
},
{
name: "Dan",
stop: 20,
duration: 6
}
],
[]
);
return (
<div>
<h1 align="center">React-App</h1>
<div>
<div className="ag-theme-alpine" style={{ height: "700px" }}>
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
defaultColDef={defaultColDef}
onGridReady={onGridReady}
rowDragManaged={true}
//rowDragEntireRow={true}
></AgGridReact>
</div>
</div>
</div>
);
}
export default App;
Any help will be appreciated

Answer 1

Update your rowDrag definition in the name column definition to the following:
rowDrag: (params) => {
if (params.data.name == "John") {
return false;
}
return true;
}
Demo.