How to create a expandable nested list visual in Power BI

Question

How to create expandable nested list visual in Power BI which something looks like below image. I tried searching on internet but couldn't find anything related.

Answer 1

Just use a matrix visual and right click on the desired group level to set your toggles:

Answer 2

As a custom visual, you can use basic Bootstrap and jQuery to develop the intended UI mentioned in your question.

If you are new to creating a custom visual, you can follow these steps: https://learn.microsoft.com/en-us/power-bi/developer/custom-visual-develop-tutorial

I would suggest using the webpack configuration instead of basic PBIVIZ. For more information, Visit https://github.com/Microsoft/powerbi-visuals-webpack-plugin#webpack-configuration

You can install the required dependencies in your package.json file of custom visual. This is how my basic package.json looks like which helps me creating visual as you mentioned in the question.

{
  "name": "visual",
  "scripts": {
    "pbiviz": "pbiviz",
    "pb-start": "pbiviz start",
    "start": "webpack-dev-server",
    "package": "pbiviz package",
    "cert": "pbiviz --install-cert",
    "develop": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "@babel/core": "^7.4.3",
    "@babel/polyfill": "7.0.0",
    "@babel/preset-env": "^7.4.3",
    "@babel/runtime": "^7.1.5",
    "@babel/runtime-corejs2": "^7.1.5",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "daterangepicker": "2.1.25",
    "extra-watch-webpack-plugin": "^1.0.3",
    "jquery": "^3.2.1",
    "json-loader": "^0.5.7",
    "less": "3.8.0",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.6.0",
    "moment": "^2.24.0",
    "powerbi-models": "^1.1.0",
    "powerbi-visuals-api": "~2.2.0",
    "powerbi-visuals-utils-dataviewutils": "2.0.1",
    "powerbi-visuals-utils-typeutils": "^2.1.0",
    "powerbi-visuals-webpack-plugin": "^2.1.2",
    "style-loader": "^0.23.1",
    "webpack-visualizer-plugin": "^0.1.11"
  },
  "devDependencies": {
    "@types/node": "^12.0.0",
    "@types/webpack": "^4.4.31",
    "@types/daterangepicker": "^2.1.17",
    "@types/jquery": "^2.0.41",
    "ts-loader": "4.5.0",
    "ts-node": "^8.1.0",
    "typescript": "^3.0.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

To create a table, you would have to use jQuery to create and append the HTML in visual. To expand and collapse a particular list, you can use jQuery/Javascript/Bootstrap in your visual.