Fabric/Fluent UI Details List: Highlight column when clicked on the Header

Question

Is there a way to highlight the whole column or at least the header in DetailsList when clicked, with a condition that only 1 column can be selected at a time?

Changing the class inside 'onColumnHeaderClick' works but, it doesn't make the columns inactive if another column is selected.

Thanks everyone.

 onColumnHeaderClick = (e) => {
            e.preventDefault();
            e.target.classList = 'class-name';  
    }

Answer 1

Apparently, the below did the trick :-)

document.querySelectorAll(".class-name").forEach(obj => obj.classList.remove("class-name"));          

e.target.classList.add('class-name');