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

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>