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

77 Views Asked by At

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

1

There are 1 best solutions below

2
solja On

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>