React Table 添加总计行：在表格底部显示 CO2/kg 总量

本文档将介绍如何在 React Table 组件的底部添加一行，用于显示特定列（例如 CO2/kg 列）的总计值。通过使用 Array.prototype.reduce() 方法，可以轻松计算出所需列的总和，并将其呈现在表格的底部，从而增强数据的可读性和实用性。

实现步骤

1. 计算总计值： 使用 Array.prototype.reduce() 方法遍历数据数组，计算 CO2/kg 列的总和。
2. 添加总计行： 在表格的 <tfoot> 标签内添加一行，并在相应的单元格中显示计算出的总计值。
3. 样式调整（可选）： 可以根据需要调整总计行的样式，使其与表格的其他部分协调一致。

具体实现

假设你已经有一个包含数据的数组 description，并且每个数据项都有一个 carbon 属性代表 CO2/kg 值。以下是如何在 React Table 的底部添加总计行的代码示例：

<table className="table mt-5 text-center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>UOM</th>
      <th>Density</th>
      <th>CO2/kg</th>
      <th>Carbon</th>
      <th>Footprint</th>
    </tr>
  </thead>
  <tbody>
    {descrition.map((descrition) => (
      <tr key={descrition.id}>
        <td>{descrition.food}</td>
        <td>{descrition.quantity}</td>
        <td>{descrition.uom}</td>
        <td>{descrition.density}</td>
        <td>{descrition.carbon}</td>
        <td>{carbonCategory(descrition.carbon)}</td>
        <td>{carbonCategory(descrition.carbon)}</td>
      </tr>
    ))}
  </tbody>
  <tfoot>
    <tr>
      <td colSpan="4"></td> {/* 空单元格，用于对齐 */}
      <td>
        {/* 计算 CO2/kg 总和 */}
        {descrition.reduce((acc, item) => {
          return acc + item.carbon;
        }, 0)}
      </td>
      <td colSpan="2"></td> {/* 空单元格，用于对齐 */}
    </tr>
  </tfoot>
</table>

代码解释：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

• <tfoot> 标签：定义表格的页脚部分，总计行将放置在此处。
• <td colSpan="4"></td> 和 <td colSpan="2"></td>：创建空的单元格，并使用 colSpan 属性使其跨越多列，从而将总计值放置在 CO2/kg 列的下方。
• descrition.reduce((acc, item) => { return acc + item.carbon; }, 0)：使用 reduce 方法计算 descrition 数组中所有 carbon 属性的总和。
  • acc：累加器，用于存储总和的中间值。
  • item：数组中的当前元素。
  • item.carbon：当前元素的 CO2/kg 值。
  • 0：reduce 方法的初始值，即累加器的初始值为 0。

注意事项：

• 确保 carbon 属性是数值类型，以便进行求和计算。如果 carbon 属性是字符串类型，需要先将其转换为数值类型，例如使用 parseFloat() 或 parseInt()。
• 根据你的表格结构和样式，可能需要调整空单元格的 colSpan 属性，以确保总计值正确对齐。
• 你可以根据需要添加其他列的总计行，只需重复上述步骤，并修改 reduce 方法中的属性名称即可。

总结

通过使用 Array.prototype.reduce() 方法和 <tfoot> 标签，可以轻松地在 React Table 的底部添加总计行，从而提高数据的可读性和实用性。这种方法简单易懂，适用于各种类型的表格数据。记住，根据你的具体需求，可能需要调整代码中的一些细节，例如属性名称和样式。

以上就是React Table 添加总计行：在表格底部显示 CO2/kg 总量的详细内容，更多请关注php中文网其它相关文章！