material-table怎么做汇总行？反应答案

【问题标题】：material-table how do summary row? reactjsmaterial-table怎么做汇总行？反应
【发布时间】：2019-12-05 08:36:19
【问题描述】：

如何在物料表中的汇总行帮帮我，谢谢

【问题讨论】：

【解决方案1】：

如果“摘要行”指的是表格标题，那是您只需添加到 <MaterialTable /> 组件的道具“标题”。

但是，我怀疑您需要带有 Total 结果的行，而我在 examples 中也找不到。这是一个自定义函数，您可以使用它自己计算总数，将其添加到您的数据集中并获得类似的结果：

const addTotal = (data, byColumn) => {
  let keys = Object.keys(data[0]);
  let total = data.reduce((acc, el) => {
    return acc += +(el[byColumn]);
  }, 0);

  let totalRow = {};
  let emptyRow = {};
  for (let key of keys) {
    if (key === keys[0]) {
      totalRow[key] = 'Total';
    } else if (key === byColumn) {
      totalRow[key] = total;
    } else {
      totalRow[key] = '';
    }
    emptyRow[key] = '';
  }
  return [...data, emptyRow, totalRow];
}

这将添加一个空行和一个总计，您输入的参数为byColumn。您需要注意求和的值（即添加类型检查或使用hasOwnProperty 验证列名）。

【讨论】：