Creating a Dynamic Hierarchical Table Visual in Power BI using React

[AspenV]

Hello Power BI Community,

I am embarking on a project to create a dynamic hierarchical table visual using React in Power BI. Here's a detailed description of the functionality I am aiming for:

1. Dynamic Headers:

   • I want to create a mechanism where users can add columns to a specific field, with the order and names of these columns dictating the headers of the table in the visual.
   • Users should have the flexibility to rename these columns, with the visual automatically reflecting these changes.

2. Hierarchical Table Structure:

   • The goal is to display data in a nested, hierarchical manner.
   • I intend to establish a parent-child relationship between different tables, leveraging common values across varied column names.
   • Initially, each header will represent a unique table, shown in a collapsed form to only display the header row.
   • Upon interaction, the table should expand to reveal the associated data.

3. Parent-Child Relationship:

   • For instance:
     • Table 1 (child):
       • ID(column): 44, 44, 66, 88
     • Table 2 (parent):
       • Site Number(column): 44, 66, 77
   • The visual should accurately associate and display the parent-child relationships. Upon expanding a parent, the child tables should be visible, with a collapsible/expandable feature as well.

4. Data Representation:

   • In each expanded parent, an additional layer of metadata should be displayed.
   • Example:
     • Parent:
       • Metadata
       • • Child
       • • Child

I've been playing around with the capabilities in my code to handle the data mapping and relationships. However, when I attempt to add more than one column to the fields, Power BI returns an error stating it can't determine the relationships between the fields. Furthermore, the console/debugging tool only displays data for one column.

I'm reaching out for advice or solutions from anyone who has faced similar challenges or has insights on configuring the capabilities and code to achieve this dynamic hierarchical table structure in Power BI using React. Your insights and guidance would be immensely valuable in progressing this project. Thank you in advance for your time and assistance!

---

Looking forward to your valuable feedback and suggestions. Thank you!

[lbendlin]

One option would be to add Field Parameters to the Power BI data model and use these instead.

[AspenV]

Hello and thank you for your suggestion regarding the use of Field Parameters in the Power BI data model. I appreciate your input. However, I am currently facing a fundamental challenge even before moving towards creating a dynamic hierarchical table structure. I am unable to display more than one column in my custom visual, despite my efforts in configuring the dataViewMappings in the capabilities file.

Here's a summary of the issues I am encountering:

Displaying Multiple Columns:

When I attempt to add two columns from the same table to the fields in the visual, sometimes one column appears empty even though I am certain both columns have data.
When I try to add columns from different tables, Power BI returns an error stating it can't determine the relationships between the fields, even though a relationship exists within the data model.

Capabilities Configuration:

I have attempted to adjust the dataViewMappings section of the capabilities file to handle multiple columns within a single table mapping, but this hasn’t resolved the issue.
Given these challenges, I am finding it difficult to progress to the hierarchical table structure that I aim to create. The primary obstacle is the inability to display multiple columns together in the custom visual, which seems to be a prerequisite for achieving the dynamic and hierarchical data representation that I envision.

I am reaching out to seek further advice or insights on how to overcome these fundamental challenges, particularly the display of multiple columns in the custom visual. If anyone has experienced similar issues or has recommendations on how to configure the capabilities and code to successfully display multiple columns from the same or different tables, your guidance would be immensely valuable.

I am looking forward to any suggestions or solutions that could help me move forward with this project.

Thank you very much for your time and assistance!