How do I get the sort icon to show?

[darren10201]

I am doing custom sorting and want to show an icon on the column header, I added a menu button to the column with different sorting options, how do I show the sort icon?

[paustint]

If you are doing a custom header renderer via headerRenderer, then you are in charge of rendering the sort icon AFAIK.

In your headerRenderer, the props are HeaderRendererProps which have what you need to render whatever icon you want to show based on the sort.

I did something like this, but this is specific to the CSS framework I am using, which comes with icons. It will be different depending on what icons you are using in your applicaiton.

const iconName: IconName = sortDirection === 'ASC' ? 'arrowup' : 'arrowdown';

{sortDirection && <Icon type="utility" icon={iconName} className="slds-icon slds-icon-text-default slds-icon_xx-small" />}

I have not tried this nor looked at the code behind it, but there is an exported headerRenderer() function that you could possibly invoke, wrapped in one of your functions that you have which shows your menu button. (the column dragging example shows where this is function is used)