I have a lightning:datatable on my lightning component and the component is hosted on visualforce page to be available on classic. Everything works fine except when I try to access the default header actions(Wrap text & Clip text) of a column by clicking on it, the entire page refreshes for no reason. What do I do to avoid that? Also, it works fine when trying the same thing in lightning experience. Any suggestions?

Component Code:

<aura:component>
<aura:attribute name="demodata" type="Object"/>
<aura:attribute name="democolumns" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<lightning:datatable data="{!v.demodata}" 
    columns="{!v.democolumns}" 
    keyField="id"
    onrowselection="{!c.getSelectedAccName}"/>
</aura:component>

Controller Code:

({
init: function (cmp, event, helper) {
cmp.set('v.democolumns', [
            {label: 'Account Name', fieldName: 'accountName', type: 'text'},
            {label: 'Industry', fieldName: 'industry', type: 'text'},
            {label: 'Account Number', fieldName: 'accountNumber', type: 'text'}
        ]);
    cmp.set('v.demodata', [{
            id: 'a',
            accountName: 'Edge Communications',
            industry: 'Education',
            accountNumber: 'CD451796'
        },
        {
            id: 'b',
            accountName: 'GenePoint',
            industry: 'Electronics',
            accountNumber: 'CC978213'
        }]);
},
getSelectedAccName: function (cmp, event) {
    var selectedAccRows = event.getParam('selectedRows');
    for (var i = 0; i < selectedAccRows.length; i++){
        alert(selectedAccRows[i].accountName+" is selected");
    }
}

Sample Reference image in Lightning