Custom visual - tables with tabs

[satishr]

I have a requirement to create a custom visual where I have to create a tabbed interface each containing tables something similar to the image. Please help me with any code examples. I'm trying to create a table using D3 but facing some issues. I saw few examples in jQuery for creating tabs. I'm not sure how to use jQuery in custom visual code.

[Anonymous]

Another option is to use book marks to show/hide the visuals.  Each visual can have filters applied to it.

Here are the steps:
https://www.aerieconsulting.com/blog/how-to-hide-and-show-visuals-in-power-bi

[Maho]

Perfect, thanks' this link was really useful for me. 🙏

[v-viig]

Is changing tabs going to filter data? If so, you might use table + slicer to reach the same behavior.

If you want to build the visual from scratch you should take a look at D3.js gallery for more examples.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[satishr]

@v-viig Couldn't get anything from the D3 gallery. My requirement is very simple. There are four tabs. The data should be split into four tables based on a logic and should be displayed one in each tab. I'm trying to implement https://www.w3schools.com/howto/howto_js_vertical_tabs.asp but couldn't do it. I know it is very simple but I'm new to Typescript and custom visual coding. I implemented the HTML and the CSS part from the above link. There is a line which says onclick="openCity(event, 'London')" in the HTML. How to do this in typescript?

[v-viig · Accepted solution]

That depends on what library you use. The common way is to add an event handler for click event:

• Vanila JS: element.addEventListener("click", () => {// TODO: Do something });
• D3.js / jQuery: selection.on("click", () => {// TODO: Do something })

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[satishr]

Thanks, I used the D3 option and it is working.

d3.select("#id").on('click', function() { ... }