展开 React Bootstrap Table 以获得更精细的数据答案

【问题标题】：Expand React Bootstrap Table for more granular data展开 React Bootstrap Table 以获得更精细的数据
【发布时间】：2022-01-27 18:40:45
【问题描述】：

我有一个反应引导表，其中显示有关经理的销售信息，按经理分组，这样我就可以看到他们的整体表现。我想添加单击一行并扩展表格以包含销售代表级别的数据的功能。

数据：

const SALES = [
          {
          manager: 'Mgr 1', revenue: 49.98, repName: 'Rep 1', forecast: 81.00, 
          },
          {
          manager: 'Mgr 1', revenue: 10, repName: 'Rep 1', forecast: 91.00, 
          },
          {
          manager: 'Mgr 1', revenue: 9.99, repName: 'Rep 13', forecast: 82.00, 
          },
          {
          manager: 'Mgr 2', revenue: 99.99, repName: 'Rep 3', forecast: 101.00, 
          },
          {
          manager: 'Mgr 2', revenue: 9.99, repName: 'Rep 5', forecast: 89.00, 
          },
          {
          manager: 'Mgr 3', revenue: 199.99, repName: 'Rep 6', forecast: 77.00, 
          },
      ];

以下函数为我的初始表分组/聚合我的数据：

function groupByTotal(arr, groupByCols, aggregateCols, counter) {
        const subSet = (o, keys) => keys.reduce((r, k) => (r[k] = o[k], r), {})
        let grouped = {};
        arr.forEach(o => {
          const values = groupByCols.map(k => o[k]).join("|");
          if (grouped[values]) {
            aggregateCols.forEach(col => grouped[values][col] += o[col])
            if (counter) { grouped[values].Count++ }
          } else {
            grouped[values] = subSet(o, groupByCols);
            if (counter) { grouped[values].Count = 1 }
            aggregateCols.forEach(col => grouped[values][col] = o[col])
          }
        })
        return Object.values(grouped);
      }

const groupedSales = groupByTotal(SALES, ['manager'], ['revenue','forecast']);

建表：

const columns = [{
        dataField: 'manager',
        text: 'Sale Owner',
      }, {
        dataField: 'revenue',
        text: 'Revenue',
      }, {
        dataField: 'forecast',
        text: 'Forecast', 
      }];

      const expandRow = {
        renderer: row => (
          // Add rep level data to table below the appropriate manager
        ),
        showExpandColumn: true
      };

return (
   <BootstrapTable
      keyField='manager'
      data={ groupedSales }
      columns={ columns }
      expandRow={ expandRow }
   />  
)

理想的解决方案应该是这样的：

谁能帮我创建合适的 expandRow 或提出其他方法？谢谢。

【问题讨论】：

标签： javascript reactjs react-bootstrap react-bootstrap-table

【解决方案1】：

看看这个，它可能会解决你的问题。

http://allenfang.github.io/react-bootstrap-table/example.html#expand

【讨论】：

谢谢，但这对我来说实际上并不完全。

【解决方案2】：

您可以使用点符号轻松访问行数据：

const expandRow = {
  renderer: row => (
      <div>
          <p>Manager: {row.manager}</p>
          <p>Revenue: {row.revenue}</p>
          <p>Forecast: {row.forecast}</p>          
      </div>
  )
};

【讨论】：

感谢您抽出宝贵时间，但这并不能真正回答这个问题。
如果您尝试访问表外的数据，您可以使用 onExpand 事件从初始对象数组中获取您需要的数据。