Detect Which Table Column Was Clicked

Morning All,

I’m working in Perspective, Gateway 8.0.16.

I’m trying to let a user click on a Table column heading to open up a custom filter popup. I’m able to add a filter icon via CSS, and can capture the mouse click via the Table’s OnClick event. What I’m unable to do is determine which column header was clicked. Is this possible?

Thanks in advance.

Hi @m.boog, this can be found in table props: selection.selectedColumn

HI Matthew, thanks for the reply. I had started with this property, but found it lacking for my use case.

Given this table, I have a column heading (A) that I want the user to click on to open the popup. When the user click here, it triggers an onClick event and returns the last column selection made in the table rows. So if the user had selected the cell at (B), the onRowClick event would be triggered, and the selection.SelectedColumn would be set to ‘Container ID’. However, when the user clicks on (A) again, selection.SelectedColumn is still set to ‘Container ID’, and the onClick event has no information pertaining to the column I clicked on.

The best solution I see at the moment is to create my own custom headings by rendering the top row of the table as a View, and handling the click event on the view. Not ideal, but it’ll get the job done.

Hi @m.boog, apologies I misunderstood what you were after.

I think your solution is the best way to go.

Did your custom headers end up working? Were you able to maintain all table functionality such as column re-sizing?