React AG-Grid实现指定行置顶功能求助（无需拖拽）

Got it, let's get that row-to-top functionality working for your AG-Grid! You're already halfway there with the cell renderer button—here's how to fill in the click handler to make it work seamlessly, no drag-and-drop required.

Step-by-Step Solution #

The core idea is to modify your data source array to move the target row to the first position, then tell AG-Grid to refresh with the updated data. Here's the complete code for your column definition, with the click handler implemented:

{
  headerName: "",
  field: "move",
  cellRenderer: (params) => {
    let eGui = document.createElement('div');
    let imageElement = document.createElement("img");
    imageElement.src = moveTopIcon; // Assuming this variable is defined elsewhere
    eGui.appendChild(imageElement);
    
    eGui.addEventListener('click', e => {
      // Prevent event propagation to avoid triggering grid default behaviors
      e.stopPropagation();
      
      // 1. Get the current row's data
      const targetRow = params.data;
      
      // 2. Get the full dataset from the grid (or use your own source variable)
      const allRows = params.api.getRowData();
      
      // 3. Create updated array: remove target row, then add it to the start
      const updatedRows = allRows.filter(row => row !== targetRow);
      updatedRows.unshift(targetRow);
      
      // 4. Update the grid with the new data order
      params.api.setRowData(updatedRows);
    });
    
    return eGui;
  }
}

Key Details & Notes #

• Event Propagation: Added e.stopPropagation() to prevent the click from triggering any default grid row selection or other unintended behaviors.
• State-Managed Data: If you're handling grid data via a state variable (like in React/Vue), update that state instead of directly fetching data via getRowData(). For example, in React:

  // Assuming gridData is in your component state
  const updatedRows = gridData.filter(row => row !== targetRow);
  updatedRows.unshift(targetRow);
  setGridData(updatedRows); // AG-Grid will auto-refresh when state changes
  

• Sort Conflicts: If your grid has sorting enabled, the sorted order might override your manual row placement. Clear active sorting first if needed:

  params.api.setSortModel([]);
  

• Unique Identifiers: If your data objects aren't direct references (e.g., fetched from an API), use a unique field like id to filter instead of reference equality:

  const updatedRows = allRows.filter(row => row.id !== targetRow.id);
  

内容的提问来源于stack exchange，提问作者Vivek Singh