How to make only text of react bootstrap table header clickable

Question

Code:

<TableHeaderColumn dataField="test" isKey dataSort>Column</TableHeaderColumn>

With this the whole area of the column is clickable, I just want the text and the chevron to be clickable, how can I achieve that.

This image show that the whole area is clickable

Please help, i am stuck on this

This is the output HTML generated

Answer 1

You can use css to disabling clicking on some elements using pointer-events property:

pointer-events: none;

This is definition of none value of property:

none: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

It seems TableHeaderColumn generate some html with specific class, something like this:

 <th class="sort-column">

your can write css:

 .sort-column{
 pointer-events:none;

}

to disable clicking on whole column, but as this will also disable clicking on text you need to reset pointer events property off child element(text)

 .sort-column-child{
   pointer-events:auto;
 }

This is how you will use it:

   <TableHeaderColumn dataField="test" isKey dataSort><span class="sort-column-child">Column</span></TableHeaderColumn>