I encountered the problem where non draggable rows change their position, which doesn't make a sense
Now if you test it in sandbox, you can see, that it is still possible drop the draggable rows to the position where the `name === 'John'.
Is there any way to prevent it and have that specific row(in my case, if name ==="John") fixed on that position while dragAndDropping?
Code below and sandbox demo
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 rowData = [
{ id: 2, name: "David", stop: 15, duration: 8 },
{ id: 1, name: "John", stop: 10, duration: 5 },
{ id: 3, name: "Dan", stop: 20, duration: 6 }
];
const defaultColDef = {
flex: 1,
editable: true
};
const columnDefs = [
{
headerName: "Name",
field: "name",
rowDrag: (params) => params.node.data.name !== "John"
},
{ headerName: "stop", field: "stop" },
{
headerName: "duration",
field: "duration"
}
];
return (
<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>
);
}
export default App;
Any help will be appreciated
I found row pinning in docs, I'm not sure, maybe this is what I need?