reactjs - material-table:如何制作汇总行？

Question

如何使用 Material 表制作这样的汇总行？请帮助我，谢谢。

Answer 1

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

但是，我怀疑您需要带有 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 验证列名)。