[DataTable] How I can add custom icon in table caption?

[Hoviadin]

Hello, is there any way to add a custom icon to the header of a table column with a click event and so that it does not trigger the sorting click? and how I can catch a click on the sorting icon to do my own sorting?

[AlekseyManetov]

Hi @Hoviadin,

is there any way to add a custom icon to the header of a table column with a click event and so that it does not trigger the sorting click

The caption prop in columns configuration can accept ReactNode type, so you can try to provide a react component which will contain your icon + caption text. To not trigger sorting action, just add e.stopPropagation in you custom icon click.

and how I can catch a click on the sorting icon to do my own sorting?

Could you please describe more clearly what you need to do? Because usually sorting performed by the DataSources, for example for LazyDataSource current sorting value passed to the api callback and should be send to the server.
Anyway changing of sorting trigger DataTable onValueChange prop with new sorting value and then you can use this value to implement any logic which you want. But DataSources concept has everything to not to do sorting by your own.

[Hoviadin]

Great, thank you very much for your answer, but if you add a component through the caption, then on hover you get this strange tooltip. How can I avoid displaying the icon in the tooltip?

[AlekseyManetov]

Oh, it's because we always show tooltip with caption, to support cases when caption don't fit the column width. I guess we can fix it only via some hacks, for example via css cascading - write a selector which will set display:none for icon, in case when this icon wrapped by tooltip.

[Hoviadin]

Ok I will try, thank you