How to remove drill down caption? and add expand and collapse arrow

Question

I want remove caption and add expand and collapse arrow. I can't post image here so check my codesandbox. This I want look like https://codepen.io/webdatarocks/pen/dLeZvN

My codesandbox: https://codesandbox.io/s/react-webdatarocks-react-functional-component-jh22w6?file=/src/components/useBalanceSheet.js

Answer 1

Hierarchies in WebDataRocks are always displayed with captions for the next level. If you want the behavior as in the Codepen link you provided, you should replace the hierarchy with the separate data columns and then add them to slice.rows.

Here is the example snippet

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    width: "100%",
    height: 600,
    report: {
      dataSource: {
        dataSourceType: "json",
        data: getData()
      },
      slice: {
        rows: [{
            uniqueName: "baseGroup",
            caption: "Balance Sheet"
          },
          {
            uniqueName: "group"
          },
          {
            uniqueName: "accountName"
          }
        ],
        measures: [{
          uniqueName: "value",
          aggregation: "sum",
        }],
        expands: {
          expandAll: true
        },
        drills: {
          drillAll: true
        },
      },
      tableSizes: {
      columns: [
        {
          idx: 0,
          width: 400
        },
        {
          idx: 1,
          width: 200
        }
      ]
    },
    options: {
      grid: {
        showHeaders: false
      }
    },
    }
  }

);


function getData() {
  return [{
      baseGroup: "Asset",
      group: "Current Asset",
      accountName: "Cash Account",
      value: 100
    },
    {
      baseGroup: "Asset",
      group: "Current Asset",
      accountName: "SBI Bank Account",
      value: 100
    },
    {
      baseGroup: "Asset",
      group: "Current Asset",
      accountName: "SBI Loan",
      value: 100
    },
    {
      baseGroup: "Equity",
      group: "Shareholbers Funds",
      accountName: "Reserves and Surplus",
      value: 100
    },
    {
      baseGroup: "Equity",
      group: "Shareholbers Funds",
      accountName: "Reserves and Surplus",
      value: 100
    },
    {
      baseGroup: "Liabilities",
      group: "Current liabilities",
      accountName: "Short-term borrowings",
      value: 100
    },
    {
      baseGroup: "Liabilities",
      group: "Current liabilities",
      accountName: "Tax payable",
      value: 100
    },
    
    {
      baseGroup: "Liabilities",
      group: "Non-current liabilities",
      accountName: "Long-term borrowings",
      value: 100
    }
    
  ]
}

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<div id="wdr-component"></div>