如何删除向下钻取标题？并添加展开和折叠箭头答案

【问题标题】：How to remove drill down caption? and add expand and collapse arrow如何删除向下钻取标题？并添加展开和折叠箭头
【发布时间】：2022-11-15 14:28:16
【问题描述】：

我想删除标题并添加展开和折叠箭头。我不能在这里发布图片，所以请检查我的codesandbox。这个我想要看起来像https://codepen.io/webdatarocks/pen/dLeZvN

我的代码箱： https://codesandbox.io/s/react-webdatarocks-react-functional-component-jh22w6?file=/src/components/useBalanceSheet.js

【问题讨论】：

请不要通过将链接放在代码块中来规避系统。它要求您发布代码和链接是有原因的。如果你这样做，就更容易提供帮助。

标签： reactjs codesandbox webdatarocks

【解决方案1】：

WebDataRocks 中的层次结构始终显示为下一层的标题。如果您想要您提供的 Codepen 链接中的行为，您应该用单独的数据列替换层次结构，然后将它们添加到 slice.rows。

这是示例 sn-p

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>

【讨论】：

这就是我想要的样子..但是这是如何在 React 功能组件上实现的