Formatting Tabber

Most of the Sisense users are aware of and using Tabber plugin. By default, it comes with some basic styles like color, height etc. Sometimes we may need to apply more styles to the tabber. It can be achieved by using below script

widget.on('ready',function(w, e) {
	
	basicstyle = { 'font-size':'15px', 'padding':'10px 20px', 'transition':'all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s'} //style for both active and inactive tabs
	activeTabSyle = {'background-color': '#a8325e', 'color':'#ffffff', 'border':'none','border-radius':'5px'} //style for active tab
	inactiveTabStyle = {'background-color': '#ffffff', 'color':'#858c87', 'border-bottom':'3px #d4d4d4 solid', 'border-radius':'0px'} //style for inactive tab
	
	$('.listDefaultCSS .listItemDefaultCSS', element).css(basicstyle) 
	$('.vSeparatorCSS', element).css({'border': 'none'})

	$(`.listDefaultCSS .listItemDefaultCSS[index=${w.style.activeTab}]`, element).css(activeTabSyle) 
    $(`.listDefaultCSS .listItemDefaultCSS:not([index=${w.style.activeTab}])`, element).css(inactiveTabStyle)
	
	$('.listDefaultCSS .listItemDefaultCSS', element).on('click', function(s){
    	$(`.listDefaultCSS .listItemDefaultCSS:contains("${$(s)[0].currentTarget.innerHTML}")`, element).css(activeTabSyle)
    	$(`.listDefaultCSS .listItemDefaultCSS:not(:contains("${$(s)[0].currentTarget.innerHTML}"))`, element).css(inactiveTabStyle)
	})
})

You can also set a default tab when page loads. In below code, update "Tab 3" with name of tab which needs to set as default.

widget.style.activeTab = widget.tabs.findIndex(el=>el.title == "Tab 3") //To set default tabber