AG-Grid & React Hooks：如何从 cellRendererFramework 组件调用父组件中的 function？

Question

I'm working on a project that uses ag-grid 25.1.0, and it cannot be updated to a later version. The project has data presented in 2 views, as cards or as a grid, so the data has to be stored in a parent component and is passed down via child components. My problem is that I can't work out how to call a function in the parent component from a button in the grid. The flow from the parent goes: parent > grid > columnDefs > cellRendererFramework and I need to call setAgentData in the parent from the last element in that list. There is a lot of bespoke code in the project so I'm adding a very simplified version of it here, leaving out anything that doesn't relate directly to the question.

Parent Component:

import Grid from './grid/grid';
....

const Apps = (props) => {
  const [agentData, setAgentData] = useState(props.data);

  return (
    <Grid
      agentData={agentData}
      setAgentData={setAgentData}
    />
  );
};

export default Apps;

Grid Component:

import { columnDefs } from './columns';
import Grid from 'ag-grid';
...

const Grid = (props) => {
  ...
  
  return (
    <Grid
      columnDefs={columnDefs}
      records={props.agentData}
      setAgentData={props.setAgentData} // Unsure if this is how to pass the function call here
    />
  );
};

export default Grid;

Column Definition Component:

import Toggle from './toggle';
...

export const columnDefs = [
  {
    field: 'active',
    cellRendererFramework: Toggle,
    // Unsure how to pass the function call here
    ...
  }
]

CellRendererFramework Component:

const Toggle = (props) => {
  ...

  return (
    <button
      type="button"
      value="props.agentData"
      onClick={() => props.setAgentData(!props.agentData)
    />
  );
};

export default Toggle;

As I said, this is a very simplified version of the code - all I need to know is how to call setAgentData from the Toggle component. If I've made any mistakes elsewhere, please ignore them

Answer 1

To access setAgentData within Toggle , you need to pass it through as a prop. ag-grid allows you to specify the additional parameters to pass through in the columnDefs array of objects by adding the cellRendererParams property to your objects. As setAgentData is only available to you within your Grid component and not "Column Definition Component" file, you can .map() your array of objects like so to add the cellRendererParams to pass through the function:

const Grid = (props) => {
  const columnDefsWithProps = useMemo(() =>  {
    return columnDefs.map(col => col.cellRendererFramework === Toggle
      ? {...col, cellRendererParams: {setAgentData: props.setAgentData}}
      : col
    );
  }, [props.setAgentData]);
  
  return (
    <Grid
      columnDefs={columnDefsWithProps}
      records={props.agentData}
    />
  );
};

export default Grid;

I've wrapped the above in a useMemo() to avoid rerunning the map on each rerender of Grid . If you have many grid items that you need to pass this to you can change the condition in the .map() . You may also need to pass through other props such as agentData if that is not available currently.