sorting not working when using 'headerComponent' in ag-grid table

Question

i needed to display custom header component for displaying icons and other thing in the colum-header and for that i've used 'headerComponent' in the column definition. But now the issue is that the sorting is not working with 'headerComponent'. Need help

Even sortable: true is not working. searched a lot about it online and in official docs of ag-grid but, haven't found any resolution.

{
    headerName: 'Content',
    field: 'content_count',
    headerComponent: () => {
        return (
            <AampeTooltip title="The total number of unique sendable message variants attached to this label.">
                <span>Content</span>
            </AampeTooltip>
        );
    },
    sortable: true,
    width: 96,
},

Answer 1

If you are using the custom headerComponent, you need to implement all the functionalities yourself. See this example in the Doc, on how to implement custom sorting and filtering functions.

But if you would like to use the built in functionalities and add an inner custom component, then you can achieve it using headerComponentParams and innerHeaderComponent.

Example column definition:

{ 
  field: "height",
  headerComponentParams: {
    displayName: 'Column',
    innerHeaderComponent: MyHeaderComponent,
  }
}

And you can define your custom component:

const MyHeaderComponent = (params) => {
  const handleClick = () => {
    console.log('clicked...')
  }

  return (
    <div className="custom-div" onClick={handleClick}>
      {params.displayName}
    </div>
  );
}

Note that this inner component will be added inside the data-ref="eText" element.

See the example here.

You can also consider using Provided Components, if you want complete control over the generated html.