Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

397
Views
How to prevent a specific row rowDrop in AG Grid table?

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

Update

I found row pinning in docs, I'm not sure, maybe this is what I need?

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!