AG Grid headerComponentFramework prop is not rendering custom component

Question

I am attempting to create a custom header using AG Grid and React, but am unable to render the custom component that is passed into the headerComponentFramework prop within my autoGroupColumnDefs.

The AG Grid documentation points to using headerComponentFramework, and when editing their example code with their Plunker link I am successfully able to create and edit a custom header. When I attempt to implement the same thing in my code, I'm not able to even access my component. E.g. I tried to console.log a message from my custom header component, but it didn't log. I also tried alternate props, such as headerComponent and headerGroupComponent but those didn't work either.

Sample code below:

import CustomHeaderComponent from './filePath';

autoGroupColumnDef = useMemo(() => {
  headerComponentFramework: CustomHeaderComponent
  headerName: ‘name’,
  suppressMenu: true,
  cellRendererSelector: () => {}
  pinned: left,
}), [dependencies])

gridOptions = { 
  …otherGridOptions,
  autoGroupColumnDefs
}

return (
  <AgGridComponent 
    gridOptions={gridOptions}
  />
)

export const CustomHeaderComponent = {
  console.log(‘hello world’); // doesn't log

  // do stuff 

  return (
    <div> {Custom Header} </div>
  )
}

Is headerComponentFramework the correct prop to use here? If anyone has suggestions on how to render a custom header, it would be greatly appreciated. Please let me know if I can provide additional details as well.

please could you provide a stackblitz or similar? – Fletch Jun 21 '22 at 08:47 — Fletch, Jun 21 '22 at 08:47

score 1 · Answer 1 · edited Jun 22 '22 at 06:55

I was successful in using headerComponent and registering my component in the frameworkComponents prop:

autoGroupColumnDef = useMemo(() => {
  headerComponent: 'customHeaderComponent'
  headerName: ‘name’,
  suppressMenu: true,
  cellRendererSelector: () => {}
  pinned: left,
}), [dependencies])

gridOptions = {
  …otherGridOptions,
  frameworkComponents: {
    customerHeaderComponent: CustomHeaderComponent
  },
  autoGroupColumnDefs
}

I'm still not sure why headerComponentFramework isn't working.

AG Grid headerComponentFramework prop is not rendering custom component

1 Answers1