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

Please do not circumvent the system by putting your links in code blocks. There's a reason why it asks you to post code as well as the link. It's easier to help if you do. — kelsny, Nov 14 '22 at 16:19

score 0 · Answer 1 · answered Nov 14 '22 at 16:02

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>

this is what i want look like.. but how this implement on react functional component — Khalid P, Nov 15 '22 at 06:01
Report configurations don't depend on the framework. Just remove the first element of the `dataSource.data` property, which contains mapping, and add the `slice` object from example on the same level as the `dataSource`: `report: { dataSource: {...}, slice: {...}, tableSizes: {...}, ... }` — solja, Nov 15 '22 at 12:08

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

1 Answers1